/*#region Custom CSS Properties */
:root {
    --nd-dark-green: #6fab70;
    --nd-light-green: #bad25f;
    --nd-purple-light: #e0a9db;
    --nd-purple-dark: #ad3d98;
    --nd-coral: #5eb3b7;
    --nd-ocean: #2a89c4;
    --nd-light-grey-1: #e8e8e8;
    --nd-light-grey-2: #f2f2f2;
} 
/*#endregion */

/*#region Fonts */
@font-face {
    font-family: HKGrotesk;
    src: url("../fonts/hk-grotesk/HKGrotesk-Regular.otf") format("opentype");
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: HKGrotesk;
    src: url("../fonts/hk-grotesk/HKGrotesk-Light.otf") format("opentype");
    font-stretch: normal;
    font-style: normal;
    font-weight: 300;
}
@font-face {
    font-family: HKGrotesk;
    src: url("../fonts/hk-grotesk/HKGrotesk-Bold.otf") format("opentype");
    font-stretch: normal;
    font-style: normal;
    font-weight: bold;
}
@font-face {
    font-family: HKGrotesk;
    src: url("../fonts/hk-grotesk/HKGrotesk-SemiBold.otf") format("opentype");
    font-stretch: normal;
    font-style: normal;
    font-weight: 600;
}
/*
@font-face {
    font-family: HKGrotesk;
    src: url("../fonts/hk-grotesk/HKGrotesk-ExtraBold.otf") format("opentype");
}
*/
@font-face {
    font-family: HKGrotesk;
    src: url("../fonts/hk-grotesk/HKGrotesk-Black.otf") format("opentype");
    font-stretch: normal;
    font-style: normal;
    font-weight: 900;
}
@font-face {
    font-family: CircularStd;
    src: local(CircularStd-Book), url(../fonts/circular-std/CircularStd-Book.woff2) format("woff2"), url(../fonts/circular-std/CircularStd-Book.woff) format("woff"), url(../fonts/circular-std/CircularStd-Book.ttf) format("truetype");
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
}

@font-face {
    font-family: CircularStd;
    src: local(CircularStd-Bold), url(../fonts/circular-std/CircularStd-Bold.woff2) format("woff2"), url(../fonts/circular-std/CircularStd-Bold.woff) format("woff"), url(../fonts/circular-std/CircularStd-Bold.ttf) format("truetype");
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
}
/*#endregion */

/*#region Default styling */
html {
    font-family: HKGrotesk, Helvetica, Arial, sans-serif;
    font-size: 18px;
    -webkit-text-size-adjust: 100%;
}
body, pre {
    font-family: HKGrotesk, Helvetica, Arial, sans-serif;
    font-size: 100%;
}
a:hover, 
a:active {
    text-decoration: none;
}
a:not([href]) {
    color: inherit;
    text-decoration: none;
}
.input-group-text,
.form-control {
    padding: 1rem;
}
.cursor-pointer {
    cursor: pointer;
}
.recommendations-action select.form-control {
    padding: 0.5rem;
}
form select,
.new-message-recipient-container select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url('../images/angle-down.svg');
    background-position: center right 1rem;
    background-repeat: no-repeat;
    background-size: .8rem;
}
.new-message-recipient-container select#select-recipient {
    height: auto;
    padding: .8rem 1.75rem .8rem .75rem;
}
.modal .form-control,
select.form-control.small-padding {
    padding: .375rem .75rem;
}
.svg-inline--fa {
    color: #79a25f;
}
.client-menu-png-icon {
    height: 1rem;
    margin-right: 1rem;
}
.row.no-border {
    border: 0 !important;
}
button.clean {
    background: none;
    border: 0;
    padding: 0;
}
.cta {
    background-color: #fff;
    border-radius: 2rem;
    border: solid 1px #000000;
    color: #151c27;
    font-family: HKGrotesk, Helvetica, Arial, sans-serif;
    font-size: 89%;
    font-stretch: normal;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    letter-spacing: 1px;
    padding: 1.1rem 1.7rem;
    text-align: center;
    text-transform: uppercase;
}
.cta.primary {
    background-color: var(--nd-coral);
    border: 1px solid var(--nd-coral);
    color: #fff;
    font-size: 89%;
    font-weight: bold;
    line-height: 1.4;
    text-align: left;
}
.cta.medium {
    font-size: 80%;
    padding: 0.7rem 1.1rem 0.7rem 2rem;
    text-transform: initial;
}
.cta.medium.no-icon {
    padding: 0.7rem 2rem;
}
.cta.medium i {
    font-size: 70%;
    margin-left: 1rem;
}
.cta.mini {
    font-size: 59%;
    padding: 0.7rem 1.1rem;
}
.cta.mini.primary:disabled,
.cta.medium:disabled,
.cta.primary:disabled {
    background-color: #9a9a9a;
}
.cta.mini.survey {
    background-color: transparent;
    margin-left: -15px;
    padding: 0.5rem 1.5rem;
}
.cta.black-on-white {
    background-color: #fff;
    border: 1px solid #000;
    color: #000;
}
.cta.danger {
    background-color: #d25f5f;
    color: #fff;
}
.cta.mini.green {
    background-color: #f3f8f2;
    border: 0;
    color: var(--nd-dark-green);
}
.cta.mini.green.selected {
    background-color: var(--nd-dark-green);
    border: 0;
    color: #fff;
}
button.cta.bare,
button.bare {
    background: none;
    border: 0;
    padding: 0;
}
.cta.primary .fa,
.cta.primary .far,
.btn.cta .fa,
.btn.cta .far {
    font-size: 1.11rem;
    font-weight: normal;
    line-height: normal;
}
.icon-large-size {
    font-size: 1.7rem !important;
}

@media only screen and (min-width: 769px) {
    .cta:focus,
    .btn:focus {
        border: 0.25rem solid var(--nd-light-green);
        outline: none;
    }
}
.cta.mini:disabled {
    background-color: #999;
    cursor: not-allowed; 
}
.cta.secondary {
    text-align: left;
}
.cta.black-and-white {
    background-color: #2d2d2d;
    border: 1px solid #2d2d2d;
    color: #fff;
}
.cta.save-button {
    padding-left: 1.3rem !important;
    padding-right: 1.3rem !important;
    text-transform: uppercase;
}
.btn.btn-primary {
    background-color: var(--nd-dark-green);
    border-color:var(--nd-dark-green);
}
.btn.black-and-white {
    background-color: #fff;
    border-radius: 2rem;
    border: solid 1px #000;
    color: #151c27;
    font-size: 60%;
    font-weight: bold;
    padding: 0.6rem 0.8rem;
    text-align: left;
    text-transform: uppercase;
}
.btn.black-and-white i {
    font-weight: normal;
    float: right;
    padding-top: 0.2rem;
}
.btn.black-and-white:disabled {
    background-color: #eee;
    border: 1px solid #eee;
    color: #d4d4d4;
}
.btn.dark-on-white {
    background-color: #fff;
    border: 1px solid #fff;
    color: #2d2d2d;
    font-weight: normal;
    text-transform: uppercase;
}
.btn.white-on-green {
    background-color: #6fab79;
    border: 1px solid #fff;
    color: #fff;
    font-weight: normal;
    text-transform: uppercase;
}
.btn.btn-interval {
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 1rem;
    color: #272727;
    font-size: 60%;
    font-weight: 400;
    margin: 0 0.15rem;
}
.btn.btn-interval.active {
    background-color: var(--nd-dark-green);
    color: #fff;
}
.go-to-week-view {
    padding-bottom: 1rem;
    padding-top: 2rem;
}
.go-to-week-view:hover {
    background: none !important;
}
.go-to-week-view .cta.mini {
    background: none;
    color: #2d2d2d;
    font-size: 0.67rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: 0.27px;
    line-height: normal;
    padding: 0.7rem 1.6rem;
    text-align: center;
}
.square-action-button {
    background-color: #efefef;
    border: 0;
    color: #2d2d2d;
    display: inline-block;
    font-size: 1rem;
    height: 3rem;
    margin-left: 0.3rem;
    padding: 0;
    text-align: center;
    vertical-align: top;
    width: 3rem;
}
a.square-action-button i {
    vertical-align: bottom;
}
.color-1 {
    color: var(--nd-light-green);
}
.bg-color-1::before {
    background-color: #bdeafa;
}
.color-2 {
    color: #ece87b;
}
.bg-color-2::before {
    background-color: #fbffc5;
}
.color-3 {
    color: #abe8f0;
}
.bg-color-3::before {
    background-color: #cbfabd;
}
.bg-color-4::before {
    background-color: #facebd;
}
.bg-color-5::before {
    background-color: #aa5c5b;
}
.bg-color-6::before {
    background-color: #faf9c1;
}
.bg-color-7::before {
    background-color: #c9ef9d;
}
.bg-color-8::before {
    background-color: #826868;
}
.color-dot {
    max-width: 1rem;
    padding-top: 0.5rem;
}
.color-dot::before {
    border-radius: 0.5rem;
    content: '';
    display: block;
    height: 0.5rem;
    width: 0.5rem;
}
span.macronutrient-dot {
    border-radius: 1rem;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.16);
    font-size: 1rem;
    height: 1.1rem;
    position: relative;
    top: 0.3rem;
    width: 1.1rem;
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: #639a63;
    border-color: #639a63;
}
.bg-dark-green {
    background-color: var(--nd-dark-green);
}
.bg-dark-grey {
    background-color: #2d2d2d;
}
.bt-1 {
    border-top: 1px solid #e8e8e8 !important;
}
.font-weight-900 {
    font-weight: 900;
}
.font-weight-bold {
    font-weight: bold;
}
.meal-commands {
    align-items: center;
    display: flex;
    justify-content: end;
    text-align: right
}
body.mealschedule-controller.edit-action .meal-commands {
    float: right;
}
.meal-commands i:not(.fa-plus-circle, .fa-times-circle) {
    font-size: 1.7rem !important;
}
body.mealschedule-controller.edit-action .meal-commands i {
    float: right;
    font-size: 1rem !important;
}
body.mealschedule-controller.edit-action .meal-commands a.edit-meal {
    float: none;
    margin-right: 0;
}
.copy-meal-button,
.paste-meal-button {
    background: none;
    border: 0;
}
.copy-meal-button i,
.paste-meal-button i,
.fooddiaryasclient-action .add-meal-button-plus a,
.fooddiary-action .add-meal-button-plus a {
    color: var(--nd-light-green);
    font-stretch: normal;
    font-style: normal;
    font-weight: 300;
    letter-spacing: normal;
    line-height: 0.73;
    vertical-align: middle;
}
/*.circle > .copy-meal-button i,
.circle > .paste-meal-button i {
    color: #c2a024;
}*/
.modal-outside-header {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: normal;
    line-height: normal;
    position: absolute;
    top: -1.5rem;
}
.green-text {
    color: var(--nd-light-green);
}
.dark-text {
    color: #222;
}
.ajax-error {
    background-color: #d25f5f !important;
    color: #fff !important;
    font-weight: 600;
    text-align: center;
}
.ajax-success-label {
    background-color: #6fab79;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    margin: -0.25rem -0.5rem 0.25rem -0.5rem;
    opacity: 0.75;
}
.ajax-error-label {
    background-color: #d25f5f;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    margin: -0.25rem -0.5rem 0.25rem -0.5rem;
    opacity: 0.75;
}
.text-center h1 a {
    color: #fff;
}
.mobile-title-right-action {
    float: right;
    padding-right: 0.8rem;
}
.completed {
    color: var(--nd-light-green) !important;
}
.read {
    color: var(--nd-ocean) !important;
}
.unread {
    color: #d25f5f;
}
.not-used {
    color: #ccc !important;
}
.dragging {
    cursor: grabbing !important;
}
.line-through {
    text-decoration: line-through;
}
.paper-plane-button {
    position: absolute;
    right: 2.5rem;
    top: 2.5rem;
    z-index: 1000;
}
.paper-plane-button button {
    background-color: var(--nd-dark-green);
    border: 0;
    border-radius: 2rem;
    padding: 0.25rem 0.5rem;
}
.paper-plane-button button i {
    color: #fff;
    font-size: 0.9rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: normal;
}
.square-action-buttons {
    margin: 1rem 0;
    text-align: right;
}
#main-grid.d-2023 .square-action-buttons {
    margin: 0;
}
.mealschedule-controller.edit-action .square-action-buttons {
    top: -1rem;
}
.square-action-button:disabled {
    background-color: #999;
}
.square-action-buttons .square-action-button i {
    float: none !important;
}
.square-action-buttons a.square-action-button i {
    margin-top: 1rem;
}
.square-action-buttons .square-action-button.green {
    background-color: var(--nd-coral);
    color: #fff;
}
.square-action-buttons .dropdown-menu {
    background-color: #efefef;
    border: 0;
    padding: 0;
}
.square-action-buttons .dropdown-menu li {
    border-bottom: 1px solid #fff;
    padding: 0.5rem 1rem;
}
.square-action-buttons .dropdown-menu a {
    color: #000;
    letter-spacing: normal;
    text-transform: initial;
}
.square-action-buttons .dropdown-menu a i {
    width: 1.5rem;
}
.square-action-buttons .square-action-button.dropdown-toggle::after {
    content: none;
}
.delete-row-button {
    background: none !important;
    border: 0 !important;
}
.delete-row-button i {
    color: #d25f5f;
    font-size: 1.7rem;
}
.big-number {
    color: #272727;
    font-size: 60px;
    font-stretch: normal;
    font-style: normal;
    font-weight: bold;
    letter-spacing: normal;
    line-height: 1.33;
}
#showVideoModal {
    z-index: 1051;
}
#showVideoModal iframe {
    width: 100%;
    min-height: 300px;
    height: 100%;
}
.extra-padding {
    padding: 1em;
}
.protein-colour {
    color: #d0acda;
}
.fat-colour {
    color: #e5c74f;
}
.carbohydrates-colour {
    color: #9bdc88;
}
.breakfast-colour,
.breakfast-colour a {
    color: #bdeafa;
}
.lunch-colour,
.lunch-colour a {
    color: #fbffc5;
}
.dinner-colour,
.dinner-colour a {
    color: #cbfabd;
}
.snack-colour,
.snack-colour a {
    color: #facebd;
}
.error-text {
    color: #d25f5f;
}
.no-user-image-placeholder {
    background-image: url(/images/icon_user.png);
    background-position-x: 50%;
    background-position-y: 100%;
    background-repeat: no-repeat;
    background-size: 85% 85%;
}
.has-error {
    background-color: #d25f5f;
}
.has-success {
    background-color: #6fab79;
    border-radius: 0.25rem;
}
.white-text {
    color: #fff;
}
.message-controller .little-square {
    color: #faf6a3;
}
.message-controller .little-square::before {
    content: '\025fc';
}
.sent-by-employee {
    background-color: #faf6a3 !important;
}
.adjust-for-android {
    margin-bottom: 10rem !important;
}
.pointer {
    cursor: pointer;
}
.today > a::before {
    border-left: 5px solid var(--nd-dark-green) !important;
    content: ' ';
    margin-left: -10px;
    margin-right: 5px;
}
.training-calendar-week > a {
    width: 100%;
}
.bg-light-green {
    background-color: #f4f9f4;
}
.no-border-radius {
    border-radius: 0 !important;
}
.small-border-radius {
    border-radius: 0.25rem !important;
}
.no-margin-for-child-p p {
    margin: 0;
}
.text-smaller {
    font-size: 0.75rem;
}
.small-uppercase-header {
    font-size: 0.6rem;
    text-transform: uppercase;
}
.info-text {
    display: block;
    font-size: 0.8rem !important;
    font-weight: normal !important;
    margin-bottom: 12px;
}
.font-awesome {
    font-family: 'Font Awesome 5 Pro', HKGrotesk, Helvetica, Arial, sans-serif;
}
.mobile-form-label {
    font-size: 0.9rem;
    margin-bottom: 0;
    margin-top: 1rem;
}
.multiple-select-box {
    height: 6rem;
}
.red-pill {
    background-color: #d25f5f;
    border-radius: 1rem;
    color: #fff;
    font-size: 0.6rem;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1;
    padding: 0.5rem 1rem;
    text-align: center;
}
.grey-background-with-shadow {
    background-color: #f4f4f4;
    box-shadow: 0 -0.6rem 1.1rem -0.8rem rgba(0, 0, 0, 0.5);
    color: #2d2d2d;
}
.table-row-datestamp {
    color: #838383;
    font-size: 0.65rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1;
    padding-top: 0.3rem;
}
.cursor-none {
    cursor: unset !important;
}
.padded-selects select {
    margin: 0.25rem 0 !important;
}
@media only screen and (min-width: 769px) {
    .mobile-only {
        display: none;
    }
    .modal-outside-header {
        font-size: 1.1rem;
        top: -2rem;
    }
}
.top-right-icon {
    font-size: 1.65rem !important;
    font-weight: 300;
    line-height: 0.8 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute;
    right: 1.5rem;
}
.smaller-header {
    font-size: 1.5rem;
    font-weight: 700;
}
.transparent {
    color: transparent;
}
.t-upper {
    text-transform: uppercase;
}
.t-bold {
    font-weight: bold;
}
.t-size-14 {
    font-size: 0.8rem;
}
.emphasized-link {
    color: #222;
}
.emphasized-link:hover {
    color: #222;
    text-decoration: underline;
}
.emphasized-link i.fa-external-link {
    border: 0;
    font-size: inherit;
    padding: 0;
}
.survey-border-bottom {
    border-bottom: 1px solid #e8e8e8 !important;
    padding-bottom: 2rem !important;
}
.translate-button {
    align-self: center;
    background-color: var(--nd-coral);
    border: 0;
    border-radius: 0.25rem;
    color: #fff;
    flex: 0 1 auto;
    font-size: 1rem;
    height: 2rem;
    padding: 0.25rem 0.5rem;
}
.gap-1rem {
    gap: 1rem;
}
.error-overlay {
    align-content: center;
    background-color: #212529;
    color: white;
    height: 100%;
    opacity: 0.7;
    position: absolute;
    text-align: center;
    top: 1px;
    width: 100%;
    z-index: 1000;
}
/*#endregion */

/*#region Login screen */
body.login-screen {
    background-color: #639a63;
    font-family: HKGrotesk, Helvetica, Arial, sans-serif;
}
body.login-screen .login-logo {
    margin: 2rem 0 4rem 0;
}
body.login-screen .login-logo img {
    height: auto;
    width: 2rem;
}
body.login-screen h1 {
    color: #fff;
    font-size: 32px;
    font-stretch: normal;
    font-style: normal;
    font-weight: 300;
    letter-spacing: 1.5px;
    line-height: 1.25;
    margin-bottom: 6rem;
}
body.login-screen form {
    background-color: #fff;
    padding-top: 4rem;
}
body.login-screen .card {
    border: 0;
    margin-top: -7rem;
}
body.login-screen .card .input-group-text {
    background-color: #f2f2f2;
    border: 0;
}
body.login-screen .card .form-control {
    background-color: #f2f2f2 !important;
    border: 1px solid #f2f2f2;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    height: 3rem;
    padding-left: 0;
}
body.login-screen .form-control:-webkit-autofill,
body.login-screen .form-control:-webkit-autofill:hover,
body.login-screen .form-control:-webkit-autofill:focus {
    background-color: #f2f2f2 !important;
}
body.login-screen .password-link {
    color: #272727;
    font-family: HKGrotesk, Helvetica, Arial, sans-serif;
    font-size: 0.67rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1;
    text-align: center;
}
body.login-screen .password-link a {
    color: #272727;
    text-decoration: none;
}
body.login-screen .need-account-info {
    font-size: 0.8rem;
    margin-top: 1.5rem;
    text-align: center;
}
/*#endregion */

/*#region Wrapper and primary container */
.wrapper {
    align-items: stretch;
    display: flex;
    width: 100%;
}
.primary.container {
    padding-bottom: 4rem;
}
.dark-background {
    background-color: #528653;
}
.extra-bottom-margin {
    margin-bottom: 5rem;
}
.staging-detector {
    background-color: black;
    color: white;
    font-size: 10px;
    font-variant: small-caps;
    height: 1rem;
    position: fixed;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 10;
}
/*#endregion */

/*#region Side menu */
#side-menu {
    background-color: #2d2d2d;
    box-shadow: inset -10px 1px 23px 0 rgba(0, 0, 0, 0.5);
    margin-left: -75vw;
    max-width: 75vw;
    min-height: 100vh;
    min-width: 75vw;
}
#side-menu.active {
    margin-left: 0;
}
#side-menu ul,
#side-menu li.log-out input,
#side-menu li.log-out button {
    color: #fff;
    font-family: HKGrotesk, Helvetica, Arial, sans-serif;
    font-size: 0.95rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: 300;
    letter-spacing: normal;
    line-height: 2.35;
    list-style-type: none;
    padding-left: 2rem;
    text-transform: uppercase;
}
#side-menu svg {
    color: #fff;
    margin-right: 1rem;
}
#side-menu .admin-side-menu-svg {
    filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(358deg) brightness(102%) contrast(102%);
    margin-right: 1.05rem;
    width: 0.95rem;
}
#side-menu li.sub-menu {
    padding-left: 1rem;
}
#side-menu li i {
    color: #fff;
    margin-right: 1rem;
    text-align: center;
    width: 1rem;
}
#side-menu a {
    color: #fff;
    position: relative;
    text-decoration: none;
}
#side-menu .has-sub-menu .sub-menu {
    display: none;
}
#side-menu .sub-menu li {
    cursor: pointer;
}
#side-menu .close-side-menu {
    font-size: 2rem;
    margin-bottom: 4rem;
}
#side-menu li.log-out form {
    background-color: transparent !important;
    display: inline;
}
#side-menu li.log-out input,
#side-menu li.log-out button {
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    border: 0;
    margin-left: -0.2rem;
    padding: 0;
}
@media (min-width: 769px) {
    #side-menu {
        margin-left: -35vw;
        max-width: 35vw;
        min-width: 35vw;
    }
    #side-menu.active {
        margin-left: 0;
    }
}
/*#endregion */

/*#region Top menu */
nav#top-menu {
    background-color: var(--nd-dark-green);
    padding-top: 1rem;
}
nav#top-menu .nav-link-toggle,
nav#top-menu .nav-link-back {
    padding-left: 1.8rem;
    padding-top: .8rem;
}
nav#top-menu .nav-link-toggle {
    position: relative;
}
nav#top-menu .nav-link-messages {
    padding-right: 1.8rem;
    padding-top: .8rem;
    position: relative;
}
nav#top-menu .nav-link i {
    color: #fff;
    font-size: 1.7rem;
}
nav#top-menu .nav-link-toggle svg,
nav#top-menu .nav-link-home img,
nav#top-menu .nav-link-messages svg,
nav#top-menu .nav-link-back svg,
nav#top-menu .nav-link-empty svg {
    color: #fff;
    height: 1.7rem;
    width: auto;
}
nav#top-menu .nav-link-empty svg {
    color: var(--nd-dark-green);
}
nav#top-menu .nav-link-empty i {
    color: transparent;
}
nav#top-menu .new-messages-dot,
nav#top-menu .new-surveys-dot,
nav#side-menu .new-surveys-dot {
    background-color: #e85c5c;
    border-radius: 0.5rem;
    height: 0.9rem;
    right: 1.8rem;
    position: absolute;
    top: 0.5rem;
    width: 0.9rem;
}
#client-surveys .new-answers-dot {
    background-color: #e85c5c;
    border-radius: 0.5rem;
    height: 0.5rem;
    left: -0.75rem;
    position: absolute;
    top: 0.4rem;
    width: 0.5rem;
}
nav#top-menu .new-surveys-dot {
    left: 1.8rem;
}
nav#side-menu .new-surveys-dot {
    left: -0.5rem;
    top: -0.35rem;
}
/*#endregion */

/*#region Utilities */
.modal-on-top {
    z-index: 2000;
}
/*#endregion */

.container.manual {
    bottom: 5.5rem;
    padding-left: 0;
    padding-right: 0;
    position: fixed;
    top: 11rem;
}
.container.manual iframe,
.container.wellgo iframe {
    border: 0;
    height: 100%;
    width: 100%;
}
.container.wellgo {
    bottom: 5.5rem;
    padding-left: 0;
    padding-right: 0;
    position: fixed;
    top: 5rem;
}
.has-add-group-button .small-admin-button.add-group-button {
    float: left;
    margin-top: 1rem;
}
@media only screen and (min-width: 1600px)  {
    .has-add-group-button .small-admin-button.add-group-button {
        float: right;
        margin-top: 0;
        white-space: nowrap;
    }
    .desktop-left-menu .has-add-group-button h4 {
        align-items: center !important;
        flex-direction: row !important;
        justify-content: space-between !important;
    }
}
body.mobile-client-body,
body.mobile-client-body #bottom-menu,
body.mobile-client-body #diary-popup,
body.mobile-client-body #meal-contents-container,
body.mobile-client-body #meal-contents-details-container,
body.mobile-client-body #meal-contents-summary-container,
body.mobile-client-body #activity-contents-container,
body.mobile-client-body #activity-contents-details-container,
body.mobile-client-body #activity-contents-summary-container,
body.mobile-client-body #all-messages-container,
body.mobile-client-body #message-form-container,
body.mobile-client-body .container.manual {
    margin: auto;
    max-width: 500px;
}
body.manual-action.mobile-client-body,
body.anita-action.mobile-client-body {
    background-color: white;
}
body.manual-action.mobile-client-body .container-fluid.primary {
    background-color: #639a63;
}

@media only screen and (min-width: 400px) {
    body.mobile-client-body #side-menu {
        visibility: hidden;
    }
    body.mobile-client-body #side-menu.active {
        position: absolute;
        visibility: visible;
        z-index: 10000;
    }
}
/*#region Top Menu Desktop */
#main-menu-desktop,
#top-menu-desktop,
#main-grid {
    display: none;
}
#main-grid.admin-messages {
    display: block;
    padding-left: 0;
    padding-right: 0;
}
.desktop-left-menu {
    padding-bottom: 6rem;
}
#desktop-main-area {
    margin: 0;
}
.desktop-only {
    display: none !important;
}
#notesForCalendarDayModal .modal-overview textarea {
    margin-bottom: 1rem;
}

#notesForCalendarDayModal .modal-actions {
    display: none;
}
#week-overview-tab .fa-exclamation-circle,
#main-grid #client-training-calendar-grid .fa-exclamation-circle {
    color: #d25f5f;
}
#main-grid #client-training-calendar-grid .temporary-week-container {
    background-color: #f2f2f2;
    border-radius: 0.3rem;
    padding: 1.7rem 1.2rem;
}
#main-grid #client-training-calendar-grid .temporary-week-container i {
    margin: auto;
}
#main-grid #training-program-exercises-grid .training-program-exercise-list-item,
#training-plan-session-exercises-grid .training-plan-session-exercise-list-item {
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #ddd;
    margin-bottom: 3px;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 3fr 3fr 12fr 1fr;
    grid-template-columns: 1fr repeat(2, 3fr) 12fr 1fr;
    -ms-grid-rows: auto 1fr auto;
    grid-template-rows: auto 1fr auto;
    grid-row-gap: 0.5em;
}
#main-grid #training-program-exercises-grid .training-program-exercise-list-item .position,
#training-plan-session-exercises-grid .training-plan-session-exercise-list-item .position,
#addDayModal #page-2 .training-program-exercise-list-item .position,
#addDayModal #page-2 #trainingProgramExercises .item .position {
    background: #ddd;
    font-weight: bold;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-area: 1 / 1 / 2 / 2;
    height: 2em;
    padding: 0.25em 0.5em;
    text-align: center;
}
#main-grid #training-program-exercises-grid .training-program-exercise-list-item .title,
#training-plan-session-exercises-grid .training-plan-session-exercise-list-item .title {
    -ms-grid-column: 2;
    -ms-grid-column-span: 5;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-area: 1 / 2 / 2 / 6;
    height: 2em;
    padding: 0.25em 0.5em;
}
#main-grid #training-program-exercises-grid .training-program-exercise-list-item .preview,
#training-plan-session-exercises-grid .training-plan-session-exercise-list-item .preview {
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-area: 2 / 2 / 3 / 3;
    height: 120px;
    position: relative;
}
#main-grid #training-program-exercises-grid .training-program-exercise-list-item .preview.no-image,
#main-grid #training-program-exercises-grid .training-program-exercise-list-item .focus.no-image,
#training-plan-session-exercises-grid .training-plan-session-exercise-list-item .preview.no-image,
#training-plan-session-exercises-grid .training-plan-session-exercise-list-item .focus.no-image {
    color: #ccc;
}
#main-grid #training-program-exercises-grid .training-program-exercise-list-item .preview img,
#training-plan-session-exercises-grid .training-plan-session-exercise-list-item .preview img {
    position: absolute;
}
#main-grid #training-program-exercises-grid .training-program-exercise-list-item .preview img,
#main-grid #training-program-exercises-grid .training-program-exercise-list-item .focus img,
#training-plan-session-exercises-grid .training-plan-session-exercise-list-item .preview img,
#training-plan-session-exercises-grid .training-plan-session-exercise-list-item .focus img {
    display: block;
    height: auto;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}
#main-grid #training-program-exercises-grid .training-program-exercise-list-item .focus,
#training-plan-session-exercises-grid .training-plan-session-exercise-list-item .focus {
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-area: 2 / 3 / 3 / 4;
}
#main-grid #training-program-exercises-grid .training-program-exercise-list-item .training-data,
#training-plan-session-exercises-grid .training-plan-session-exercise-list-item .training-data {
    margin-left: 1em;
    vertical-align: top;
    -ms-grid-column: 4;
    -ms-grid-column-span: 1;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-area: 2 / 4 / 3 / 5;
}
#addDayModal #page-2 #trainingProgramExercises .item .actions,
#addDayModal #page-2 #trainingProgramExercises .item .training-data .fa-edit.edit-training-data {
    display: none;
}
#main-grid #training-program-exercises-grid .training-program-exercise-list-item .notes,
#training-plan-session-exercises-grid .training-plan-session-exercise-list-item .notes {
    -ms-grid-column: 2;
    -ms-grid-column-span: 6;
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    grid-area: 3 / 2 / 4 / 7;
    margin-bottom: 1em;
}
#addDayModal,
#showChangedTrainingDataModal {
    background-color: rgba(0, 0, 0, 0.8);
}
#addDayModal .modal-body,
#showChangedTrainingDataModal .modal-body {
    padding: 0;
}
#showChangedTrainingDataModal .modal-container {
    display: flex;
    flex-direction: column;
}
#addDayModal .week-container {
    display: flex;
    flex-direction: column;
}
#addDayModal .week-actions {
    background-color: var(--nd-light-green);
    border-radius: 0.3rem 0.3rem 0 0;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 300;
    line-height: normal;
    padding: 0.5rem;
    text-align: left;
}
#addDayModal .week-actions .close-modal {
    cursor: pointer;
}
#addDayModal .week-overview,
#addDayModal .training-program-preview {
    flex: 1;
    padding: 0 0.5rem;
}
#addDayModal .day-row,
#addDayModal .group-row {
    background-color: #f2f2f2;
    align-items: center;
    color: #111;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    justify-content: center;
    letter-spacing: normal;
    line-height: normal;
    margin-bottom: 0.6rem;
    margin-top: 0.6rem;
    padding: 1rem;
    text-align: left;
}
#addDayModal h5 {
    color: #111;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: normal;
    line-height: normal;
}
#addDayModal #add-day-modal-new-training-program {
    background: none;
    padding-left: 0;
}
#addDayModal .training-program {
    color: #272727;
    font-size: 0.9rem;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.38;
    margin-top: 0.5rem;
}
#addDayModal .training-program .training-group-name .training-program-name {
    width: 100%;
}
#addDayModal #add-day-modal-new-training-program .training-program {
    font-weight: 600;
    line-height: normal;
}
#addDayModal .training-program i {
    color: #272727;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.1;
    margin-right: 0.5em;
    vertical-align: middle;
}
#addDayModal #add-day-modal-new-training-program .training-program i {
    font-size: 1.4rem;
    line-height: normal;
}
#addDayModal .training-group-name,
#addDayModal .training-group .training-program {
    padding-left: 1rem;
}
#addDayModal .training-program .training-group-name {
    display: flex;
    padding-left: 0;
}
#addDayModal .training-program i.show-training-program {
    color: #2d2d2d;
    font-size: 0.83rem;
    line-height: 1.47;
    margin-right: -0.2rem;
}
#addDayModal .day {
    margin: auto;
    text-align: left;
    width: 6rem;
}
#addDayModal #page-2 {
    display: none;
}
#addDayModal #page-2 h3 {
    display: none;
}
#addDayModal #page-2 h3 + p {
    color: #272727;
    line-height: 1.33;
    margin-top: 2rem;
}
#addDayModal #page-2 .training-program-exercise-list-item-actions {
    display: none;
}
#addDayModal #page-2 #add-to-day-button {
    width: 100%;
}
#addDayModal #page-2 #add-to-day-button i {
    float: right;
    line-height: 1.25;
}
#showChangedTrainingDataModal .modal-actions {
    background-color: var(--nd-light-green);
    border-radius: 0.3rem 0.3rem 0 0;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 300;
    line-height: normal;
    padding: 0.5rem;
    text-align: left;
}
#showChangedTrainingDataModal .modal-actions {
    background-color: #d25f5f;
}
#showChangedTrainingDataModal .modal-actions .close-modal {
    cursor: pointer;
}
#showChangedTrainingDataModal .modal-overview {
    flex: 1;
    padding: 0.5rem 1.1rem;
}
#showChangedTrainingDataModal h3 {
    color: #000;
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    line-height: 1.27;
    margin: 1rem 0 1.5rem 0;
}
#showChangedTrainingDataModal .group-row {
    background-color: #f2f2f2;
    align-items: center;
    color: #111;
    font-size: 1rem;
    font-weight: 600;
    justify-content: center;
    letter-spacing: normal;
    line-height: normal;
    margin-bottom: 0.6rem;
    margin-top: 0.6rem;
    padding: 1rem 3rem;
    text-align: left;
}
#showChangedTrainingDataModal h5 {
    color: #111;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: normal;
    line-height: normal;
}
#showChangedTrainingDataModal .item-row {
    color: #272727;
    font-size: 0.9rem;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.38;
    margin-top: 0.5rem;
}
#showChangedTrainingDataModal .item-row i {
    color: #272727;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.1;
    margin-right: 0.5em;
    vertical-align: middle;
}
#showChangedTrainingDataModal .item-row i {
    font-size: 0.9rem;
    line-height: 1.38;
}
#showChangedTrainingDataModal .item-name.comment {
    font-weight: bold;
}
.training-group,
.training-group .list-group-item {
    background-color: inherit;
    border: 0;
}
@media(min-width: 768px) {
    #mobile-main-area,
    .mobile-only {
        display: none;
    }

    .desktop-only {
        display: flex !important;
    }

    #main-grid.admin-messages {
        display: flex;
        flex-direction: column;
        padding: 2.2rem 6% 0 2.2rem;
    }

    #all-messages-container {
        background-color: #fff;
    }

    .messages-admin.message-controller.show-action #all-messages-container h1.desktop-only > span {
        position: absolute;
        right: 0;
    }

    h3 {
        font-size: 1.5rem;
    }

    body:not(.mobile-client-body) #top-menu {
        display: none;
    }

    #top-menu-desktop {
        background-color: #528653;
        display: block;
        padding: 0.2rem 0;
        /*position: relative;*/
    }

        #top-menu-desktop > div {
            text-align: right;
        }

        #top-menu-desktop a,
        #top-menu-desktop span,
        #top-menu-desktop form,
        #top-menu-desktop .parent-menu {
            color: #fff;
            font-size: 0.67rem;
            font-stretch: normal;
            font-style: normal;
            font-weight: normal;
            letter-spacing: normal;
            line-height: 1.67;
            padding-left: 0.5rem;
        }

        #top-menu-desktop .parent-menu {
            display: inline-block;
            position: relative;
        }

        #top-menu-desktop a:first-child {
            border: 0;
        }

        #top-menu-desktop form {
            display: inline;
            padding-right: 0;
        }

        #top-menu-desktop button[type=submit] {
            background: transparent;
            border: 0;
            color: #fff;
            font-size: 0.67rem;
            font-stretch: normal;
            font-style: normal;
            font-weight: normal;
            letter-spacing: normal;
            line-height: 1.67;
            padding: 0;
        }

        #top-menu-desktop.active-client {
            background-color: #d25f5f;
        }

        #top-menu-desktop .active-client-top-menu {
            float: left;
            margin-left: 5%;
            padding-top: 0.1rem;
        }

        #top-menu-desktop .stop-active-client-button {
            background-color: #f4f4f4;
            border-radius: 2px;
            color: #2d2d2d;
            font-size: 0.6rem;
            line-height: 1.36;
            margin-left: 0.8rem;
            padding: 0.1rem 0.5rem 0.2rem 0.5rem;
        }

    #main-menu-desktop {
        background-color: var(--nd-dark-green);
        color: #fff;
        display: flex;
        padding: 1rem 0%;
    }

        #main-menu-desktop > .col-3 {
            align-self: center;
        }

        #main-menu-desktop .main-menu-items {
            /*padding-right: 10%;*/
            text-align: right;
        }

        #main-menu-desktop .nav-item {
            color: #fff;
            cursor: pointer;
            display: inline-block;
            flex: 0 1 auto;
            margin-top: 3px;
            position: relative;
            text-align: center;
        }

            #main-menu-desktop .nav-item:last-child {
                padding-right: 0;
            }

            #main-menu-desktop .nav-item i {
                color: #fff;
                font-size: 1.25rem;
            }

            #main-menu-desktop .nav-item span {
                color: #fff;
                font-size: 0.5rem;
                font-weight: bold;
                line-height: normal;
                text-transform: uppercase;
            }

        #main-menu-desktop .nav-link-home {
            flex: 1 1 auto;
            margin-left: 0;
            margin-top: 0;
            padding: 0;
            text-align: left;
        }

            #main-menu-desktop .nav-link-home img {
                height: 1.5rem;
                width: auto;
            }

            #main-menu-desktop .nav-link-home span {
                display: inline-block;
                font-size: 1rem;
                font-weight: bold;
                margin-left: 1rem;
                text-transform: capitalize;
                vertical-align: middle;
            }

        #main-menu-desktop .main-menu-items .nav-link {
            padding: 0.25rem;
        }

        #main-menu-desktop .nav-link-training-admin .svg-image,
        #main-menu-desktop .nav-link-training-client .svg-image {
            filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
        }

        #main-menu-desktop .nav-item.active::before {
            border-style: solid;
            border-bottom-color: #fff;
            border-width: 0 .7rem .7rem;
            bottom: -1rem;
            color: var(--nd-dark-green);
            content: "";
            height: 1rem;
            left: calc(50% - 0.7rem);
            position: absolute;
            width: 1rem;
        }

        #main-menu-desktop .nav-item.active span {
            font-weight: 900;
        }

    #top-menu-desktop .parent-menu {
        cursor: pointer;
    }

    #top-menu-desktop .sub-menu {
        background: #fff;
        box-shadow: 0 0 40px -10px rgba(0, 0, 0, 0.4);
        position: absolute;
        top: 2rem;
        visibility: hidden;
    }

    #main-menu-desktop .sub-menu {
        background: #fff;
        box-shadow: 0 0 40px -10px rgba(0, 0, 0, 0.4);
        display: block;
        left: -50%;
        position: absolute;
        top: 105%;
        visibility: hidden;
    }

        #top-menu-desktop .sub-menu::before,
        #main-menu-desktop .sub-menu::before {
            border-bottom-color: #fff;
            border-style: solid;
            border-width: 0 .7rem .7rem;
            color: transparent; /*var(--nd-dark-green);*/
            content: "";
            height: 1rem;
            left: calc(50% - 0.7rem);
            position: absolute;
            top: -1rem;
            width: 1rem;
        }

        #top-menu-desktop .sub-menu.active,
        #main-menu-desktop .sub-menu.active {
            visibility: visible;
            z-index: 1000;
        }

    #top-menu-desktop .sub-menu-item,
    #main-menu-desktop .sub-menu-item {
        border-bottom: 1px solid #e8e8e8;
        padding: 1rem 2rem;
    }

        #top-menu-desktop .sub-menu-item a,
        #main-menu-desktop .sub-menu-item a {
            align-items: center;
            color: var(--nd-dark-green);
            display: flex;
            font-size: 0.6rem;
            font-weight: bold;
            text-transform: uppercase;
            white-space: nowrap;
        }

        #main-menu-desktop .sub-menu-item img {
            margin-right: 1rem;
            width: 1.8rem;
        }

    #main-menu-desktop .new-messages-dot {
        background-color: #e85c5c;
        border-radius: 0.5rem;
        height: 0.75rem;
        left: 3.25rem;
        position: absolute;
        top: 0.25rem;
        width: 0.75rem;
    }

    #main-menu-desktop .new-survey-updates-dot {
        background-color: #e85c5c;
        border-radius: 0.5rem;
        height: 0.75rem;
        left: 2.75rem;
        position: absolute;
        top: 0.25rem;
        width: 0.75rem;
    }

    #desktop-main-area {
        margin: 0;
        padding: 0;
    }

    .desktop-left-menu {
        background-color: #f1f9f2;
        padding: 3rem 2rem 3rem 5%;
    }

        .desktop-left-menu h4 {
            border-bottom: 1px solid #2d2d2d;
            font-size: 0.9rem;
            font-weight: 600;
            line-height: 1.25;
            margin-bottom: 0;
            padding-bottom: 1.1rem;
            text-transform: uppercase;
        }

        .desktop-left-menu #inactive-clients h4 {
            border-bottom: 0;
            border-top: 1px solid #2d2d2d;
            font-size: 0.9rem;
            font-weight: 600;
            line-height: 1.25;
            margin-bottom: 0;
            margin-top: 1rem;
            padding-bottom: 0;
            padding-top: 1.1rem;
            text-transform: uppercase;
        }

        .desktop-left-menu .has-add-group-button h4 {
            align-items: flex-start;
            display: flex;
            flex-direction: column;
        }

        .desktop-left-menu h5 + p {
            font-size: 0.9rem;
        }

        .desktop-left-menu h6 {
            font-style: italic;
        }

    .new-action-menu-top,
    .new-training-program-menu-top,
    .new-survey-menu-top {
        text-align: center;
    }

        .new-action-menu-top a > i,
        .new-training-program-menu-top i,
        .new-survey-menu-top i {
            border: 2px solid #000;
            border-radius: 100%;
            color: #000;
            font-size: 2.2rem;
            line-height: normal;
            padding: 1rem 1.33rem;
        }

        .new-action-menu-top h5,
        .new-training-program-menu-top h5,
        .new-survey-menu-top h5 {
            font-size: 0.85rem;
            font-weight: bold;
            line-height: 1.6;
            margin-top: 1rem;
            text-transform: uppercase;
        }

        .new-training-program-menu-top h5,
        .new-survey-menu-top h5 {
            margin-top: 1rem;
        }

        .new-action-menu-top p,
        .new-training-program-menu-top p,
        .new-survey-menu-top p {
            color: #272727;
            font-size: 0.8rem;
            line-height: 1.29;
            margin: auto;
            width: 75%;
        }

    .desktop-left-menu .clients,
    .desktop-left-menu .customers,
    .desktop-left-menu .recipes,
    .desktop-left-menu .meal-schedules,
    .desktop-left-menu .exercise-schedules,
    .desktop-left-menu .activities,
    .desktop-left-menu .my-messages,
    .desktop-left-menu .foods,
    .training-programs,
    .surveys {
        margin-top: 3.5rem;
    }

        .meal-schedules .meal-schedules,
        .exercise-schedules .exercise-schedules,
        .training-programs .training-programs {
            margin-top: 0;
        }

    .meal-schedules .dropdown-menu,
    .exercise-schedules .dropdown-menu {
        padding: 0.5rem;
    }

    .clients .client-group,
    .clients .client-group .list-group-item,
    .my-standards .list-group-item,
    .meal-schedules .meal-schedule-group,
    .meal-schedules .meal-schedule-group .list-group-item,
    .exercise-schedules .exercise-schedule-group,
    .exercise-schedules .exercise-schedule-group .list-group-item,
    .training-group,
    .training-group .list-group-item,
    .survey-group,
    .survey-group .list-group-item {
        background-color: inherit;
        border: 0;
    }

        .my-standards .list-group-item a,
        .meal-schedules .list-group-item a,
        .exercise-schedules .list-group-item a {
            color: #000;
        }

    .clients .client-group,
    .meal-schedules .meal-schedule-group,
    .exercise-schedules .exercise-schedule-group,
    .training-group,
    .survey-group {
        margin-top: 1.1rem;
        padding: 0;
    }

    .clients.list-group .list-group-item.client-group,
    .clients.list-group .list-group-item.client-group a,
    .customers .list-group-item a,
    .meal-schedules .list-group-item.meal-schedule a,
    .exercise-schedules .list-group-item.exercise-schedule a,
    .recipes .list-group-item.recipe a,
    .activities .list-group-item.activity a,
    .my-messages .list-group-item.message a,
    .foods .list-group-item.food a,
    .training-programs.list-group .list-group-item.training-group,
    .surveys.list-group .list-group-item.survey-group {
        color: #272727;
        font-size: 1rem;
        line-height: 1.33;
    }

    .recipes .list-group-item.recipe,
    .my-standards .list-group-item.my-standard,
    .activities .list-group-item.activity,
    .customers .list-group-item,
    .my-messages .list-group-item.message,
    .foods .list-group-item.food {
        background-color: inherit;
        border: 0;
        margin-top: 1.1rem;
        padding: 0;
    }

        .clients.list-group .list-group-item.client-group .client-group-name.active,
        .my-standards .list-group-item.my-standard.active,
        .meal-schedules.list-group .list-group-item.meal-schedule-group .meal-schedule-group-name.active,
        .exercise-schedules.list-group .list-group-item.exercise-schedule-group .exercise-schedule-group-name.active,
        .recipes .list-group-item.recipe.active,
        .activities .list-group-item.activity.active,
        .customers .list-group-item.active,
        .my-messages .list-group-item.message.active,
        .foods .list-group-item.food.active,
        .training-programs.list-group .list-group-item.training-group .training-group-name.active,
        .surveys.list-group .list-group-item.survey-group .survey-group-name.active {
            font-weight: bold;
        }

    .clients.list-group .list-group-item.client-group .list-group-item,
    .meal-schedules.list-group .list-group-item.meal-schedule-group .list-group-item,
    .exercise-schedules.list-group .list-group-item.exercise-schedule-group .list-group-item,
    .training-programs.list-group .list-group-item.training-group .list-group-item,
    .surveys.list-group .list-group-item.survey-group .list-group-item {
        cursor: pointer;
        display: none;
        font-size: 0.85rem;
        line-height: 1.6;
        margin-top: 0.5rem;
        padding: 0;
    }

        .clients.list-group .list-group-item.client-group .list-group-item.visible,
        .meal-schedules.list-group .list-group-item.meal-schedule-group .list-group-item.visible,
        .exercise-schedules.list-group .list-group-item.exercise-schedule-group .list-group-item.visible,
        .training-programs.list-group .list-group-item.training-group .list-group-item.visible,
        .surveys.list-group .list-group-item.survey-group .list-group-item.visible {
            display: block;
        }

    #my-meal-schedules .list-group-item.failure,
    #sent-meal-schedules .list-group-item.failure {
        background-color: #d25f5f;
        border-radius: 0.25rem;
    }

        #my-meal-schedules .list-group-item.failure a,
        #my-meal-schedules .list-group-item.success a,
        #sent-meal-schedules .list-group-item.failure a,
        #sent-meal-schedules .list-group-item.success a {
            color: #fff;
        }

    #my-meal-schedules .list-group-item.success,
    #sent-meal-schedules .list-group-item.success {
        background-color: #6fab79;
        border-radius: 0.25rem;
    }

    #my-meal-schedules > h4 > div,
    #my-training-programs > h4 > div,
    #my-surveys > h4 > div,
    #active-clients > h4 > div,
    #inactive-clients > h4 > div {
        margin-right: 1rem;
        width: 100%;
    }

    #sent-meal-schedules input[type=checkbox],
    #inactive-clients input[type=checkbox] {
        margin-right: 0.5rem;
    }

    #multiple-schedule-select,
    #multiple-own-schedules-select,
    #multiple-active-clients-select,
    #multiple-inactive-clients-select,
    #multiple-own-training-programs-select,
    #multiple-own-surveys-select {
        float: right;
    }

    #multiple-active-clients-select,
    #multiple-inactive-clients-select {
        margin-right: 1rem;
    }

    #delete-multiple-meal-schedules,
    #delete-multiple-clients,
    #delete-multiple-training-programs,
    #delete-multiple-surveys {
        float: right;
        margin-right: 0.5rem;
    }

    #multiple-schedule-select,
    #multiple-own-schedules-select,
    #multiple-active-clients-select,
    #multiple-inactive-clients-select,
    #multiple-own-training-programs-select,
    #multiple-own-surveys-select,
    #delete-multiple-meal-schedules,
    #delete-multiple-clients,
    #delete-multiple-training-programs,
    #delete-multiple-surveys {
        color: #d25f5f;
        cursor: pointer;
    }

    .delete-multiple-clients-max-clients {
        font-size: 0.8rem;
        font-style: italic;
        font-weight: 700;
        text-align: right;
    }

    .clients.list-group#inactive-clients .fa-play {
        cursor: pointer;
        font-size: 0.85rem;
        line-height: 1.6;
        padding: 0;
    }

    .clients.list-group .list-group-item.client-group .client-name.selected,
    .exercise-schedules.list-group .list-group-item.exercise-schedule-group .exercise-schedule-group-name.selected {
        font-weight: bold;
    }

    .list-group-item .list-group-item-actions {
        display: inline-block;
        float: right;
    }

        .list-group-item .list-group-item-actions i {
            line-height: 1.5;
        }

    .training-programs.list-group .list-group-item.training-group .training-group-name,
    .surveys.list-group .list-group-item.survey-group .survey-group-name {
        cursor: pointer;
    }

    .clients.list-group .list-group-item.client-group .list-group-item .fa-bars,
    .training-programs.list-group .list-group-item.training-group .list-group-item .fa-bars,
    .surveys.list-group .list-group-item.survey-group .list-group-item .fa-bars {
        cursor: grab;
        font-size: 0.9rem;
        line-height: 1.5;
        margin-right: 0.1rem;
    }

    .clients.list-group .list-group-item.client-group .fa-pen,
    .clients.list-group .list-group-item.client-group .fa-people-arrows,
    .meal-schedules.list-group .list-group-item.meal-schedule-group .fa-pen,
    .meal-schedules.list-group .list-group-item.meal-schedule-group .fa-share,
    .meal-schedules.list-group .list-group-item.meal-schedule-group .fa-chart-bar,
    .exercise-schedules.list-group .list-group-item.exercise-schedule-group .fa-pen,
    .exercise-schedules.list-group .list-group-item.exercise-schedule-group .fa-share,
    .training-programs.list-group .training-group.list-group-item .fa-pen,
    .training-programs.list-group .training-group.list-group-item .fa-share,
    .surveys.list-group .survey-group.list-group-item .fa-pen,
    .surveys.list-group .survey-group.list-group-item .fa-share {
        color: #272727;
        font-size: 0.9rem;
        font-weight: 300;
        line-height: 1.6;
        margin-right: 1rem;
    }

    .clients.list-group .list-group-item.client-group .fa-times-circle,
    .meal-schedules.list-group .list-group-item.meal-schedule-group .fa-times-circle,
    .exercise-schedules.list-group .list-group-item.exercise-schedule-group .fa-times-circle,
    .training-programs.list-group .training-group.list-group-item .fa-times-circle,
    .surveys.list-group .survey-group.list-group-item .fa-times-circle {
        color: #d25f5f;
        font-size: 0.9rem;
        font-weight: 300;
        line-height: 1.6;
        margin-right: 0.5rem;
    }

    .clients.list-group .list-group-item.client-group .fa-angle-down,
    .clients.list-group .list-group-item.client-group .fa-angle-up,
    .clients.list-group#inactive-clients .fa-angle-down,
    .clients.list-group#inactive-clients .fa-angle-up,
    .meal-schedules.list-group .list-group-item.meal-schedule-group .fa-angle-down,
    .meal-schedules.list-group .list-group-item.meal-schedule-group .fa-angle-up,
    .exercise-schedules.list-group .list-group-item.exercise-schedule-group .fa-angle-down,
    .exercise-schedules.list-group .list-group-item.exercise-schedule-group .fa-angle-up,
    .training-programs.list-group .training-group.list-group-item .fa-angle-down,
    .training-programs.list-group .training-group.list-group-item .fa-angle-up,
    .surveys.list-group .survey-group.list-group-item .fa-angle-down,
    .surveys.list-group .survey-group.list-group-item .fa-angle-up {
        color: #272727;
        font-size: 1.7rem;
        font-weight: 300;
        line-height: 0.8;
    }

    #client-training-programs .training-group.list-group-item .hide-training-program,
    #my-recipes .list-group-item.recipe .hide-recipe {
        color: #9a9a9a;
        float: right;
    }

    #main-grid {
        display: block;
        padding: 2.2rem 2% 2.2rem 1rem;
    }

        #main-grid h1 {
            background-color: #fff;
            color: #000;
            font-size: 1.2rem;
            font-weight: 500;
            letter-spacing: 1.2px;
            line-height: 1.93;
            margin-bottom: 0;
            text-transform: uppercase;
        }

        #main-grid .clients-grid {
            display: flex;
            flex-wrap: wrap;
        }

            #main-grid .clients-grid .client {
                flex: 0 1 auto;
                margin-right: 2rem;
                margin-top: 3rem;
            }

            #main-grid .clients-grid .client-circle {
                background-color: #f2f2f2;
                border-radius: 100%;
                color: #9a9a9a;
                font-size: 3rem;
                font-weight: 600;
                height: 6rem;
                line-height: normal;
                text-align: center;
                width: 6rem;
            }

                #main-grid .clients-grid .client-circle span {
                    display: block;
                    height: 100%;
                    padding-top: 1rem;
                }

            #main-grid .clients-grid .client-tools {
                background-color: #fff;
                border-radius: 0.33rem;
                cursor: pointer;
                display: flex;
                justify-content: space-evenly;
                margin: 1rem auto -2rem auto;
                position: relative;
                text-align: right;
                top: -1rem;
                width: 3rem;
            }

            #main-grid .clients-grid .client-notifications {
                background-color: #fff;
                border-radius: 0.33rem;
                display: flex;
                justify-content: space-evenly;
                margin: auto auto -1.5rem auto;
                position: relative;
                text-align: center;
                top: -1rem;
                width: 3rem;
            }

                #main-grid .clients-grid .client-notifications .unchecked-completed-sessions i {
                    color: var(--nd-dark-green);
                }

                #main-grid .clients-grid .client-notifications .unread-client-notes i {
                    color: #f7d055;
                }

            #main-grid .clients-grid .client p {
                font-size: 0.9rem;
                font-weight: 600;
                letter-spacing: 0.36px;
                line-height: 1.75;
                margin-bottom: 0;
                margin-top: 1rem;
                text-align: center;
            }

        #main-grid p.training-program-description,
        #trainingProgramContent p.training-program-description {
            color: #272727;
            line-height: 1.33;
            padding-bottom: 3rem;
            white-space: pre-line;
        }

        #main-grid p.training-program-description {
            padding-bottom: 1.5rem;
        }

        #main-grid #training-program-exercises-grid .training-program-exercise-list-item .training-program-exercise-list-item-actions,
        #training-plan-session-exercises-grid .training-plan-session-exercise-list-item .training-plan-session-exercise-list-item-actions {
            -ms-grid-column: 5;
            -ms-grid-column-span: 1;
            -ms-grid-row: 2;
            -ms-grid-row-span: 1;
            grid-area: 2 / 5 / 3 / 6;
            text-align: center;
        }

        #main-grid .back-arrow a,
        #main-as-client-grid .back-arrow a,
        .training-session-name {
            color: #272727;
            font-size: 1.1rem;
            font-weight: 300;
            line-height: normal;
            text-transform: uppercase;
        }

        #main-grid .profile-pic .client-circle {
            background-color: #f2f2f2;
            border-radius: 100%;
            color: #9a9a9a;
            font-size: 1.5rem;
            font-weight: 600;
            height: 3rem;
            line-height: normal;
            text-align: center;
            width: 3rem;
        }

            #main-grid .profile-pic .client-circle span {
                display: block;
                height: 100%;
                padding-top: 1.5rem;
            }

        #main-grid .admin-client-training-calendar-header,
        #main-grid .admin-client-survey-header {
            align-items: center;
            display: flex;
            margin-bottom: 1.8rem;
            margin-top: 1.5rem;
        }

            #main-grid .admin-client-training-calendar-header .profile-pic,
            #main-grid .admin-client-survey-header .profile-pic {
                flex: 0 1 auto;
            }

            #main-grid .admin-client-training-calendar-header .header,
            #main-grid .admin-client-survey-header .header {
                flex: 1 1 auto;
                margin-left: 0.5rem;
            }

            #main-grid .admin-client-training-calendar-header #training-calendar-admin-as-client {
                flex: 0 1 auto;
                margin-left: 1rem;
                text-align: center;
            }

                #main-grid .admin-client-training-calendar-header #training-calendar-admin-as-client a {
                    color: #272727;
                    font-size: 0.7rem;
                }

                    #main-grid .admin-client-training-calendar-header #training-calendar-admin-as-client a i {
                        font-size: 2.2rem;
                        letter-spacing: 1.6px;
                        line-height: 0.88;
                        padding: 0.5rem;
                    }

            #main-grid .admin-client-training-calendar-header #training-calendar-admin-calendar {
                flex: 0 1 auto;
                text-align: right;
            }

                #main-grid .admin-client-training-calendar-header #training-calendar-admin-calendar i {
                    font-size: 2.2rem;
                    letter-spacing: 1.6px;
                    line-height: 0.88;
                    padding: 0.5rem;
                }

                #main-grid .admin-client-training-calendar-header #training-calendar-admin-calendar span {
                    color: #272727;
                    font-size: 0.7rem;
                }

            #main-grid .admin-client-training-calendar-header h1,
            #main-grid .admin-client-survey-header h1 {
                color: #000;
                line-height: 1.17;
            }

        #main-grid #training-plan-grid {
            margin-top: 3rem;
        }

            #main-grid #client-training-calendar-grid h3,
            #main-grid #training-plan-grid h3,
            #main-grid #client-surveys-grid h3 {
                color: #2a2a2a;
                flex: 1 1 100%;
                font-size: 1.1rem;
                font-weight: 600;
                letter-spacing: normal;
                line-height: normal;
            }

            #main-grid #client-training-calendar-grid .week-container,
            #main-grid #training-plan-grid .week-container,
            #main-grid #survey-content .survey-question-container.add-question,
            #main-grid #surveyContent .survey-question-container.add-question {
                display: flex;
                flex-wrap: wrap;
                margin-bottom: 3.3rem;
            }

        #main-grid #survey-content .survey-question-container.add-question,
        #main-grid #surveyContent .survey-question-container.add-question {
            width: 100%;
        }

        #main-grid #survey-content .survey-question-container.new-question,
        #main-grid #surveyContent .survey-question-container.new-question {
            display: grid;
            grid-template-columns: 3rem 1fr;
            grid-template-rows: 3rem 1fr;
            grid-column-gap: 0px;
            grid-row-gap: 0px;
            margin-bottom: 1rem;
            width: 100%;
        }

            #main-grid #survey-content .survey-question-container.new-question .survey-question-actions,
            #main-grid #surveyContent .survey-question-container.new-question .survey-question-actions {
                background-color: #272727;
                border-radius: 0.3rem 0 0 0;
                color: #fff;
                font-size: 1.1rem;
                font-weight: 300;
                grid-area: 1 / 1 / 2 / 2;
                line-height: 1.1rem;
                padding: 1rem 0.75rem;
            }

            #main-grid #survey-content .survey-question-container.new-question .survey-question-action-header,
            #main-grid #surveyContent .survey-question-container.new-question .survey-question-action-header {
                background-color: #f2f2f2;
                border-radius: 0 0.3rem 0.3rem 0;
                color: #2a2a2a;
                cursor: pointer;
                font-size: 1.1rem;
                font-weight: 600;
                grid-area: 1 / 2 / 2 / 6;
                letter-spacing: normal;
                line-height: 1.1rem;
                text-align: center;
                padding: 1rem 1.1rem;
            }

            #main-grid #survey-content .survey-question-container.new-question .empty,
            #main-grid #surveyContent .survey-question-container.new-question .empty {
                background-color: #f2f2f2;
                border-radius: 0 0 0 0.3rem;
                grid-area: 2 / 1 / 3 / 2;
            }

            #main-grid #survey-content .survey-question-container.new-question .survey-question-choose-type,
            #main-grid #surveyContent .survey-question-container.new-question .survey-question-choose-type {
                background-color: #f2f2f2;
                border-radius: 0 0 0.3rem 0;
                font-size: 0.8rem;
                grid-area: 2 / 2 / 3 / 6;
                padding-right: 3rem;
                padding-top: 1.5rem;
            }

                #main-grid #survey-content .survey-question-container.new-question .survey-question-choose-type .survey-question-type-options,
                #main-grid #surveyContent .survey-question-container.new-question .survey-question-choose-type .survey-question-type-options {
                    padding-bottom: 2rem;
                }

            #main-grid #survey-content .survey-question-container.new-question .survey-question-type-options .custom-checkbox-inline,
            #main-grid #surveyContent .survey-question-container.new-question .survey-question-type-options .custom-checkbox-inline {
                display: inline-block;
                margin-right: 3rem;
            }

                #main-grid #survey-content .survey-question-container.new-question .survey-question-type-options .custom-checkbox-inline .text,
                #main-grid #surveyContent .survey-question-container.new-question .survey-question-type-options .custom-checkbox-inline .text {
                    vertical-align: middle;
                }

            #main-grid #survey-content .survey-question-container.new-question .survey-question-choose-type .question-type,
            #main-grid #surveyContent .survey-question-container.new-question .survey-question-choose-type .question-type {
                display: none;
            }

                #main-grid #survey-content .survey-question-container.new-question .survey-question-choose-type .question-type.yesno-question,
                #main-grid #surveyContent .survey-question-container.new-question .survey-question-choose-type .question-type.yesno-question {
                    display: block;
                }

                #main-grid #survey-content .survey-question-container.new-question .survey-question-choose-type .question-type label,
                #main-grid #surveyContent .survey-question-container.new-question .survey-question-choose-type .question-type label {
                    display: block;
                }

                #main-grid #survey-content .survey-question-container.new-question .survey-question-choose-type .question-type textarea,
                #main-grid #surveyContent .survey-question-container.new-question .survey-question-choose-type .question-type textarea {
                    border: 1px solid #ccc;
                    margin-bottom: 2rem;
                    padding: 1rem;
                    width: 100%;
                }

            #main-grid #survey-content .survey-question-container.new-question .survey-question-choose-type .confirm-add-question,
            #main-grid #surveyContent .survey-question-container.new-question .survey-question-choose-type .confirm-add-question {
                margin-bottom: 3rem;
            }

        #main-grid #client-training-calendar-grid .week-actions,
        #main-grid #training-plan-grid .week-actions {
            background-color: var(--nd-ocean);
            border-radius: 0.3rem 0 0 0.3rem;
            color: #fff;
            flex: 0 1 9%;
            font-size: 0.75rem;
            font-weight: 300;
            line-height: normal;
            padding: 1.7rem 0.75rem;
            text-align: center;
        }

        #main-grid #client-training-calendar-grid .week-actions {
            position: relative;
        }

            #main-grid #client-training-calendar-grid .week-actions > div,
            #main-grid #training-plan-grid .week-actions > div {
                cursor: pointer;
                margin-bottom: 0.8rem;
            }

                #main-grid #client-training-calendar-grid .week-actions > div:last-child,
                #main-grid #training-plan-grid .week-actions > div:last-child {
                    margin-bottom: 0;
                }

        #main-grid #client-training-calendar-grid .week-overview,
        #main-grid #training-plan-grid .week-overview,
        #main-grid #survey-content .survey-question-container .survey-add-question,
        #main-grid #surveyContent .survey-question-container .survey-add-question {
            background-color: #f2f2f2;
            border-radius: 0 0.3rem 0.3rem 0;
            flex: 1 1 90%;
            padding: 1.7rem 1.1rem;
        }

        #main-grid #client-training-calendar-grid .week-actions .move-week-up {
            margin-bottom: 0.8rem;
        }

        #main-grid #client-training-calendar-grid .week-actions .move-week-down {
            bottom: 1.7rem;
            left: calc(50% - 0.4rem);
            position: absolute;
        }

        #main-grid #client-training-calendar-grid .week-overview.add-week,
        #main-grid #client-training-calendar-grid .week-overview.add-day,
        #main-grid #training-plan-grid .week-overview.add-week,
        #main-grid #training-plan-grid .week-overview.add-day {
            align-items: center;
            color: #2a2a2a;
            cursor: pointer;
            display: flex;
            font-size: 1.1rem;
            font-weight: 600;
            justify-content: center;
            letter-spacing: normal;
            line-height: normal;
            padding: 1.4rem 1.1rem;
            text-align: center;
        }

            #main-grid #client-training-calendar-grid .week-overview.add-week i,
            #main-grid #client-training-calendar-grid .week-overview.add-day i,
            #main-grid #training-plan-grid .week-overview.add-week i,
            #main-grid #training-plan-grid .week-overview.add-day i {
                font-size: 1.7rem;
                font-weight: 300;
                letter-spacing: normal;
                line-height: normal;
                margin-right: 0.5rem;
            }

        #main-grid #client-training-calendar-grid .week-overview .day-container,
        #main-grid #training-plan-grid .week-overview .day-container {
            background-color: #fff;
            border-radius: 0.3rem;
            margin-bottom: 1rem;
        }

        #main-grid #client-training-calendar-grid .week-overview .day,
        #main-grid #client-training-calendar-grid .week-overview .day-info,
        #main-grid #training-plan-grid .week-overview .day,
        #main-grid #training-plan-grid .week-overview .day-info {
            display: flex;
            flex-direction: row;
        }

            #main-grid #client-training-calendar-grid .week-overview .day.empty,
            #main-grid #training-plan-grid .week-overview .day.empty {
                margin-bottom: 0.5rem;
            }

        #main-grid #client-training-calendar-grid .week-overview .add-day-row,
        #main-grid #training-plan-grid .week-overview .add-day-row {
            display: flex;
            flex-direction: row;
            /*margin-bottom: 0.5rem;*/
            padding-bottom: 0.5rem;
        }

            #main-grid #client-training-calendar-grid .week-overview .add-day-row .day-training-program-name,
            #main-grid #training-plan-grid .week-overview .add-day-row .day-training-program-name {
                cursor: pointer;
            }

            #main-grid #client-training-calendar-grid .week-overview .add-day-row .move-day,
            #main-grid #training-plan-grid .week-overview .add-day-row .move-day {
                align-self: center;
                background-color: var(--nd-light-green);
                border-radius: 0.3rem 0 0 0.3rem;
                border-top-left-radius: 0;
                border-top-right-radius: 0;
                padding: 0 1.2rem 0.5rem 1.2rem;
            }

                #main-grid #client-training-calendar-grid .week-overview .add-day-row .move-day .fa-bars,
                #main-grid #training-plan-grid .week-overview .add-day-row .move-day .fa-bars {
                    visibility: hidden;
                }

        #main-grid #client-training-calendar-grid .week-overview .day.add-day,
        #main-grid #training-plan-grid .week-overview .day.add-day {
            align-items: center;
            color: #2a2a2a;
            cursor: pointer;
            display: flex;
            font-size: 1.1rem;
            font-weight: 600;
            justify-content: center;
            letter-spacing: normal;
            line-height: normal;
            padding: 1.4rem 1.1rem 0 1.1rem;
            text-align: center;
        }

            #main-grid #client-training-calendar-grid .week-overview .day.add-day i,
            #main-grid #training-plan-grid .week-overview .day.add-day i {
                font-size: 1.7rem;
                font-weight: 300;
                letter-spacing: normal;
                line-height: normal;
                margin-right: 0.5rem;
            }

        #main-grid #client-training-calendar-grid .week-overview .day .move-day,
        #main-grid #training-plan-grid .week-overview .day .move-day {
            align-self: center;
            background-color: var(--nd-light-green);
            border-radius: 0.3rem 0 0 0.3rem;
            color: #fff;
            padding: 1.9rem 1.2rem;
        }

        #main-grid #client-training-calendar-grid .week-overview .day:not(.empty) .move-day,
        #main-grid #training-plan-grid .week-overview .day:not(.empty) .move-day {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        #main-grid #client-training-calendar-grid .week-overview .day.multi.first .move-day,
        #main-grid #training-plan-grid .week-overview .day, multi.first .move-day {
            padding-bottom: 1rem;
            font-size: 0.9rem;
        }

            #main-grid #client-training-calendar-grid .week-overview .day.multi.next .move-day,
            #main-grid #training-plan-grid .week-overview .day.multi.next .move-day {
                border-top-left-radius: 0;
                padding-bottom: 1rem;
                padding-top: 1rem;
            }

            #main-grid #client-training-calendar-grid .week-overview .day.multi.next .day-info,
            #main-grid #training-plan-grid .week-overview .day.multi.next .day-info {
                border-top-right-radius: 0;
            }

        #main-grid #client-training-calendar-grid .week-overview .empty .move-day,
        #main-grid #training-plan-grid .week-overview .empty .move-day {
            padding: 1rem 0.5rem;
        }

        #main-grid #client-training-calendar-grid .week-overview .move-day,
        #main-grid #training-plan-grid .week-overview .move-day {
            cursor: grab;
        }

        #main-grid #client-training-calendar-grid .week-overview .day-info,
        #main-grid #training-plan-grid .week-overview .day-info {
            align-items: center;
            /*        background-color: #fff;
*/ border-radius: 0 0.3rem 0.3rem 0;
            flex: 1;
            padding: 0.25rem 1.2rem;
        }

        #main-grid #client-training-calendar-grid .week-overview .day:not(.empty) .day-info,
        #main-grid #training-plan-grid .week-overview .day:not(.empty) .day-info {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        #main-grid #client-training-calendar-grid .week-overview .add-day-row .day-info,
        #main-grid #training-plan-grid .week-overview .add-day-row .day-info {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

        #main-grid #client-training-calendar-grid .week-overview .day.empty .day-info,
        #main-grid #training-plan-grid .week-overview .day.empty .day-info {
            padding: 0.5rem 1.2rem;
        }

        #main-grid #client-training-calendar-grid .week-overview .day-name,
        #main-grid #client-training-calendar-grid .week-overview .day-training-program-name,
        #main-grid #training-plan-grid .week-overview .day-name,
        #main-grid #training-plan-grid .week-overview .day-training-plan-name {
            color: #2a2a2a;
            font-size: 1.1rem;
            font-weight: 600;
            letter-spacing: normal;
            line-height: normal;
        }

            #main-grid #client-training-calendar-grid .week-overview .day-training-program-name div,
            #main-grid #training-plan-grid .week-overview .day-training-plan-name div {
                color: #666;
                font-size: 0.7rem;
                line-height: 1.69;
            }

        #main-grid #client-training-calendar-grid .week-overview .day-name,
        #main-grid #training-plan-grid .week-overview .day-name {
            /*
        flex: 20%;
        max-width: 20%;
        min-width: 7rem;
        */
            background-color: var(--nd-light-green);
            border-radius: 0.3rem 0.3rem 0 0;
            color: #fff;
            flex: 1 1 100%;
            padding: 0.5rem 3.2rem;
            text-transform: capitalize;
            width: 100%;
        }

        #main-grid #client-training-calendar-grid .week-overview .day.empty .day-name,
        #main-grid #training-plan-grid .week-overview .day.empty .day-name {
            color: #9a9a9a;
        }

        #main-grid #client-training-calendar-grid .week-overview .day-completed,
        #main-grid #training-plan-grid .week-overview .day-completed {
            color: #2a2a2a;
            font-size: 1.7rem;
            font-weight: 300;
            letter-spacing: normal;
            line-height: normal;
            padding-right: 0.6rem;
        }

        #main-grid #client-training-calendar-grid .week-overview .day-training-program-name,
        #main-grid #training-plan-grid .week-overview .day-training-plan-name {
            flex: 1;
        }

        #main-grid #client-training-calendar-grid .week-overview .day.empty .day-training-program-name,
        #main-grid #client-training-calendar-grid .week-overview .add-day-row .day-training-program-name,
        #main-grid #training-plan-grid .week-overview .day.empty .day-training-plan-name,
        #main-grid #training-plan-grid .week-overview .add-day-row .day-training-plan-name {
            color: #9a9a9a;
        }

            #main-grid #client-training-calendar-grid .week-overview .day.empty .day-training-program-name,
            #main-grid #client-training-calendar-grid .week-overview .day.empty .day-training-program-name i,
            #main-grid #training-plan-grid .week-overview .day.empty .day-training-plan-name i {
                cursor: pointer;
            }

        #main-grid #client-training-calendar-grid .week-overview .day-actions,
        #main-grid #training-plan-grid .week-overview .day-actions {
            color: #2d2d2d;
            font-size: 1.1rem;
            font-weight: 300;
            letter-spacing: normal;
            line-height: normal;
        }

            #main-grid #client-training-calendar-grid .week-overview .day-actions i,
            #main-grid #training-plan-grid .week-overview .day-actions i {
                cursor: pointer;
                margin-left: 1.4rem;
            }

                #main-grid #client-training-calendar-grid .week-overview .day-actions i.fa-comment,
                #main-grid #client-training-calendar-grid .week-overview .day-actions i.fa-clone,
                #main-grid #training-plan-grid .week-overview .day-actions i.fa-comment,
                #main-grid #training-plan-grid .week-overview .day-actions i.fa-clone {
                    cursor: no-drop;
                }

        #main-grid .row .form-control,
        #main-grid #Message.form-control {
            margin-bottom: 0.9rem;
        }

        #main-grid .row label {
            color: #000;
            font-size: 1rem;
            font-stretch: normal;
            font-style: normal;
            font-weight: 900;
            letter-spacing: normal;
            line-height: 1.33;
        }

            #main-grid .row label.form-check-label {
                font-weight: normal;
            }

    #notesForCalendarDayModal {
        background-color: rgba(0, 0, 0, 0.8);
    }

        #notesForCalendarDayModal .modal-body,
        #trainingDataModal .modal-body,
        #restTrainingDataModal .modal-body,
        #exerciseInfoModal .modal-body {
            padding: 0;
        }

    #trainingDataModal label,
    #restTrainingDataModal label {
        font-size: 0.6rem;
        font-weight: bold;
        line-height: 2;
        text-transform: uppercase;
    }

    #trainingDataModal #trainingDataRowTable,
    #restTrainingDataModal #trainingDataRowTable {
        padding-bottom: 1rem;
    }

    #notesForCalendarDayModal .modal-container,
    #trainingDataModal .modal-container,
    #restTrainingDataModal .modal-container,
    #exerciseInfoModal .modal-container {
        display: flex;
    }

    #showChangedTrainingDataModal .modal-container {
        flex-direction: row;
    }

    #showChangedTrainingDataModal .modal-actions,
    #notesForCalendarDayModal .modal-actions,
    #trainingDataModal .modal-actions,
    #restTrainingDataModal .modal-actions,
    #exerciseInfoModal .modal-actions {
        background-color: var(--nd-light-green);
        border-radius: 0.3rem 0 0 0.3rem;
        color: #fff;
        font-size: 1.1rem;
        font-weight: 300;
        line-height: normal;
        padding: 1.7rem 1.2rem;
        text-align: center;
    }

    #notesForCalendarDayModal .modal-actions {
        display: block;
    }

    #showChangedTrainingDataModal .modal-actions {
        background-color: #d25f5f;
    }

        #showChangedTrainingDataModal .modal-actions .close-modal,
        #notesForCalendarDayModal .modal-actions .close-modal {
            cursor: pointer;
        }

    #showChangedTrainingDataModal .modal-overview,
    #notesForCalendarDayModal .modal-overview,
    #trainingDataModal .modal-overview,
    #restTrainingDataModal .modal-overview,
    #exerciseInfoModal .modal-overview {
        flex: 1;
        padding: 0.5rem 1.1rem;
    }

    #showChangedTrainingDataModal h3 {
        color: #000;
        font-size: 1.2rem;
        font-weight: 900;
        letter-spacing: 0.5px;
        line-height: 1.27;
        margin: 1rem 0 1.5rem 0;
    }

    #showChangedTrainingDataModal .group-row {
        background-color: #f2f2f2;
        align-items: center;
        color: #111;
        font-size: 1rem;
        font-weight: 600;
        justify-content: center;
        letter-spacing: normal;
        line-height: normal;
        margin-bottom: 0.6rem;
        margin-top: 0.6rem;
        padding: 1rem 3rem;
        text-align: left;
    }
    #showChangedTrainingDataModal .group-row .toggler {
        cursor: pointer;
    }
    #showChangedTrainingDataModal h5 {
        color: #111;
        font-size: 1rem;
        font-weight: 600;
        letter-spacing: normal;
        line-height: normal;
    }
    #showChangedTrainingDataModal .item-row {
        color: #272727;
        font-size: 0.9rem;
        font-weight: normal;
        letter-spacing: normal;
        line-height: 1.38;
        margin-top: 0.5rem;
    }
    #showChangedTrainingDataModal .item-row i {
        color: #272727;
        cursor: pointer;
        font-size: 1.1rem;
        font-weight: 300;
        line-height: 1.1;
        margin-right: 0.5em;
        vertical-align: middle;
    }
    #showChangedTrainingDataModal .item-row i { 
        font-size: 0.9rem;
        line-height: 1.38;
    }
    #showChangedTrainingDataModal .item-name.comment {
        font-weight: bold;
    }
    #showChangedTrainingDataModal .training-data-history {
        display: none;
    }
    #notesForCalendarDayModal .modal-overview {
        margin: 1rem 0;
        text-align: right;
    }
    #addDayModal .week-actions {
        background-color: var(--nd-light-green);
        border-radius: 0.3rem 0 0 0.3rem;
        color: #fff;
        font-size: 1.1rem;
        font-weight: 300;
        line-height: normal;
        padding: 1.7rem 1.2rem;
        text-align: center;
    }
    #addDayModal .week-container {
        flex-direction: row;
    }
    #addDayModal .week-overview,
    #addDayModal .training-program-preview {
        flex: 1;
        padding: 0.5rem 1.1rem;
    }
    #addDayModal .day-row, #addDayModal .group-row {
        padding: 1rem 3rem;
    }
    #addDayModal #page-2 #add-to-day-button {
        width: 50%;
    }
}
@media(min-width: 1024px) {
    h3 {
        font-size: 1.75rem;
    }
    #top-menu-desktop > div {
        padding-right: 10%;
    }
    #main-menu-desktop {
        background-color: var(--nd-dark-green);
        color: #fff;
        display: flex;
        padding: 1rem 3%;
    }
    #main-menu-desktop .nav-item span {
        font-size: 0.6rem;
    }
    #main-menu-desktop .nav-link-home img {
        height: 2rem;
        width: auto;
    }
    #main-menu-desktop .nav-link-home span {
        font-size: 1.4rem;
        margin-left: 1rem;
    }
    #top-menu-desktop a,
    #top-menu-desktop span,
    #top-menu-desktop form,
    #top-menu-desktop .parent-menu {
        padding-left: 1.1rem;
    }
    #main-menu-desktop .main-menu-items .nav-link {
        padding: 0.5rem;
    }
    #main-menu-desktop .nav-item i {
        font-size: 1.7rem;
    }
    .form-control.half-width-and-inline {
        display: inline-block;
        width: 50%;
    }
    .form-control.with-floating-unit {
        display: inline-block;
        width: 100%;
    }
    form span.floating-unit {
        display: block;
        left: 5rem;
        position: absolute;
        top: 0.8rem;
    }
    #main-grid .profile-pic .client-circle {
        height: 5rem;
        width: 5rem;
    }
    #main-grid {
        padding: 2.2rem 6% 2.2rem 2.2rem;
    }
    #main-grid h1 {
        font-size: 1.7rem;
    }   
    #main-grid #client-training-calendar-grid .week-actions,
    #main-grid #training-plan-grid .week-actions,
    #main-grid #survey-content .survey-question-actions,
    #main-grid #surveyContent .survey-question-actions {
        font-size: 1.1rem;
        padding: 1.7rem 1.2rem;
    }
    #main-grid #client-training-calendar-grid .week-overview .empty .move-day,
    #main-grid #training-plan-grid .week-overview .empty .move-day {
        font-size: 1rem;
        padding: 1rem 1.2rem;
    }
}
@media(min-width: 1025px) {
    #main-menu-desktop .nav-link-home {
        flex: 1 1 auto;
        /*margin-left: 25%;*/
        margin-top: 0;
        padding: 0;
        text-align: left;
    }
    #main-menu-desktop .nav-link-home img {
        height: 3rem;
        width: auto;
    }
    #main-menu-desktop .main-menu-items .nav-link {
        padding: 0.5rem 1rem;
    }
    #main-grid .clients-grid .client-circle {
        background-color: #f2f2f2;
        border-radius: 100%;
        color: #9a9a9a;
        font-size: 3rem;
        font-weight: 600;
        height: 7rem;
        line-height: normal;
        text-align: center;
        width: 7rem;
    }
    #main-grid .clients-grid .client-circle span {
        display: block;
        height: 100%;
        padding-top: 3rem;
    }

    #main-grid .recipe-main-grid .header:not(.table-row),
    #editRecipeFoodModal .header {
        color: #272727;
        display: flex;
        font-size: 0.6rem;
        font-weight: bold;
        padding: 1rem 1rem 0 1rem;
        text-transform: uppercase;
        width: 100%;
    }
    body.recipe-controller.admincreate-action #editRecipeForm,
    body.recipe-controller.adminedit-action #editRecipeForm,
    body.trainingexercise-controller.edit-action #EditForm {
        display: flex;
        flex-wrap: wrap;
    }
    body.recipe-controller.admincreate-action #editRecipeFoodModal .header .col-2,
    body.recipe-controller.adminedit-action #editRecipeFoodModal .header .col-2 {
        padding-left: 1.2rem;
    }
    body.recipe-controller.admincreate-action #editRecipeFoodModal .header .col-2:last-child,
    body.recipe-controller.adminedit-action #editRecipeFoodModal .header .col-2:last-child {
        padding-left: 1.4rem;
    }
    body.recipe-controller.adminedit-action #main-grid .square-action-button i {
        float: none;
    }
    #main-grid .recipe-main-grid .recipe-ingredient-row {
        border-bottom: 1px solid #e8e8e8;
        display: flex;
        padding: 1rem;
        width: 100%;
    }
    #main-grid .recipe-main-grid .recipe-ingredient-row i {
        margin-left: 0.5rem;
    }
    #main-grid .recipe-main-grid .recipe-nutritional-info-row.header {
        padding: 1rem 0 0 0;
    }
    #main-grid .recipe-main-grid .recipe-nutritional-info-row.header .col-6:last-child {
        padding-left: 30px;
    }
    #main-grid .recipe-main-grid .recipe-nutritional-info-row {
        text-align: left;
    }
    #main-grid .recipe-main-grid .legend-nutrition-pie li {
        font-size: 0.8rem;
        height: 1.7rem;
    }
    #main-grid .recipe-main-grid .legend-nutrition-pie span {
        border-radius: 1rem;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.16);
        font-size: 1rem;
        height: 1.1rem;
        position: relative;
        top: 0.3rem;
        width: 1.1rem;
    }
    #main-grid .recipe-main-grid .recipe-category-row h6 {
        color: #272727;
        font-size: 0.6rem;
        font-weight: bold;
        padding: 1rem 1rem 0 1rem;
        text-transform: uppercase;
    }
    #main-grid .recipe-main-grid .recipe-category-row label.form-check-label {
        font-size: 0.9rem;
        font-weight: normal !important;
        margin-top:0 !important;
    }
    #editRecipeForm .desktop-left-menu .recipe-image-container img {
        height: auto;
        width: 100%;
    }
    #editRecipeForm .desktop-left-menu #delete-recipe-image-button {
        background-color: #d25f5f;
        height: 2rem;
        left: 15px;
        margin-left: 0;
        position: absolute;
        top: 1rem;
        width: 2rem;
    }
    #editRecipeForm .desktop-left-menu #delete-recipe-image-button i {
        color: #fff;
        float: none;
    }
    #RecipeCollectionForm label:not(.form-check-label) {
        color: #272727;
        font-size: 0.6rem;
        font-weight: bold;
        padding: 1rem 1rem 0 0;
        text-transform: uppercase;
    }
    #RecipeCollectionForm select {
        padding: 0.5rem;
    }
}
/*#endregion */

/*#region Bottom menu */
#bottom-menu {
    background-color: #fff;
}
@media only screen and (min-width: 768px) {
    #bottom-menu {
        /*display: none;*/
    }
}
#bottom-menu .nav-item {
    color: #2d2d2d;
    font-family: CircularStd, Helvetica, Arial, sans-serif;
    font-size: 60%;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: normal;
    padding: 0.84rem 2% 0 2%;
    text-align: center;
}
#bottom-menu .nav-item.active {
    background-color: var(--nd-dark-green);
    color: #fff;
}
#bottom-menu svg {
    height: 1.6rem;
    width: 1.6rem;
}
#bottom-menu a {
    text-transform: uppercase;
}
#bottom-menu a i,
#bottom-menu a img {
    font-size: 1.67rem;
    height: auto;
    width: 1.67rem;
}
#bottom-menu a br {
    line-height: 0;
}
#bottom-menu .nav {
    flex-wrap: nowrap;
}
#bottom-menu .svg-inline--fa {
    color: #2d2d2d;
}
#bottom-menu .nav-item.active .svg-inline--fa {
    color: #fff;
}
#bottom-menu a.nav-link-training img {
    height: 1.73rem;
    margin-bottom: 0.5rem;
    width: auto;
}
#bottom-menu a.nav-link-training.active img {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}
@media(min-width: 768px) {
    body:not(.mobile-client-body) #bottom-menu {
        display: none;
    }
}
/*#endregion */

/*#region Bottom menu - Diary pop-up */
#diary-popup {
    background-color: var(--nd-dark-green);
    /*border: 1px solid #fff;*/
    border-radius: 7rem;
    bottom: 5.7rem;
    box-shadow: 0 1rem 2rem 0px rgba(0, 0, 0, 0.5);
    color: #fff;
    font-family: HKGrotesk;
    font-size: 14px;
    font-stretch: normal;
    font-style: normal;
    font-weight: 900;
    min-height: 7rem;
    letter-spacing: normal;
    line-height: 1.71;
    padding: 1rem;
    text-align: center;
}
@media only screen and (min-width: 768px) {
    #diary-popup {
        display: none;
    }
}
#diary-popup .nav-item {
    padding: 1rem 0;
    width: calc(100% / 3);
}
#diary-popup .nav-item i.fa-soup,
#diary-popup .nav-item i.fa-heartbeat,
#diary-popup .nav-item i.fa-running {
    font-size: 2.2rem;
}
#diary-popup .nav-item i.fa-plus-circle {
    font-size: 1.1rem;
}
#diary-popup svg.fa-soup,
#diary-popup svg.fa-heartbeat,
#diary-popup svg.fa-running {
    color: #fff;
    height: 50px;
    width: 40px;
}
#diary-popup svg.fa-plus-circle {
    color: #fff;
    height: 20px;
    width: 20px;
}
#diary-popup .nav-item p,
#diary-popup .nav-item a {
    color: #fff;
    display: block;
    margin: 0;
}
#diary-popup .nav-item a {
    color: #fff;
    display: block;
    margin: 0;
    text-decoration: none;
}
#diary-popup .nav-item a i {
    display: inline-block;
}
#diary-popup .nav-item a:hover {
    text-decoration: none;
}
#diary-popup .middle-part {
    border-left: 1px dotted #fff;
    border-right: 1px dotted #fff;
}
#diary-popup .middle-part:before {
    border-left: 0.5rem solid transparent;
    border-right: 0.5rem solid transparent;
    border-top: 0.5rem solid var(--nd-dark-green);
    bottom: -0.5rem;
    content: "";
    height: 0;
    position: absolute;
    right: calc(50% - 0.5rem);
    width: 0;
}
#diary-popup .right-part {
}

/*#endregion */

/*#region Main parts - Logged in */
body.logged-in {
    background-color: #fff;
}
/*#endregion */

/*#region Main parts - Daily circle diagram */
.daily-circle-diagram {
    background-color: var(--nd-dark-green);
    color: #fff;
    height: 17rem;
    padding-top: .7rem !important;
}
@media only screen and (min-width: 500px) {
    .daily-circle-diagram {
        height: 18rem;
    }
}
.daily-circle-diagram .circles {
    position: relative;
    width: 100%;
}
.daily-circle-diagram .circle {
    position: absolute;
    z-index: 2;
}
.daily-circle-diagram .circle.recommended {
    top: 20px;
}
.daily-circle-diagram .circle.energy-in {
    top: 10px;
}
.daily-circle-diagram .info {
    height: 100%;
    padding-top: 29%;
}
.daily-circle-diagram .number {
    font-size: 2.778rem;
    font-weight: 900;
    font-stretch: normal;
    font-style: normal;
    line-height: 0.8;
    letter-spacing: normal;
}
.daily-circle-diagram .info {
    font-size: 0.95rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.41;
    letter-spacing: normal;
}
.daily-circle-diagram .label {
    font-size: 0.6rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    left: calc(50% + 0.2rem);
    letter-spacing: normal;
    line-height: 1.41;
    position: absolute;
}
.daily-circle-diagram .text-recommended {
    bottom: 1.6rem;
}
.daily-circle-diagram .text-energy-in {
    bottom: 1rem;
}
.daily-circle-diagram .text-energy-out {
    bottom: 0.4rem;
}
/*#endregion */

/*#region Main parts - The row with info for Protein, Fat and Carbohydrates */
.info-protein-fat-carbo {
    background-color: var(--nd-dark-green);
    color: #fff;
    padding: 0 1.8rem;
}
.info-protein-fat-carbo .bar {
    background-color: #fff;
    height: 10px;
    margin-right: 2px;
    opacity: 0.5;
    width: 4px;
}
.info-protein-fat-carbo .bar.filled {
    opacity: 1;
}
.info-protein-fat-carbo .bar.extra {
    background-color: #d25f5f;
    opacity: 1;
}
.info-protein-fat-carbo h5 {
    font-family: HKGrotesk, Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-stretch: normal;
    font-style: normal;
    font-weight: bold;
    letter-spacing: normal;
    line-height: 1.43;
    margin-bottom: 0;
    text-transform: uppercase;
}
.info-protein-fat-carbo p {
    font-family: HKGrotesk, Helvetica, Arial, sans-serif;
    font-size: 0.7rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.43;
}
/*#endregion */

/*#region Main parts - Calendar week days */
#week-days {
    background-color: #528653;
    margin-bottom: 0 !important;
    /*height: 15rem;
    margin-bottom: -10.5rem;*/
}
#week-days .nav {
    position: relative;
}
#week-days .nav-item {
    color: #fff;
    font-size: 77%;
    font-weight: normal;
    cursor: pointer;
    line-height: 1.14;
    padding-bottom: 0.725rem;
    padding-top: 0.725rem;
    text-align: center;
}
#week-days .nav-item a {
    color: #fff;
    display: inline-block;
    font-size: 77%;
    font-weight: normal;
    width: 1.5rem;
    text-transform: capitalize;
}
#week-days .nav-item.active {
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 0 14px -8px rgba(0, 0, 0, 0.5);
    color: #79a25f;
    font-weight: bold;
    margin-top: -0.2rem;
    padding-top: 0.7rem;
    position: relative;
}
#week-days .nav-item.calendar.active {
    background-color: #f2f2f2;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    color: #79a25f;
    font-weight: bold;
    margin-top: -0.2rem;
    padding-top: 0.7rem;
    position: relative;
}
#week-days .calendar.active::after {
    background-color: #f2f2f2;
    content: ' ';
    display: block;
    padding-bottom: 0.4rem;
}
#week-days .nav-item.active a {
    color: #79a25f;
    font-weight: bold;
    text-decoration: none;
}
#week-days .nav-item a:hover {
    text-decoration: none;
}
#week-days .nav-item.active:not(.calendar):before {
    border-left: 0.5rem solid transparent;
    border-right: 0.5rem solid transparent;
    border-top: 0.5rem solid #fff;
    bottom: -0.4rem;
    content: "";
    height: 0;
    left: 0.75rem;
    position: absolute;
    width: 0;
}
#week-days .nav-item svg {
    color: #fff;
    height: 27px;
    width: 30px;
}
#week-days .nav-item.calendar i {
    color: #fff;
    font-size: 1.7rem;
}
#week-days .nav-item.calendar.active i {
    color: #000;
}
#week-days .datepicker {
    background-color: #f2f2f2;
    border: 0;
    border-radius: 0;
    left: 0;
    margin-top: 0.8rem;
    padding: 1.5rem;
    position: absolute;
    top: 3rem;
    width: 100%;
    z-index: 1000;
}
#main-as-client-grid #week-days .datepicker {
    left: initial;
    max-width: 20rem;
    right: 0;
}
#week-days .datepicker::before {
    content: none;
}
#week-days .datepicker::after {
    content: none;
}
#week-days .datepicker-days > table {
    width: 100%;
}
#week-days .datepicker-days thead th.prev,
#week-days .datepicker-days thead th.next,
#week-days .datepicker-days thead th.datepicker-switch {
    font-size: 1.1rem;
    font-weight: normal;
    text-transform: capitalize;
}
#week-days .datepicker-days thead th.dow {
    font-weight: 600;
    text-transform: uppercase;
}
#week-days .datepicker td,
#week-days .datepicker th {
    border-radius: 3px;
    font-size: 0.7rem;
    height: 2rem;
    width: 2rem;
}
#week-days .datepicker td.active,
#week-days .datepicker td.active:hover {
    background: #000;
    color: #fff;
}
#week-days .datepicker td.info {
    background-color: var(--nd-purple-light);
    color: #fff;
}
/*#endregion */

/*#region Main parts - Buttons */
.big-button {
    background-color: #ffffff;
    border-radius: 7px;
    box-shadow: 0 10px 20px -20px rgba(0, 0, 0, 0.5);
    padding: 1rem;
    width: 100%;
    z-index: 3;
}
.big-button.food > a,
.big-button.exercise > a {
    display: block;
    height: 100%;
    width: 100%;
}
.big-button h5 {
    color: #000;
    font-family: HKGrotesk, Helvetica, Arial, sans-serif;
    font-size: 100%;
    font-stretch: normal;
    font-style: normal;
    font-weight: 900;
    letter-spacing: normal;
    line-height: 1.33;
    margin-bottom: 0;
    text-transform: uppercase;
}
.big-button p {
    color: rgba(39, 39, 39, 0.39);
    font-family: HKGrotesk;
    font-size: 0.9rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.38;
    margin-bottom: 0;
}
.big-button .left-column {
    margin-top: 0.6rem;
}
.big-button .circle {
    cursor: pointer;
    text-align: center;
}
.big-button.food .circle {
    border: solid 6px rgba(173, 61, 152, 0.2);
    border-radius: 2.22rem;
    height: 4.44rem;
    width: 4.44rem;
}
.big-button.exercise .circle {
    border: solid 6px rgba(121, 162, 95, 0.2);
    border-radius: 2.22rem;
    height: 4.44rem;
    width: 4.44rem;
}
.big-button.training-calendar .circle,
.big-button.training-program .circle,
.big-button.surveys .circle {
    border: solid 6px rgba(111, 171, 112, 0.2);
    border-radius: 2.22rem;
    height: 4.44rem;
    width: 4.44rem;
}
.big-button.surveys .left-column .fal {
    color: #000;
    font-size: 2rem;
}
.big-button .circle svg {
    color: #2d2d2d;
    font-size: 32px;
    height: 40px;
    left: 21px;
    position: relative;
    top: 14px;
    width: 25px;
}
.big-button .circle i {
    color: #2d2d2d;
    font-size: 1.8rem;
    height: 100%;
    /*transform: translateY(25%);*/
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: normal;
}
.big-button.food .left-column .svg-inline--fa {
    color: var(--nd-purple-dark);
    height: auto;
    width: 2rem;
}
.big-button.food .left-column i {
    color: var(--nd-purple-dark);
    font-size: 2rem;
    padding-left: .35rem;
    padding-bottom: .2rem;
}
.big-button.exercise .left-column .svg-inline--fa {
    color: var(--nd-light-green);
    height: auto;
    width: 2rem;
}
.big-button.exercise .left-column i {
    color: var(--nd-light-green);
    font-size: 2rem;
    padding-left: .35rem;
    padding-bottom: .2rem;
}
.big-button-extended {
    border-radius: 0 0 7px 7px;
    background-color: #f4f4f4;
    color: #272727;
    margin-top: -0.5rem;
    padding: 1rem;
}
.big-button-extended .row.header {
    font-size: 0.6rem;
    font-weight: bold;
    line-height: 1.2;
    margin-top: 1rem;
    text-transform: uppercase;
}
.big-button-extended .row.meal,
.big-button-extended .row.exercise {
    font-size: 0.9rem;
    line-height: 1.38;
    padding: 0.25rem 0;
}
.big-button-extended .row.total {
    font-size: 0.9rem;
    font-weight: bold;
    line-height: 1.38;
    padding: 0.25rem 0;
}
.small-admin-button {
    background-color: inherit;
    border: 1px solid #000;
    border-radius: 0.3rem;
    color: #151c27;
    float: right;
    font-size: 0.65rem;
    font-weight: 500;
    line-height: normal;
    margin-top: -0.4rem;
    padding: 0.5rem 1rem;
    text-transform: uppercase;
}
/*#endregion */

/*#region Main parts - Company info box */
.row.company-info-box {
    background-color: #fff;
    background-image: linear-gradient(to bottom, #ffffff 54%, #f4f4f4);
    font-size: 0.9rem;
    justify-content: center;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: -4rem;
    object-fit: contain;
    padding: 6rem 3.5rem 10rem 3.5rem;
}
.row.company-info-box img {
    max-width: 100%;
}
/*#endregion */

/*#region Simple page with back button */
body.simple-template {
    background-color: #639a63;
}
body.simple-template nav#top-menu {
    background-color: #639a63;
}
body.simple-template nav#top-menu .nav-link-empty svg {
    color: #639a63;
}
body.simple-template h1 {
    color: #fff;
    font-size: 32px;
    font-stretch: normal;
    font-style: normal;
    font-weight: 300;
    letter-spacing: 1.5px;
    line-height: 1.25;
    margin: 3rem auto 4rem auto;
    width: 55%;
}
body.simple-template form {
    background-color: #fff;
    padding-top: 4rem;
}
body.simple-template .card {
    border: 0;
    margin-top: -7rem;
}
body.simple-template .card .input-group-text {
    background-color: #f2f2f2;
    border: 0;
}
body.simple-template .card .form-control {
    background-color: #f2f2f2 !important;
    border: 1px solid #f2f2f2;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    height: 3rem;
    padding-left: 0;
}
body.simple-template .form-control:-webkit-autofill,
body.simple-template .form-control:-webkit-autofill:hover,
body.simple-template .form-control:-webkit-autofill:focus {
    background-color: #f2f2f2 !important;
}
body.simple-template .card textarea.form-control {
    height: 9rem;
}
body.simple-template .input-group-prepend.textarea span {
    width: 3rem;
}
body.simple-template .input-group-prepend.textarea svg {
    position: absolute;
    top: 1rem;
}
/*#endregion */

/*#region Standard page with back button */
body.standard-template {
    background-color: #639a63;
}
body.standard-template nav#top-menu {
    background-color: #639a63;
}
body.standard-template nav#top-menu .nav-link-empty svg {
    color: #639a63;
}
body.standard-template h1 {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    line-height: 1.27;
    margin: 1rem auto;
    text-transform: uppercase;
    width: 100%;
}
body.standard-template form {
    background-color: #fff;
    padding-top: 4rem;
}
body.standard-template .card {
    border: 0;
    margin-top: -9rem;
}
body.standard-template .card .card-title {
    font-weight: 900;
    line-height: 1.27;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
body.standard-template .card .row.header {
    color: #272727;
    font-size: 60%;
    font-weight: bold;
    line-height: 1.2;
    margin-top: 1rem;
    text-transform: uppercase;
}
body.standard-template .form-group.row {
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 0;
    padding: 1rem 0;
}
body.standard-template .card label {
    color: #2d2d2d;
    font-size: 100%;
    font-weight: bold;
    letter-spacing: normal;
    line-height: 1.33;
}
body.standard-template .card .input-group-text {
    background-color: #f2f2f2;
    border: 0;
}
body.standard-template .card .form-control {
    background-color: #fff !important;
    border: 1px solid #cfcfcf;
    border-radius: 4px;
    color: #272727;
    font-size: 1.1rem;
    height: 2rem;
    line-height: 1.6;
    text-align: center;
}
body.standard-template .cta.primary::after,
body.standard-template .cta.secondary::after {
    display: inline-block;
    font-family: "Font Awesome 5 Pro";
    text-rendering: auto;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    position: absolute;
    right: 1.5rem;
}
.cta.icon-check::after {
    content: "\f00c";
}
.cta.icon-times::after {
    content: "\f00d";
}

/*#endregion */

/*#region Messages */
body.messages-admin {
    background-color: var(--nd-dark-green);
}
body.messages-admin h1 {
    background-color: var(--nd-dark-green);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 900;
    margin: 0;
    padding: 1rem;
    text-transform: uppercase;
}
body.messages-admin .admin-view-message-client {
    background-color: #fff;
    border: 0;
    border-radius: 0.4rem;
    box-shadow: 0 1px 20px -9px rgba(0, 0, 0, 0.5);
    display: flex;
    margin: 0 1rem 0.6rem 1rem;
    padding: 0;
}
body.messages-admin .admin-view-message-client a {
    display: flex;
    padding: 0.3rem 1.25rem 0.75rem 0;
    width: 100%;
}
body.messages-admin .admin-view-message-client.active {
    background-color: #528653;
    color: #fff;
}
body.messages-admin .admin-view-message-client.new-message .message-list-client-icon {
    padding-top: 0.5rem;
}
body.messages-admin .admin-view-message-client .message-status-dot {
    border: 1px solid #e85c5c;
    border-radius: 0.6rem;
    cursor: pointer;
    height: 1rem;
    margin: 0.5rem 1rem 0.5rem 0.5rem;
    width: 1rem;
}
@media only screen and (min-width: 768px) {
    body.messages-admin .admin-view-message-client .message-status-dot {
        height: 0.6rem;
        width: 0.6rem;
    }
}
body.messages-admin .admin-view-message-client .message-status-dot.new {
    background-color: #e85c5c;
    border-radius: 100%;
}
body.messages-admin .admin-view-message-client .message-list-client {
    align-self: start;
    padding: 0.5rem 2rem 0.5rem 1rem;
}
body.messages-admin .admin-view-message-client .message-list-client {
    color: #272727;
    font-size: 0.9rem;
    font-weight: normal;
    line-height: 1.38;
}
body.messages-admin .admin-view-message-client.active .message-list-client {
    color: #fff;
}
body.messages-admin .admin-view-message-client.new-message .message-list-client {
    font-weight: bold;
}
body.messages-admin .admin-view-message-client .user-image {
    border-radius: 100%;
    height: 4rem;
    width: 4rem;
}
body.messages-admin .admin-view-message-client .no-user-image-placeholder {
    border-radius: 100%;
    height: 4rem;
    width: 4rem;
}
body.message-controller.show-action.mobile-client-body .desktop-left-menu {
    display: none !important;
}
body.message-controller.show-action.mobile-client-body #main-grid {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
}
.new-message-recipient-container {
    padding: 1rem 1rem 0 1rem;
}
#admin-create-message-container {
    background-color: #fff;
    padding: 2rem 1.6rem 3rem 1.6rem;
}
#admin-create-message-container .send-message-button {
    background-color: var(--nd-dark-green);
    border: 0;
    border-radius: 100%;
    bottom: 0.4rem;
    color: #fff;
    font-size: 0.9rem;
    height: 2.2rem;
    position: absolute;
    right: 0.4rem;
    width: 2.2rem;
    z-index: 1000;
}
#admin-create-message-container .add-attachments-container {
    margin-top: 1rem;
}
#admin-create-message-container .send-message-button:focus {
    outline: none;
}
#admin-create-message-container .attach-file,
.client-details-child-container .message-row .attach-file {
    color: #272727;
    display: none;
    font-size: 0.8rem;
    line-height: 1.57;
    margin-top: 0.6rem;
}
#admin-create-message-container .attach-file i,
.client-details-child-container .message-row .attach-file i {
    font-size: 1.1rem;
    line-height: normal;
    margin-right: 0.5rem;
}
#admin-create-message-container .attach-file input,
.client-details-child-container .message-row .attach-file input {
    display: none;
}
.new-message-recipient-container label {
    background-color: #f4f4f4;
    border: 0;
    color: #272727;
    font-size: 0.9rem;
    line-height: 1.38;
}
.new-message-recipient-container select.custom-select {
    background-color: #fff;
    border: 0;
    height: auto;
}
.new-message-recipient-container option {
    color: #272727;
    font-size: 0.9rem;
    font-weight: bold;
    line-height: 1.75;
}
#main-grid.admin-messages {
    background-color: #fff;
}
#main-grid.admin-messages h1 {
    padding-left: 0;
    padding-top: 0;
}
.messages-admin.message-controller.show-action #main-grid.admin-messages h1 {
    position: relative;
}
.container.messages {
    background-color: var(--nd-dark-green);
    padding: 1rem 2rem 22rem 2rem;
}
.container.messages h3 {
    color: #fff;
    font-size: 100%;
    font-weight: 900;
    line-height: 1.33;
    margin-bottom: 1rem;
}
.container.messages .mobile-load-all-messages {
    margin-bottom: 1rem;
    opacity: 0.75;
    text-align: center;
}
.container.messages .message-row,
.client-details-child-container .message-row {
    margin: 0 0 1rem 0;
}
.container.messages .message-bubble,
.client-details-child-container .message-bubble {
    background-color: #fff;
    border-radius: 1.5rem 1.5rem 1.5rem 0;
    margin: 0 2rem 0 0;
    padding: 1rem;
}
.container.messages .message-bubble p,
.client-details-child-container .message-bubble p {
    margin-bottom: 0;
    white-space: pre-wrap;
}
.container.messages .message-bubble p span,
.client-details-child-container .message-bubble p span {
    font-size: 0.6rem;
    text-transform: uppercase;
}
.container.messages .message-bubble a,
.client-details-child-container .message-bubble a {
    word-break: break-all;
}
.container.messages .message-row.from-me .message-bubble,
.client-details-child-container .message-row.from-me .message-bubble {
    background-color: #528653;
    border-radius: 1.5rem 1.5rem 0 1.5rem;
    color: #fff;
    margin: 0 0 0 2rem;
}
.container.messages .message-row.from-me .d-flex {
    flex-direction: row-reverse;
}
.container.messages .profile-image {
    margin-right: 0.5rem;
}
.container.messages .profile-image img {
    border-radius: 1rem;
    max-height: 2rem;
    max-width: 2rem;
}
.container.messages .message-row.from-me .d-flex .profile-image {
    margin-left: 0.5rem;
    margin-right: 0;
}
@media only screen and (min-width: 768px) {
    .container.messages .message-row .d-flex {
        flex-direction: row-reverse;
    }
    .container.messages .message-row.from-me .d-flex {
        flex-direction: row;
    }
    .container.messages .profile-image {
        margin-left: 0.5rem;
        margin-right: 0;
    }
    .container.messages .message-row.from-me .d-flex .profile-image {
        margin-left: 0;
        margin-right: 0.5rem;
    }
}
.container.messages .message-name,
.client-details-child-container .message-name {
    color: #fff;
    font-size: 0.7rem;
    font-weight: normal;
    line-height: 1.83;
    margin: 0 2rem 0 0;
}
.container.messages .message-row.from-me .message-name,
.client-details-child-container .message-row.from-me .message-name {
    margin: 0 0 0 2rem;
    text-align: right;
}
.container.messages .message-row .delete-message-button {
    color: #d25f5f;
    cursor: pointer;
    font-size: 0.9rem;
    margin-bottom: -0.5rem;
    margin-right: -1rem;
    text-align: left;
}
.container.messages .message-row.from-me .delete-message-button {
    padding-right: 1rem;
    text-align: right;
}
.container.messages .message-row.from-me .message-attachment a,
.client-details-child-container .message-row.from-me .message-attachment a {
    color: #fff;
    font-size: 0.8rem;
}
.container.messages .message-row .message-attachment img,
.client-details-child-container .message-row .message-attachment img {
    height: auto;
    max-height: 8rem;
    max-width: 100%;
    width: auto;
}
.message-controller.show-action .white-background {
    background-color: #fff;
    padding: 2rem 2rem 6rem 2rem;
}
.message-controller.show-action form textarea,
.message-controller.show-action form input[type=text],
.client-details-child-container .message-row form textarea,
.client-details-child-container .message-row form input[type=text] {
    border: solid 1px #666;
    border-radius: 3px;
}
.message-controller.show-action form textarea,
.client-details-child-container .message-row form textarea {
    padding-right: 2.5rem;
}
.message-controller.show-action form textarea {
    font-size: 100%;
}
.client-details-child-container .row.message-row textarea {
    background-color: #fff;
}
.message-controller.show-action form button[type=submit] {
    text-transform: none;
}
.client-details-child-container .row.client-overview-send-message-form,
.client-details-child-container .row.client-overview-save-note-form {
    background-color: #ccc;
    border-bottom-left-radius: 0.33rem;
    border-bottom-right-radius: 0.33rem;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    margin-top: 3rem;
    padding-top: 1rem;
}
.message-controller input[name="MessageAttachment"],
.client-details-child-container .message-row input[name="MessageAttachment"],
.client-details-child-container .files-list-row input[name="OwnFile"] {
    display: none;
}
.client-details-child-container .message-row .paper-plane-button {
    bottom: 1.5rem;
    right: 0.5rem;
    top: unset;
}

@media only screen and (min-width: 768px) {
    .messages-admin .new-action-menu-top {
        margin-bottom: 3rem;
    }
    .messages-admin .new-action-menu-top i {
        padding: 1.5rem;
    }
    .messages-admin .new-action-menu-top i::before {
        left: 0.33rem;
        position: relative;
    }
    .container.messages .mobile-load-all-messages {
        display: none;
    }
    .new-message-recipient-container {
        padding: 1rem 1rem 0 0;
    }
    .new-message-recipient-container select.custom-select {
        border: 1px solid #ccc;
    }
    .new-message-recipient-container label.input-group-text {
        background-color: var(--nd-dark-green);
        border: 1px solid var(--nd-dark-green);
        color: #fff !important;
        font-weight: normal !important;
    }
    .admin-action #admin-create-message-container {
        padding: 0 1rem 0 0;
    }
    .show-action #admin-create-message-container {
        background-color: #f4f4f4;
        flex: 1 1 100%;
        margin: 0;
        margin-left: -2.2rem;
        margin-right: -5rem;
        padding: 1.8rem 3rem 5rem 2.2rem;
        position: relative;
    }
    #admin-create-message-container .send-message-button,
    .client-details-child-container .message-row .send-message-button {
        bottom: 1.4rem;
    }
    .container.messages {
        padding-bottom: 7rem;
        padding-left: 0;
    }
    .container.messages .no-messages.white-text { /* Yes, this one is bad... */
        color: #2d2d2d !important;
        padding-left: 1rem;
    }
    .container.messages .message-row,
    .client-details-child-container .message-row {
        align-content: flex-end;
    }
    .container.messages .message-row.from-me,
    .client-details-child-container .message-row.from-me {
        align-content: flex-start;
    }
    .container.messages .message-row .message-bubble,
    .client-details-child-container .message-row .message-bubble {
        background-color: #f4f4f4;
        border-radius: 1.5rem 1.5rem 0 1.5rem;
        color: #272727;
        margin: 0;
        padding: 1rem;
        width: 60%;
    }
    .container.messages .message-row.from-me .message-bubble,
    .client-details-child-container .message-row.from-me .message-bubble {
        background-color: #528653;
        border-radius: 1.5rem 1.5rem 1.5rem 0;
        color: #fff;
        margin: 0;
    }
    .container.messages .message-row .message-bubble .delete-message-button {
        padding-right: 1rem;
        text-align: right;
    }
    .container.messages .message-row .message-name,
    .client-details-child-container .message-row .message-name {
        color: #2d2d2d;
        line-height: 1.4;
        margin: 0;
        text-align: right;
    }
    .container.messages .message-row.from-me .message-name,
    .client-details-child-container .message-row.from-me .message-name {
        margin: 0;
        text-align: left;
    }
}
/*#endregion */

/*#region Month/Year Switch */
.month-year-switch {
    padding: 0;
}
.month-year-switch .month,
.month-year-switch label {
    color: #fff;
    display: inline-block;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.67;
    position: absolute;
    width: 4rem;
}
.month-year-switch .month {
    left: calc(50% - 6.25rem);
}
.month-year-switch label {
    left: calc(50% + 1rem);
}
.month-year-switch label.custom-control-label::before {
    background-color: #528653;
    border: 0;
    border-radius: 1rem;
    height: 2rem;
    left: -3.25rem;
    position: absolute;
    top: -0.25rem;
    width: 4rem;
}
.month-year-switch label.custom-control-label::after {
    background-color: #fff;
    border-radius: 1rem;
    height: 1.6rem;
    left: -3rem;
    position: absolute;
    top: -0.07rem;
    width: 1.6rem;
}
.month-year-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #528653;
}
.month-year-switch .custom-control-input:checked ~ .custom-control-label::after {
    -webkit-transform: translateX(1.875rem);
    transform: translateX(1.875rem);
}
/*#endregion */

/*#region Line diagram, mostly used in Weight & Measurements */
.line-diagram {
    width: 100%;
}
.client-controller.body-action .line-diagram-row {
    position: relative;
}
.line-diagram-row h3 {
    color: #272727;
    font-size: 100%;
    font-weight: 900;
    letter-spacing: normal;
    line-height: 1.33;
    margin-left: 2.5rem;
}
.mobile-client-body .line-diagram-row h3 {
    align-items: center;
    display: flex;
    gap: 0.5rem;
}
.mobile-client-body .line-diagram-row h3 .fa-print,
.mobile-client-body .line-diagram-row h3 .fa-circle-notch {
    vertical-align: middle;
}
.mobile-client-body .line-diagram-row h3 .print-diagram-button {
    color: #272727;
    margin-left: auto;
}
.line-diagram svg {
    fill: #fff;
}
.line-diagram .nv-axislabel {
    fill: #fff;
    font-size: 0.9rem;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.38;
}
.line-diagram .nv-y.nv-axis path.domain {
    stroke: #fff;
}
/*#endregion */

/*#region Recipes and Schedules */
body.my-account .container-with-overlap,
body.mobile-client-body .container-with-overlap.cli-info,
body.manual-controller.show-action .container-with-overlap,
body.my-files .container-with-overlap {
    margin-bottom: 7rem;
}
body.recipe h1,
body.schedule .mobile-only h1,
body.training-exercise .mobile-only h1,
body.schedule.mobile-client-body h1,
body.activity h1,
body.client h1,
body.my-account h1,
body.mobile-client-body h1.cli-info,
body.my-files h1,
body.surveys h1,
body.manual-controller.show-action h1,
body.manual-controller.showsubsection-action h1,
h1.mobile-page-header {
    background-color: var(--nd-dark-green);
    color: #fff;
    font-size: 110%;
    font-weight: 900;
    margin: 0;
    padding: 1rem;
    text-transform: uppercase;
}
body.recipe h1 i,
body.schedule h1 i,
body.activity h1 i,
body.client h1 i,
h1.mobile-page-header i {
    margin-left: 0.5rem;
    padding: 0.5rem;
}
body.schedule:not(.mobile-client-body) .desktop-only h1 {
    font-size: 1.5rem;
}
/*#endregion */
/*#region Diaries */
body.diary h1 {
    background-color: var(--nd-dark-green);
    color: #fff;
    font-size: 110%;
    font-weight: 900;
    margin: 0;
    padding: 1rem;
    text-transform: uppercase;
}
body.diary h1 i {
    margin-left: 0.5rem;
    padding: 0.5rem;
}
#top-calendar {
    background-color: var(--nd-dark-green);
    position: relative;
}
#training-calendar-admin-calendar {
    position: relative;
    width: 33%;
}
#training-calendar-admin-calendar .datepicker {
    background-color: #f1f9f2;
    border: 0;
    border-radius: 0;
    left: 0;
    margin: 0 1rem;
    padding: 1.5rem;
    position: absolute;
    top: 2.8rem;
    width: 100%;
    z-index: 1000;
}
.trainingcalendar-controller.adminclient-action .datepicker,
.trainingcalendar-controller.admin-action .datepicker {
    left: 0;
    margin: 0 1rem;
    padding: 1.5rem;
    z-index: 1000;
}
.trainingcalendar-controller.adminclient-action input.datepicker,
.trainingcalendar-controller.admin-action input.datepicker {
    background-color: #efefef;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    margin: 0;
    padding: .375rem .75rem;
}
.dayoverview-action .datepicker,
.summary-action > .datepicker,
.swapfood-action > .datepicker,
.specialreport-action .datepicker {
    background-color: #f1f9f2;
    border: 0;
    border-radius: 0;
    left: 0;
    margin: 0 1rem;
    padding: 1.5rem;
    position: absolute;
    top: 2.8rem;
    width: 15rem;
    z-index: 1000;
}
.specialreport-action .datepicker {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.16);
}
#training-calendar-admin-calendar i.fa-calendar-alt.active {
    background-color: #f1f9f2;
    border-radius: 0.25rem 0.25rem 0 0;
    padding: 0.5rem;
}
body.body-action #top-calendar {
    background-color: #639a63;
}
#top-calendar i.fa-calendar-alt.active {
    background-color: #f2f2f2;
    border-radius: 0.25rem 0.25rem 0 0;
    color: #79a25f;
}
#top-calendar .datepicker-container {
    background-color: #f2f2f2;
}
#top-calendar .datepicker {
    background-color: #f2f2f2;
    border: 0;
    border-radius: 0;
    left: 0;
    margin: 0 1rem;
    padding: 1.5rem;
    position: absolute;
    top: 3rem;
    width: calc(100% - 2rem);
    z-index: 1000;
}
#move-session-modal-datepicker .datepicker,
#copy-todays-meals-modal-datepicker .datepicker {
    background-color: #f2f2f2;
    border: 0;
    border-radius: 0;
    margin: 0 1rem;
    padding: 1.5rem;
    width: calc(100% - 2rem);
    z-index: 1000;
}
body.recipe.show-action .datepicker::before,
body.schedule .datepicker::before,
#top-calendar .datepicker::before,
.datepicker-type-1 .datepicker::before,
/*#move-session-modal-datepicker .datepicker::before,
#copy-todays-meals-modal-datepicker .datepicker::before,*/
#training-calendar-admin-calendar .datepicker::before,
.trainingcalendar-controller.adminclient-action .datepicker::before,
.trainingcalendar-controller.admin-action .datepicker::before,
.dayoverview-action .datepicker::before,
.summary-action .datepicker::before,
.specialreport-action .datepicker::before {
    content: none;
}
body.recipe.show-action .datepicker::after,
body.schedule .datepicker::after,
#top-calendar .datepicker::after,
.datepicker-type-1 .datepicker::after,
/*#move-session-modal-datepicker .datepicker::after,
#copy-todays-meals-modal-datepicker .datepicker::after,
*/ #training-calendar-admin-calendar .datepicker::after,
.trainingcalendar-controller.adminclient-action .datepicker::after,
.trainingcalendar-controller.admin-action .datepicker::after,
.dayoverview-action .datepicker::after,
.summary-action .datepicker::after,
.specialreport-action .datepicker::after {
    content: none;
}
body.recipe.show-action .datepicker-days > table,
body.schedule .datepicker-days > table,
#top-calendar .datepicker-days > table,
.datepicker-type-1 .datepicker-days > table,
/*#move-session-modal-datepicker .datepicker-days > table,
#copy-todays-meals-modal-datepicker .datepicker-days > table,*/
#training-calendar-admin-calendar .datepicker-days > table,
.trainingcalendar-controller.adminclient-action .datepicker-days > table,
.trainingcalendar-controller.admin-action .datepicker-days > table,
.dayoverview-action .datepicker-days > table,
.summary-action .datepicker-days > table,
.specialreport-action .datepicker-days > table {
    width: 100%;
}
body.recipe.show-action .datepicker-days thead th.prev,
body.recipe.show-action .datepicker-days thead th.next,
body.recipe.show-action .datepicker-days thead th.datepicker-switch,
body.schedule .datepicker-days thead th.prev,
body.schedule .datepicker-days thead th.next,
body.schedule .datepicker-days thead th.datepicker-switch,
#top-calendar .datepicker-days thead th.prev,
#top-calendar .datepicker-days thead th.next,
#top-calendar .datepicker-days thead th.datepicker-switch,
.datepicker-type-1 .datepicker-days thead th.prev,
.datepicker-type-1 .datepicker-days thead th.next,
.datepicker-type-1 .datepicker-days thead th.datepicker-switch,
/*#move-session-modal-datepicker .datepicker-days thead th.prev,
#move-session-modal-datepicker .datepicker-days thead th.next,
#move-session-modal-datepicker .datepicker-days thead th.datepicker-switch,
#copy-todays-meals-modal-datepicker .datepicker-days thead th.prev,
#copy-todays-meals-modal-datepicker .datepicker-days thead th.next,
#copy-todays-meals-modal-datepicker .datepicker-days thead th.datepicker-switch*/
#training-calendar-admin-calendar .datepicker-days thead th.prev,
#training-calendar-admin-calendar .datepicker-days thead th.next,
#training-calendar-admin-calendar .datepicker-days thead th.datepicker-switch,
.trainingcalendar-controller.adminclient-action .datepicker-days thead th.prev,
.trainingcalendar-controller.adminclient-action .datepicker-days thead th.next,
.trainingcalendar-controller.adminclient-action .datepicker-days thead th.datepicker-switch,
.trainingcalendar-controller.admin-action .datepicker-days thead th.prev,
.trainingcalendar-controller.admin-action .datepicker-days thead th.next,
.trainingcalendar-controller.admin-action .datepicker-days thead th.datepicker-switch,
.dayoverview-action .datepicker-days thead th.prev,
.dayoverview-action .datepicker-days thead th.next,
.dayoverview-action .datepicker-days thead th.datepicker-switch,
.summary-action .datepicker-days thead th.prev,
.summary-action .datepicker-days thead th.next,
.summary-action .datepicker-days thead th.datepicker-switch,
.specialreport-action .datepicker-days thead th.prev,
.specialreport-action .datepicker-days thead th.next,
.specialreport-action .datepicker-days thead th.datepicker-switch {
    font-size: 1.1rem;
    font-weight: normal;
    text-transform: capitalize;
}
body.recipe.show-action .datepicker-days thead th.dow,
body.schedule .datepicker-days thead thead th.dow,
#top-calendar .datepicker-days thead th.dow,
.datepicker-type-1 .datepicker-days thead th.dow,
/*#move-session-modal-datepicker .datepicker-days thead th.dow,*/
#training-calendar-admin-calendar .datepicker-days thead th.dow,
.trainingcalendar-controller.adminclient-action .datepicker-days thead th.dow,
.trainingcalendar-controller.admin-action .datepicker-days thead th.dow,
.dayoverview-action .datepicker-days thead th.dow,
.summary-action .datepicker-days thead th.dow,
.specialreport-action .datepicker-days thead th.dow {
    font-weight: 600;
    text-transform: uppercase;
}
body.recipe.show-action .datepicker td,
body.recipe.show-action .datepicker th,
body.schedule .datepicker td,
body.schedule .datepicker th,
#top-calendar .datepicker td,
#top-calendar .datepicker th,
.datepicker-type-1 .datepicker td,
.datepicker-type-1 .datepicker th,
/*#move-session-modal-datepicker .datepicker td,
#move-session-modal-datepicker .datepicker th,*/
#training-calendar-admin-calendar .datepicker td,
#training-calendar-admin-calendar .datepicker th,
.trainingcalendar-controller.adminclient-action .datepicker td,
.trainingcalendar-controller.adminclient-action .datepicker th,
.trainingcalendar-controller.admin-action .datepicker td,
.trainingcalendar-controller.admin-action .datepicker th,
.dayoverview-action .datepicker td,
.dayoverview-action .datepicker th,
.summary-action .datepicker td,
.summary-action .datepicker th,
.specialreport-action .datepicker td,
.specialreport-action .datepicker th {
    border-radius: 3px;
    font-size: 0.7rem;
    height: 2rem;
    width: 2rem;
}
body.recipe.show-action .datepicker td.active,
body.recipe.show-action .datepicker td.active:hover,
body.schedule .datepicker td.active,
body.schedule .datepicker td.active:hover,
#top-calendar .datepicker td.active,
#top-calendar .datepicker td.active:hover,
#top-calendar .datepicker td.mark-week,
#top-calendar .datepicker td.mark-week:hover,
.datepicker-type-1 .datepicker td.active,
.datepicker-type-1 .datepicker td.active:hover,
.datepicker-type-1 .datepicker td.mark-week,
.datepicker-type-1 .datepicker td.mark-week:hover,
/*#move-session-modal-datepicker .datepicker td.active,
#move-session-modal-datepicker .datepicker td.active:hover,
#move-session-modal-datepicker .datepicker td.mark-week,
#move-session-modal-datepicker .datepicker td.mark-week:hover,*/
#training-calendar-admin-calendar .datepicker td.active,
#training-calendar-admin-calendar .datepicker td.active:hover,
#training-calendar-admin-calendar .datepicker td.mark-week,
#training-calendar-admin-calendar .datepicker td.mark-week:hover,
.trainingcalendar-controller.adminclient-action .datepicker td.active,
.trainingcalendar-controller.adminclient-action .datepicker td.active:hover,
.trainingcalendar-controller.admin-action .datepicker td.active,
.trainingcalendar-controller.admin-action .datepicker td.active:hover,
.trainingcalendar-controller.admin-action .datepicker td.mark-week,
.trainingcalendar-controller.admin-action .datepicker td.mark-week:hover,
.dayoverview-action .datepicker td.active,
.dayoverview-action .datepicker td.active:hover,
.summary-action .datepicker td.active,
.summary-action .datepicker td.active:hover,
.specialreport-action .datepicker td.active,
.specialreport-action .datepicker td.active:hover {
    background: #000 !important;
    color: #fff;
}
#top-calendar .datepicker td.cw,
#training-calendar-admin-calendar .datepicker td.cw,
.trainingcalendar-controller.admin-action .datepicker td.cw {
    color: var(--nd-dark-green);
    font-weight: 900;
}
#top-calendar .datepicker td.mark-week,
#training-calendar-admin-calendar .datepicker td.mark-week,
.trainingcalendar-controller.admin-action .datepicker td.mark-week {
    border-radius: 0;
}
#top-calendar .datepicker td.mark-week:nth-child(2),
#training-calendar-admin-calendar .datepicker td.mark-week:nth-child(2),
.trainingcalendar-controller.admin-action .datepicker td.mark-week:nth-child(2) {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
}
#top-calendar .datepicker td.mark-week:nth-child(8),
#training-calendar-admin-calendar .datepicker td.mark-week:nth-child(8),
.trainingcalendar-controller.admin-action .datepicker td.mark-week:nth-child(8) {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
body.recipe.show-action .datepicker td.info,
body.schedule .datepicker td.info,
#top-calendar .datepicker td.info,
.datepicker-type-1 .datepicker td.info,
/*#move-session-modal-datepicker .datepicker td.info,*/
.dayoverview-action .datepicker td.info,
.summary-action .datepicker td.info,
#training-calendar-admin-calendar .datepicker td.info {
    background-color: var(--nd-purple-light);
    color: #fff;
}
.datepicker .datepicker-days tfoot .clear {
    text-transform: uppercase;
}

body.fooddiary-action .info-protein-fat-carbo {
    padding-bottom: 0;
}
.diary-diagram-toggle i {
    color: #fff;
    font-size: 1.3rem;
}
/*#endregion */

/*#region Add Meals and Snacks */
.add-meals-buttons {
    background-color: #fff;
    border-radius: 1rem 1rem 0 0;
    margin-top: -2rem;
    padding: 0.4rem 1rem 1rem 1rem;
}
.add-meal-button {
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: 1.4rem;
    padding-top: 1.4rem;
    width: 100%;
}
.fooddiaryasclient-action .add-meal-button {
    display: flex;
}
.add-meal-button a {
    align-items: center;
    display: flex;
    width: 100%;
}
.add-meals-buttons .add-meal-button-icon {
    background-color: #f4f4f4;
    border-radius: 2rem;
    color: var(--nd-purple-dark);
    font-size: 36px;
    height: 72px;
    padding-top: 0.5rem;
    text-align: center;
    width: 72px;
}
.add-meals-buttons .add-meal-button-text h5 {
    color: #272727;
    font-size: 100%;
    font-weight: bold;
    margin: 0 0 0 0.75rem;
}
.add-meals-buttons .add-meal-button-plus {
    flex: 1 1 auto;
}
.add-meals-buttons .add-meal-button-plus .circle,
.add-meals-buttons .add-meal-button-plus .circle i {
    color: var(--nd-light-green);
    font-size: 31px;
    text-align: right;
}
.fooddiaryasclient-action .add-meals-buttons .add-meal-button-plus .circle {
    justify-self: end;
}
.add-meal-button.insulin {
    background-color: #e7aaaa;
    border-radius: 0.4rem;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    margin-top: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    width: 120%;
}
.add-meal-button.insulin .add-meal-button-icon {
    background-color: #fff;
    color: #e7aaaa;
}
.add-meal-button.insulin .add-meal-button-text h5 {
    color: #fff;
}
.add-meal-button.insulin .add-meal-button-plus .circle {
    color: #fff;
}
.existing-meals-buttons {
    background-color: #528653;
    margin-left: 0;
    margin-right: 0;
    padding: 1.5rem 1rem 0 1rem;
}
.existing-meal-button,
.existing-meals-summary {
    background-color: #f4f4f4;
    border-bottom: 1px solid #e8e8e8;
    border-radius: 0.4rem;
    margin-bottom: 1rem;
    width: 100%;
}
.existing-meal-button.blood-sugar {
    margin-bottom: 3rem;
}
.existing-meal-button-upper,
.existing-meals-summary-block {
    align-items: flex-start;
    background-color: #fff;
    border-radius: 0.4rem 0.4rem 0 0;
    box-shadow: 0 0.5rem 1rem -1rem rgba(0, 0, 0, 0.5);
    display: flex;
    width: 100%;
}
.existing-meal-button-lower {
    color: #272727;
    font-size: 90%;
    padding: 1rem;
    position: relative;
}
.existing-meal-button.blood-sugar .existing-meal-button-lower {
    font-size: 80%;
}
.existing-meal-button-lower a {
    color: #272727;
}
.existing-meals-buttons .existing-meal-button-text {
    padding: 1rem;
    position: relative;
    width: 100%;
}
.existing-meals-buttons .existing-meal-button-text .meal-name {
    display: inline-block;
    max-width: 80%;
    overflow-wrap: anywhere;
    width: 80%;
}
.existing-meals-buttons .existing-meal-button-text .meal-name,
.existing-meals-buttons .existing-meal-button-text .calories {
    color: #2d2d2d;
    cursor: pointer;
    font-size: 100%;
    font-weight: bold;
    margin: 0;
}
.existing-meals-buttons .existing-meal-button-text .calories {
    position: absolute;
    right: 0;
}
.existing-meals-buttons .existing-meal-button-text .carbo-protein-fat {
    color: #666;
    display: block;
    font-size: 70%;
}
.existing-meals-buttons .existing-meal-button-x,
.existing-meals-buttons .existing-meals-button-x,
.existing-meals-summary-empty-space {
    flex: 1 1 auto;
    padding: 1rem;
}

.existing-meals-buttons .existing-meal-button-x .delete-action {
    background: 0;
    border: 0;
    color: #d25f5f;
    font-size: 170%;
    line-height: 0.73;
    outline: 0;
    padding: 0;
    text-align: right;
}
.existing-meals-buttons .existing-meals-button-x .circle {
    color: #fff;
    font-size: 170%;
    line-height: 0.73;
    text-align: right;
}
.existing-meals-summary {
    background-color: unset;
    border: 0;
    color: #fff;
    padding-bottom: 2rem;
    width: 100%;
}
.existing-meals-summary-block {
    background-color: unset;
    box-shadow: none;
}
.existing-meals-summary-text {
    font-size: 120%;
    font-weight: 900;
    line-height: 1.27;
    padding: 1rem 1rem 0 1rem;
    position: relative;
    width: 100%;
}
.existing-meals-summary-text .total-text {
    text-transform: uppercase;
}
.existing-meals-summary-text .total-kcal {
    position: absolute;
    right: 1rem;
}
.existing-meals-summary .carbo-protein-fat-total {
    display: block;
    font-size: 70%;
    font-weight: normal;
}
#todays-meals .food-diary-photos {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}
#todays-meals .food-diary-photos img {
    height: auto;
    margin: 0 0 0.5rem 0;
    width: 100%;
}
@media only screen and (min-width: 768px) {
    #todays-meals .food-diary-photos img {
        width: 49%;
    }
}
@media only screen and (min-width: 1024px) {
    #todays-meals .food-diary-photos img {
        width: 32%;
    }
}
body.fooddiary-action #notes-form-container {
    /*margin-bottom: 5rem !important;*/
}
body.fooddiary-action #notes-form-container.no-margin-bottom {
    margin-bottom: 0 !important;
}
body.fooddiary-action #notes-form-container textarea {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}
body.fooddiary-action #notes-form-container button {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    text-align: left;
}
body.fooddiary-action #notes-form-container button i {
    float: right;
}
.food-diary-daily-commands {
    border-radius: 0.4rem;
    color: #fff;
    margin-bottom: 10rem;
    margin-left: 0;
    margin-right: 0;
    padding: 0 1rem;
}
.food-diary-daily-commands .daily-command .col-10 {
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1.27;
    padding: 1rem 1rem 0 1rem;
    position: relative;
    width: 100%;
}
.row-meal-photos {
    margin-bottom: 5.5rem;
    padding: 1rem;
}
.fooddiary-action .row-meal-photos {
    margin-left: 0;
    margin-right: 0;
}
#meal-contents .row-meal-photos {
    border: 0 !important;
    margin-bottom: 1rem;
    padding: 0;
}
.row-meal-photos h5 {
    color: #000000;
    font-size: 1.1rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: 900;
    letter-spacing: normal;
    line-height: 1.3;
}
.row-meal-photos img {
    height: auto;
    max-width: 100%;
    width: 100%;
}
body.mealschedule-controller.edit-action .meal-schedule-name {
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1.4rem;
}
body.mealschedule-controller.edit-action .change-name-and-description a {
    color: var(--nd-coral);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 0.9rem;
}
/*#endregion */

/*#region Search Form */
.search-form {
    background-color: var(--nd-dark-green);
    padding: 1rem 1rem 4rem 1rem;
}
.search-form.white {
    background-color: #fff;
    border-radius: 1rem 1rem 0 0;
}
.search-form input {
    border: 0;
    border-radius: 2rem;
    color: #272727;
    font-size: 90%;
    height: 2.5rem;
}
.search-form.white .search-form-field input {
    border: 1px solid #ccc;
    border-right: 0;
}
.search-form-field > .input-group-append > .input-group-text {
    background-color: #fff;
    border: 0;
    border-radius: 0 2rem 2rem 0;
    color: #2d2d2d;
    padding: 0 1rem;
}
.search-form.white .search-form-field > .input-group-append > .input-group-text {
    border: 1px solid #ccc;
}
.search-form input.searching,
.search-form .input-group-text.searching {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.search-form input.searching {
    border-top-left-radius: 1rem;
}
.search-form .input-group-text.searching {
    border-top-left-radius: 0;
    border-top-right-radius: 1rem;
}
.search-form .search-results {
    background-color: #fff;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    display: none;
    max-height: calc(100% - 4rem);
    overflow-y: scroll;
    padding: 0 1rem;
    position: absolute;
    width: calc(100% - 2rem);
    z-index: 100;
}
.search-form.mobile .mobile-search-results {
    box-shadow: 0 0.5rem 3rem -0.5rem rgba(0, 0, 0, 0.11);
}
.search-form.mobile .mobile-search-results .list-group-item {
    border: 0;
    border-bottom: 1px dashed #ccc;
    font-size: 0.9rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    line-height: 1.38;
}
.search-form.mobile .mobile-search-results input,
.search-form.mobile .mobile-search-results select {
    background-color: #f4f4f4;
    padding: 0.25rem;
}
#addIngredientsModal .search-results {
    max-height: inherit;
}
.search-form .search-results .list-group-item:first-child {
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.search-form .search-results .list-group-item {
    border: 0;
    border-bottom: 1px dashed #ccc;
    padding: 0.75rem 0;
}
.search-form .search-results .list-group-item:last-child {
    border: 0;
}
.search-form .search-results .list-group-item span {
    color: #79a25f;
    font-size: 0.9rem;
    padding-left: 0.5rem;
}
#main-search.search-form .search-results .list-group-item a {
    color: #272727;
    font-size: 0.9rem;
    line-height: 1.38;
}
.client-controller.editfoods-action.mobile-client-body .search-form {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
/*#endregion */

/*#region Tab Bar */
.tab-bar-container {
    background-color: #fff;
    border-radius: 1rem 1rem 0 0;
    height: 100%;
    margin-top: -3rem;
    padding-top: 1rem;
}
.add-recipes-container.tab-bar-container {
    height: inherit;
}
.tab-bar-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    width: 100%;
}
.tab-bar-tab {
    color: #528653;
    cursor: pointer;
    flex: 0 1 auto;
    line-height: 1.69;
    font-size: 70%;
    padding: 0.6rem 0.85rem;
    text-transform: uppercase;
}
.tab-bar-tab.active {
    background-color: var(--nd-dark-green);
    border-radius: 2rem;
    color: #fff;
}
.tab-bar-tab-content,
#meal-contents,
.diary-diagrams,
#activity-contents {
    color: #2d2d2d;
    padding: 0 1rem;
}
.tab-bar-tab-content.hidden {
    display: none;
}
.tab-bar-tab-content .list-header,
.mobile-search-results .list-header,
.new-modal .list-header,
#meal-contents .header,
#activity-contents .header  {
    color: #272727;
    font-size: 60%;
    font-weight: bold;
    line-height: 1.2;
    margin-top: 1rem;
    padding-bottom: 1rem;
    text-transform: uppercase;
}
.tab-bar-tab-content .row:not(.list-header),
#meal-contents .row:not(.header),
#activity-contents .row:not(.header) {
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: 1rem;
}
.tab-bar-tab-content .action-col {
    padding-top: 0.2rem;
}
.tab-bar-tab-content .action-link i {
    color: var(--nd-light-green);
    font-size: 1.3rem;
}
/*#endregion */

#save-body-data-form {
    margin-bottom: 5rem;
    margin-top: 6rem;
}
#meal-contents .edit-food-link {
    cursor: pointer;
    overflow-x: hidden;
}
#meal-contents .edit-food-link a {
    color: var(--nd-light-green);
    font-size: 1rem;
}

/*#region Meal/Snack & ExerciseDiary Details and Summary */
#meal-contents-container {

}
#meal-contents-details-container,
#activity-contents-details-container {
    background-color: #fff;
    height: calc(100% - 5.2rem);
    overflow-y: scroll;
    padding: 0 0.5rem;
    position: fixed;
    top: calc(100% - 5.2rem);
    width: 100%;
    z-index: 1029;
}
#meal-contents-details-container .meal-contents-details-header,
#activity-contents-details-container .activity-contents-details-header {
    color: #000;
    display: flex;
    justify-content: space-between;
    padding: 1rem;
}
#meal-contents-details-container .meal-name,
#activity-contents-details-container .activity-name {
    font-size: 120%;
    font-weight: 900;
}
#meal-contents-details-container .meal-name {
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#meal-contents-details-container .meal-date,
#activity-contents-details-container .activity-date {
    color: #272727;
    display: block;
    font-size: 90%;
    font-weight: normal;
    margin-top: -0.4rem;
}
#meal-contents-details-container .meal-time {
    color: #272727;
    font-size: 100%;
    font-weight: normal;
    padding-top: 0.1rem;
}
#meal-contents-details-container .minimize-details,
#activity-contents-details-container .minimize-details {
    color: #2d2d2d;
    font-size: 200%;
    text-align: right;
    width: 3rem;
}
#meal-contents .row:not(.header)/*,
#activity-contents .row:not(.header)*/ {
    padding-top: 1rem;
}
#meal-contents .row:not(.header) > div:nth-child(2)/*,
#activity-contents .row:not(.header) > div:nth-child(2)*/ {
    padding-left: 0;
}
#meal-contents .row:nth-child(2)/*,
#activity-contents .row:nth-child(2)*/ {
    padding-top: 0;
}

#meal-contents .delete-current-food-button .circle,
/*#activity-contents .delete-current-activity-button .circle,*/
.delete-favourite-food-button .circle,
#my-activities .delete-activity-button .circle {
    color: #d25f5f;
    font-size: 150%;
    text-align: left;
}
#meal-contents .total-text,
#activity-contents .total-text,
.meal-schedule-foods .total-text {
    color: #272727;
    font-size: 90%;
    font-weight: bold;
    text-transform: uppercase;
}
#activity-contents .activity-added-at,
#activity-contents .row[data-added-at] .col-6 {
    cursor: pointer;
}
#meal-contents .carbo-protein-fat-total,
.meal-schedule-foods .carbo-protein-fat-total {
    color: #272727;
    font-size: 70%;
    font-weight: normal;
}
#meal-contents .total-kcal,
#activity-contents .total-kcal,
.meal-schedule-foods .total-kcal {
    color: #272727;
    font-size: 100%;
    font-weight: bold;
}
#meal-contents-summary-container,
#activity-contents-summary-container {
    background-color: #000;
    bottom: 5.2rem;
    color: #fff;
    display: flex;
    justify-content: space-between;
    left: 0;
    padding: 1rem;
    position: fixed;
    right: 0;
    z-index: 1028;
}
#meal-contents-summary-container .meal-contents-left,
#activity-contents-summary-container .activity-contents-left {
    flex: 0 1 auto;
}
#meal-contents-summary-container .show-details,
#activity-contents-summary-container .show-details {
    font-size: 70%;
    margin-top: -0.1rem;
}
#meal-contents-summary-container .title-summary,
#activity-contents-summary-container .title-summary {
    font-size: 100%;
    font-weight: normal;
    margin-top: -0.4rem;
}
#meal-contents-summary-container .meal-name,
#activity-contents-summary-container .activity-name {
    font-weight: 900;
}
#meal-contents-summary-container .meal-contents-right,
#activity-contents-summary-container .activity-contents-right {
    flex: 0 1 auto;
}
#meal-contents-summary-container .kcal-pill,
#activity-contents-summary-container .kcal-pill {
    background-color: #fff;
    border-radius: 1.5rem;
    color: var(--nd-dark-green);
    font-weight: bold;
    padding: 0.5rem 1rem;
}
#meal-contents .summary-actions,
#activity-contents .summary-actions {
    padding-bottom: 2rem;
}
#meal-contents .summary-actions .row,
#activity-contents .summary-actions .row {
    border-bottom: 0;
}
#meal-contents .summary-actions button i,
#activity-contents .summary-actions button i {
    float: right;
}
body.summary-action .list-nutrient-per-food {
    color: #000;
}
#meal-contents .diagrams {
    background-color: var(--nd-dark-green);
    position: relative;
}
#activity-contents .diagrams {
    background-color: #2d2d2d;
    position: relative;
}
#recipe-diagrams::before,
#activity-contents .diagrams::before {
    border-style: solid;
    border-top-color: #fff;
    border-width: .7rem .7rem 0;
    color: #2d2d2d;
    content: "";
    height: 1rem;
    left: calc(50% - 0.7rem);
    position: absolute;
    top: 0;
    width: 1rem;
}
#meal-contents .diagrams::before {
    border-style: solid;
    border-top-color: #fff;
    border-width: .7rem .7rem 0;
    color: var(--nd-dark-green);
    content: "";
    height: 1rem;
    left: calc(50% - 0.7rem);
    position: absolute;
    top: 0;
    width: 1rem;
}
#meal-contents #hidden-diagrams,
#activity-contents #hidden-diagrams {
    display: none;
}
/*#endregion */

/*#region EditFoods */
#addFoodModal .modal-header {
    display: block;
}
#addFoodModal .modal-header > div {
    color: #272727;
    font-size: 60%;
    font-weight: bold;
    letter-spacing: normal;
    line-height: 1.2;
    margin-bottom: 1rem;
    text-transform: uppercase;
}
#addFoodModal .modal-header > div i {
    float: right;
    font-size: 100%;
}
.modal h6
#editFoodForm h6,
#editFoodModal h6,
#addFoodModal h6 {
    font-size: 100%;
    font-weight: 900;
    margin-top: 1rem;
}
#addFoodModal h5 {
    font-size: 100%;
    line-height: 1.33;
    padding-right: 1.5rem;
    position: relative;
}
#addFoodModal h5 a {
    color: var(--nd-light-green);
    font-size: 170%;
    line-height: 0.73;
    position: absolute;
    right: 0;
    top: 0;
}
#editFoodForm .unit-info,
#addFoodModal .unit-info {
    color: #272727;
    display: block;
    font-size: 90%;
    margin-bottom: 1rem;
    margin-top: -0.5rem;
}
#editFoodForm p,
#addFoodModal p {
    color: #272727;
    font-size: 110%;
    line-height: 1.4;
    margin-bottom: 0;
}
#addFoodModal select[name="FoodUnit"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url(../images/angle-down.svg);
    background-position: center right 1rem;
    background-repeat: no-repeat;
    background-size: .8rem;
}
.client-controller #addFoodModal #Amount-error {
    display: none !important;
}
#favourites .action-col i {
    font-size: 31px;
}
/*#endregion */

/*#region Chart related */
.main-diagram-container {
    padding-bottom: 20px;
}
.main-diagram-container .link-to-livsmedelsverket {
    text-align: center;
}
.main-diagram-container .link-to-livsmedelsverket a {
    color: #fff;
}

.diagram-container,
#hidden-diagrams,
#hidden-diagrams-1,
#hidden-diagrams-2 {
    display: none;
}
.mealschedule-controller .main-diagram-container ul {
    color: #000;
}
#diagram-1-container,
#diagram-2-container,
#diagram-3-container,
#diagram-4-container,
#diagram-5-container,
#diagram-6-container,
#diagram-7-container,
#diagram-8-container /*,
#diagram-1-1-container,
#diagram-2-1-container,
#diagram-1-2-container,
#diagram-2-2-container,
#diagram-1-3-container,
#diagram-2-3-container,
#diagram-1-4-container,
#diagram-2-4-container,
#diagram-1-5-container,
#diagram-2-5-container,
#diagram-1-6-container,
#diagram-2-6-container,
#diagram-1-7-container,
#diagram-2-7-container,
#diagram-1-8-container,
#diagram-2-8-container*/ {
    margin-top: -15px;
}
#diagram-1-container .diagram-container,
#diagram-1-1-container .diagram-container,
#diagram-2-1-container .diagram-container,
#diagram-2-container .diagram-container,
#diagram-1-2-container .diagram-container,
#diagram-2-2-container .diagram-container,
#diagram-3-container .diagram-container,
#diagram-1-3-container .diagram-container,
#diagram-2-3-container .diagram-container,
#diagram-4-container .diagram-container,
#diagram-1-4-container .diagram-container,
#diagram-2-4-container .diagram-container,
#diagram-5-container .diagram-container,
#diagram-1-5-container .diagram-container,
#diagram-2-5-container .diagram-container,
#diagram-6-container .diagram-container,
#diagram-1-6-container .diagram-container,
#diagram-2-6-container .diagram-container,
#diagram-7-container .diagram-container,
#diagram-1-7-container .diagram-container,
#diagram-2-7-container .diagram-container,
#diagram-8-container .diagram-container,
#diagram-1-8-container .diagram-container,
#diagram-2-8-container .diagram-container,
#diagram-9-container .diagram-container,
#diagram-1-9-container .diagram-container,
#diagram-2-9-container .diagram-container,
#diagram-10-container .diagram-container,
#diagram-1-10-container .diagram-container,
#diagram-2-10-container .diagram-container {
    display: block;
}
/*#btn-group-diagram-chooser-container2,*/
#btn-group-diagram-chooser-container4,
#btn-group-diagram-chooser-container6 {
    margin-bottom: 1em;
    margin-left: 1em;
}

.axis-line-bold {
    stroke: #000;
}

.diagram-container.pie svg,
.diagram-container-multi.pie svg {
    filter: drop-shadow(0px 20px 40px rgba(0,0,0,0.5));
    margin-top: -20px;
    min-height: 240px;
}
.client-details-child-container .diagram-container.pie svg {
    margin-top: 0;
    min-height: 10rem;
}
.diagram-container.pie .nvd3.nv-pie path {
    stroke: none;
}
.diagram-container.bar svg,
.diagram-container-multi.bar svg {
    min-height: 140px;
}

.diagram-container p,
.diagram-container-multi p {
    margin-bottom: 0;
}

.diagram-container ul,
.diagram-container-multi ul {
    margin-top: 10px;
}

.diagram-container ul.horizontal li,
.diagram-container-multi ul.horizontal li {
    display: inline-block;
}

.diagram-container li,
.diagram-container-multi li {
    display: block;
    margin-right: 10px;
}

/*
body:not(.recipe-controller) .diagram-container li::before,
body:not(.recipe-controller) .diagram-container-multi li::before,
body:not(.schedule-controller) .diagram-container li::before,
body:not(.schedule-controller) .diagram-container-multi li::before {
    content: '\02588';
    margin-right: 10px;
}
*/

.pie1-button {
    background: #1f77b4;
}

.pie2-button {
    background: #aec7e8;
}

.pie3-button {
    background: #ff7f0e;
}

.pie4-button {
    background: #ffbb78;
}

.percentage {
    fill: #333;
    font-size: 12px;
    display: none;
}

.diagram-container.pie svg,
.diagram-container-multi.pie svg {
    margin-top: -20px;
    min-height: 240px;
}

span.legend-protein::after,
span.legend-fett::after,
span.legend-kolhydrater::after {
    content: '\02588';
}

.legend-nutrition li::before,
.legend-omega li::before {
    content: '';
}

.legend-nutrition li {
    display: inline-block;
}

.legend-energy-versus {
    margin-top: -30px;
}

.legend-omega {
    font-weight: bold;
    margin-top: -30px;
}
/*
.legend-client-energy-ratio,
.legend-recommended-energy-ratio {
    font-size: 72%;
}
*/
.legend-client-energy-ratio ul {
    padding-left: 0px;
}

/*li.legend-protein::before,*/
span.legend-protein::after {
    color: #aa5c5b !important;
}
li.legend-protein span {
    background-color: #d0acda !important;
    display: inline-block;
    margin-right: 0.7rem;
}
li.legend-fett span,
li.legend-fat span {
    background-color: #e5c74f !important;
    display: inline-block;
    margin-right: 0.7rem;
}
li.legend-kolhydrater span,
li.legend-carbohydrates span {
    background-color: #9bdc88 !important;
    display: inline-block;
    margin-right: 0.7rem;
}
li.legend-alkohol span,
li.legend-alcohol span {
    background-color: #e66464;
    display: inline-block;
    margin-right: 0.7rem;
}
li.legend-ratio span {
    display: inline-block;
    margin-right: 0.7rem;
}
li.legend-frukost span {
    background-color: #99d1e6 !important;
    display: inline-block;
    margin-right: 0.7rem;
}
#desktop-main-area li.legend-frukost span {
    background-color: #99d1e6 !important;
}
li.legend-lunch span {
    background-color: #fabcbd !important;
    display: inline-block;
    margin-right: 0.7rem;
}
#desktop-main-area li.legend-lunch span {
    background-color: #fabcbd !important;
}
li.legend-middag span {
    background-color: #9bdc88 !important;
    display: inline-block;
    margin-right: 0.7rem;
}
#desktop-main-area li.legend-middag span {
    background-color: #9bdc88 !important;
}
li.legend-mellanmal span {
    background-color: #d0acda !important;
    display: inline-block;
    margin-right: 0.7rem;
}
#desktop-main-area li.legend-mellanmal span {
    background-color: #d0acda !important;
}
li.legend-frukost::before,
li.legend-omega-3::before,
li.legend-omega-6::before {
    color: #8e67b8 !important; /*#669acc;*/
}
/* second color in a sequence */
/*li.legend-fett::before,*/
span.legend-fett::after {
    color: #faf9c1 !important; /*#9999cd;*/
}

/* third color in a sequence */
/*li.legend-kolhydrater::before,*/
span.legend-kolhydrater::after {
    color: #c9ef9d !important;
}
li.legend-middag::before {
    color: #45a067 !important; /*#ff9a9a;*/
}
/* fourth color in a sequence */
/*li.legend-alkohol::before {
    color: #af0201 !important;
}
*/
li.legend-mellanmal::before {
    color: #d64347 !important; /*#cd3333;*/
}

li.legend-lunch::before {
    color: #46a168 !important;
}

li.legend-middag::before {
    color: #d84347 !important;
}

li.legend-mellanmal::before {
    color: #ff762e !important;
}

.btn-group {
    margin-bottom: 1em;
}

.always-visible {
    display: block !important;
}

#diagram-weight .nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point,
#diagram-waist .nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point,
#diagram-seat .nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point,
#diagram-alt1 .nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point,
#diagram-alt2 .nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point {
    fill-opacity: 1;
    stroke-opacity: 1;
}
#row-diagrams .main-diagram-container .legend-energy-versus,
#row-diagrams .main-diagram-container .legend-fat,
#row-diagrams .main-diagram-container .legend-added-sugar,
#row-diagrams .main-diagram-container .legend-omega > p {
    display: none;
}
#row-diagrams .main-diagram-container h3 {
    border-top: 2px solid white;
    color: #fff;
    font-size: 90%;/*1.1rem;*/
    font-weight: 900;
    margin: 1rem 0 0 0;
    padding: 1rem 1rem 0.5rem 1rem;
    text-transform: uppercase;
}
#row-diagrams #diagram-1-container.main-diagram-container h3 {
    border-top: 0;
    margin: 0;
}
.nutritionalcalculationcompare-action .main-diagram-container .two-column-diagram-container,
#row-diagrams .two-column-diagram-container,
.client-details-child-container .two-column-diagram-container {
    flex-wrap: wrap;
}
.nutritionalcalculationcompare-action .main-diagram-container .two-column-diagram-container > .col-12,
#row-diagrams .two-column-diagram-container > .col-12,
.client-details-child-container .two-column-diagram-container > .col-12 {
    padding: 0;
}
.nutritionalcalculationcompare-action .main-diagram-container .two-column-diagram-container > .col-6 h3,
#row-diagrams .two-column-diagram-container > .col-6 h3,
.client-details-child-container .two-column-diagram-container > .col-6 h3 {
    border: 0;
    margin-top: 0;
    padding-top: 0.5rem;
    text-align: center;
    text-transform: none;
}
#row-diagrams .legend-client-energy-ratio ul {
    padding-left: 0 !important;
}
.summary-action #row-diagrams .diagram-container.bar .nv-y.nv-axis.nvd3-svg .tick line {
    stroke: #666;
}
/* TEMP FIXES FOR DIAGRAMS */
.diary-diagrams {
    background-color: var(--nd-dark-green);
    display: none;
    padding-left: 0;
    padding-right: 0;
}
#row-diagrams {
    margin-left: -1rem;
    margin-right: -1rem;
}
.nutritionalcalculationcompare-action .diagram-omega svg,
#row-diagrams .diagram-omega svg,
.swapfood-action .diagram-omega svg {
    min-height: 100px;
}
.nutritionalcalculationcompare-action .diagram-container.pie svg {
    height: auto;
    margin-top: 0;
    min-height: 240px;
}
#row-diagrams .diagram-container.pie svg,
.swapfood-action .diagram-container.pie svg {
    height: auto;
    margin-top: 0;
    min-height: 200px;
}
#row-diagrams .diagram-energy-ratio-container,
#row-diagrams .diagram-meal-ratio-container,
.swapfood-action .diagram-energy-ratio-container,
.swapfood-action .diagram-meal-ratio-container,
.nutritionalcalculationcompare-action .two-column-diagram-container.diagram-energy-ratio-container,
.nutritionalcalculationcompare-action .two-column-diagram-container.diagram-meal-ratio-container {
    display: flex !important;
}
#row-diagrams .diagram-client-energy-ratio,
#row-diagrams .diagram-recommended-energy-ratio,
#row-diagrams .diagram-client-meal-ratio,
#row-diagrams .diagram-recommended-meal-ratio,
.swapfood-action .diagram-client-energy-ratio,
.swapfood-action .diagram-recommended-energy-ratio,
.swapfood-action .diagram-client-meal-ratio,
.swapfood-action .diagram-recommended-meal-ratio, 
.nutritionalcalculationcompare-action .two-column-diagram-container .diagram-client-energy-ratio,
.nutritionalcalculationcompare-action .two-column-diagram-container .diagram-recommended-energy-ratio,
.nutritionalcalculationcompare-action .two-column-diagram-container .diagram-client-meal-ratio,
.nutritionalcalculationcompare-action .two-column-diagram-container .diagram-recommended-meal-ratio {
    padding: 0;
}
#row-diagrams .diagram-client-energy-ratio p,
#row-diagrams .diagram-recommended-energy-ratio p,
#row-diagrams .diagram-client-meal-ratio p,
#row-diagrams .diagram-recommended-meal-ratio p,
.swapfood-action .diagram-client-energy-ratio p,
.swapfood-action .diagram-recommended-energy-ratio p,
.swapfood-action .diagram-client-meal-ratio p,
.swapfood-action .diagram-recommended-meal-ratio p,
.nutritionalcalculationcompare-action .diagram-client-energy-ratio p,
.nutritionalcalculationcompare-action .diagram-recommended-energy-ratio p,
.nutritionalcalculationcompare-action .diagram-client-meal-ratio p,
.nutritionalcalculationcompare-action .diagram-recommended-meal-ratio p {
    color: white;
    font-family: HKGrotesk;
    font-size: 0.6rem;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    margin-top: 0.5rem;
}
#row-diagrams .diagram-client-energy-ratio,
#row-diagrams .diagram-client-meal-ratio,
.swapfood-action .diagram-client-energy-ratio,
.swapfood-action .diagram-client-meal-ratio,
.nutritionalcalculationcompare-action .diagram-client-energy-ratio,
.nutritionalcalculationcompare-action .diagram-client-meal-ratio {
    margin-bottom: 2rem;
}
#row-diagrams .diagram-client-energy-ratio h3,
#row-diagrams .diagram-recommended-energy-ratio h3,
#row-diagrams .diagram-client-meal-ratio h3,
#row-diagrams .diagram-recommended-meal-ratio h3,
.swapfood-action .diagram-client-energy-ratio h3,
.swapfood-action .diagram-recommended-energy-ratio h3,
.swapfood-action .diagram-client-meal-ratio h3,
.swapfood-action .diagram-recommended-meal-ratio h3 {
    display: block;
}
#row-diagrams .row.diagram-energy-ratio-container,
#row-diagrams .row.diagram-meal-ratio-container,
.swapfood-action .row.diagram-energy-ratio-container,
.swapfood-action .row.diagram-meal-ratio-container,
.nutritionalcalculationcompare-action .row.diagram-energy-ratio-container,
.nutritionalcalculationcompare-action .row.diagram-meal-ratio-container {
    border: 0;
}
#row-diagrams .nvd3.nv-pie path,
.swapfood-action .nvd3.nv-pie path,
.nutritionalcalculationcompare-action .nvd3.nv-pie path {
    stroke: transparent;
    stroke-width: 0;
}
#row-diagrams .nv-barsWrap .nv-group,
.swapfood-action .nv-barsWrap .nv-group,
.nutritionalcalculationcompare-action .nv-barsWrap .nv-group {
    fill-opacity: 1 !important;
}
#row-diagrams .main-diagram-container,
.swapfood-action .main-diagram-container,
.nutritionalcalculationcompare-action .main-diagram-container {
    color: #fff;
    font-family: HKGrotesk;
    font-size: 70%;
    width: 100%
}
.swapfood-action .main-diagram-container {
    color: #000;
}

#row-diagrams .main-diagram-container ul,
.swapfood-action .main-diagram-container ul,
.nutritionalcalculationcompare-action .main-diagram-container ul {
    padding-left: 1rem;
}
#row-diagrams select[name="choose-nutrient-per-food"],
.swapfood-action select[name="choose-nutrient-per-food"] {
    margin-top: 0.5rem;
    padding: 0.375rem 0.75rem;
}
#row-diagrams .list-nutrient-per-food,
.swapfood-action .list-nutrient-per-food {
    padding: 0 1rem;
}
#piechart-nutrition {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#piechart-nutrition svg {
    width: 240px;
}

#piechart-nutrition .canvas-container,
.diagram-container.pie .canvas-container {
    height: 9rem !important;
    margin: 0 auto;
    width: 9rem !important;
}
.diagram-energy-versus-container .canvas-container {
    height: 9rem !important;
    width: 100% !important;
}
.diagram-omega-container .canvas-container {
    height: 7rem !important;
    width: 100% !important;
}
.diagram-added-sugar .canvas-container {
    height: 10rem !important;
    width: 100% !important;
}
.diagram-fat-container .canvas-container {
    height: 10rem !important;
    width: 100% !important;
}
.diagram-nutrition .canvas-container {
    height: 40rem !important;
    width: 100% !important;
}
.diagram-container.pie .legend-client-energy-ratio,
.diagram-container.pie .legend-recommended-energy-ratio,
.diagram-container.pie .legend-client-meal-ratio,
.diagram-container.pie .legend-recommended-meal-ratio {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}
.diagram-container.bar .diagram-fat svg,
.diagram-container-multi.bar .diagram-fat svg {
    min-height: 170px;
}
/*#endregion */

/*#region Training */
body.training .green-area {
    background-color: var(--nd-dark-green);
    height: 15rem;
}
body.training .big-buttons {
    margin-top: -10rem;
}
/*#endregion */

/*#region TrainingSessions */
body.trainingsession-controller.list-action .training-program-description {
    padding-bottom: 1.5rem;
    margin-top: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
body.training-session h1 {
    background-color: var(--nd-dark-green);
    color: #fff;
    font-size: 110%;
    font-weight: 900;
    margin: 0;
    padding: 1rem;
    text-transform: uppercase;
}
body.training-session .big-buttons {
    margin-bottom: 4rem;
}
body.training-session .big-button.training-program h5 {
    font-size: 110%;
    font-weight: normal;
    line-height: 1.4;
    text-transform: none;
}
body.training-session .big-button.training-program p {
    font-size: 70%;
    font-weight: normal;
    line-height: 1.23;
    text-transform: none;
}
body.training-session .big-button.training-program .circle {
    border: 0;
    border-radius: 0;
    height: auto;
    margin-top: -0.4rem;
    width: auto;
}
body.training-session .big-button.training-program .fal {
    font-size: 160%;
}
body.training-session .big-button.training-program .fa-plus-circle {
    color: var(--nd-light-green);
}
body.training-session .big-button.training-program .item.rest {
    background-color: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 0.3rem;
    display: grid;
    margin-bottom: 0.55rem;
    padding-bottom: 0;
    width: 100%;
}
body.training-session .big-button.training-program .item.rest .title {
    color: #2a2a2a;
    font-size: 100%;
    font-weight: 600;
    justify-self: center;
    line-height: 1.3rem;
    padding: 0.5rem;
}
body.training-session .big-button.training-program .training-set {
    background-color: #414141;
    border: 1px solid #414141;
    width: 100%;
}
body.training-session .big-button.training-program .training-set > .actions {
    background-color: #414141 !important;
}
.training-sessions .cta {
    font-size: 80%;
    padding: 1rem;
}
.training-sessions .training-exercise #training-video img {
    margin-bottom: 1rem;
    width: 90%;
}
.fa-spin.auto-margin {
    margin: auto;
}
/*#endregion */

/*#region TrainingCalendar */
body.training-calendar-day h1 {
    background-color: var(--nd-dark-green);
    color: #fff;
    font-size: 110%;
    font-weight: 900;
    margin: 0;
    padding: 1rem;
    text-transform: uppercase;
}
body.training-calendar-day h1 i {
    margin-left: 0.5rem;
    padding: 0.5rem;
}
body.training-calendar-day .spacer {
    height: 1rem;
    padding-bottom: 3rem;
}
.training-calendar-weeks,
.surveys-list {
    background-color: #fff;
    border-radius: 1rem 1rem 0 0;
    height: 100%;
    margin-top: -3rem;
    padding: 1rem 1rem 0 1rem;
}
.surveys-list {
    padding-bottom: 8rem;
}
.training-calendar-weeks .row,
.surveys-list .survey-item.row {
    border-bottom: 1px solid #e8e8e8;
    margin: 0;
    padding-bottom: 1rem;
}
.week-action .training-calendar-weeks .row {
    padding-bottom: 0;
}
.training-calendar-weeks h5,
.surveys-list .survey-item h5 {
    color: #212529;
    font-size: 125%;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}
.surveys-list .survey-item > a {
    width: 100%;
}
.training-calendar-weeks .circle i,
.surveys-list .survey-item .circle i {
    color: #ccc;
    font-size: 180%;
    height: 100%;
    transform: translateY(25%);
}
.training-calendar-weeks .circle i.fa-angle-right,
.surveys-list .survey-item .circle i.fa-angle-right {
    color: #2d2d2d;
}
.training-calendar-weeks .circle.complete i {
    color: var(--nd-light-green);
}
.training-calendar-week i.fa-exclamation-square {
    color: #f7d055 !important;
}
.training-calendar-week i.read {
    color: var(--nd-dark-green) !important;
}
.training-calendar-week .session-name,
.surveys-list .survey-item .survey-current-stats {
    color: #666;
    font-size: 70%;
    margin-bottom: 0;
}
.training-calendar-week .session-stats {
    color: #666;
    font-size: 70%;
    margin-bottom: 0.5rem;
}
.training-calendar-week .fa-trophy-alt.completed {
    color: var(--nd-light-green);
}
#training-calendar-day-notes .notes-row {
    margin: 0 0 1rem 0;
}
#training-calendar-day-notes .notes-bubble {
    background-color: #fff;
    border-radius: 1.5rem 1.5rem 1.5rem 0;
    margin: 0 2rem;
    padding: 1rem 2rem;
}
#training-calendar-day-notes .notes-name {
    color: #fff;
    font-size: 70%;
    font-weight: normal;
    line-height: 1.83;
    margin: 0 2rem;
}

.training-calendar-day .training-session {
    background-color: #fff;
    border-radius: 0.5rem;
    margin: 0 1rem 2rem 1rem;
    padding: 2rem 1rem;
}
.training-calendar-day .training-session.collapsed {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
.training-calendar-day .training-session h5 {
    font-weight: 900;
    text-transform: uppercase;
    width: 100%;
}
.training-calendar-day .training-session .cta {
    font-weight: bold;
    text-align: left;
}
.training-calendar-day .training-session .cta i {
    float: right;
    margin-top: 0.2rem;
}
.big-button.training-program {
    margin-left: 0;
    margin-right: 0;
}
.big-button.training-program > .training-program[data-type="training-program"] {
    display: none;
}
.training-calendar-day .training-session .training-exercise-item,
.big-button.training-program .training-program > .training-exercise-item {
    background-color: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 0.33rem;
    margin-bottom: 1rem;
    width: 100%;
}
.training-calendar-day .training-session .training-exercise-item .exercise-images {
    margin: 0;
}
.big-button.training-program .training-program .training-set-content.nested-sortable {
    background-color: #fff !important;
}
.big-button.training-program .training-program .training-exercise,
.big-button.training-program .training-program > .training-exercise-item .training-exercise {
    box-shadow: 0 10px 20px -20px rgba(0, 0, 0, 0.5);
    margin-bottom: 0;
    /*margin-top: 3rem;*/
    width: 100%;
    z-index: 10;
}
.big-button.training-program .training-program > .training-exercise:first-of-type {
    margin-top: 0;
}
.training-calendar-day .training-session .training-exercise {
    box-shadow: 0 10px 20px -20px rgba(0, 0, 0, 0.5);
    margin-bottom: 0;
    width: 100%;
    z-index: 10;
}
.big-button.training-program .training-program .exercise-header,
.training-calendar-day .training-session .exercise-header {
    align-items: baseline;
    display: flex;
    justify-content: flex-start;
}
.training-calendar-day .training-session .exercise-header .exercise-is-completed,
.big-button.training-program .training-program .exercise-header .exercise-is-completed {
    font-size: 100%;
    padding-left: 0;
    padding-right: 0;
}
.training-calendar-day .training-session .exercise-header .exercise-is-completed i,
.big-button.training-program .training-program .exercise-header .exercise-is-completed i {
    background-color: var(--nd-dark-green);
    border-top-left-radius: 0.33rem;
    color: #fff;
    padding: 1rem;
}
.big-button.training-program .training-program .exercise-header .exercise-is-completed i {
    color: transparent !important;
}
.big-button.training-program .training-program .exercise-header .exercise-name {
    color: #000;
    font-size: 110%;
    font-weight: 900;
}
.training-calendar-day .training-session .exercise-header .exercise-name {
    color: #000;
    font-size: 110%;
    font-weight: 900;
    line-height: normal;
    padding-left: 0;
    padding-right: 0;
}
.big-button.training-program .training-program .exercise-header .exercise-info,
.training-calendar-day .training-session .exercise-header .exercise-info {
    padding-left: 0;
    padding-right: 0;
    text-align: right
}
.big-button.training-program .training-program .exercise-images img {
    margin-left: 0;
    margin-right: 0;
}
.big-button.training-program .training-program .exercise-images img,
.training-calendar-day .training-session .exercise-images img {
    padding-bottom: 1rem;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    width: auto;
}
.big-button.training-program .training-program .exercise-images .preview,
.training-calendar-day .training-session .exercise-images .preview {
    position: relative;
}
.big-button.training-program .training-program .exercise-images .preview img,
.training-calendar-day .training-session .exercise-images .preview img {
    position: absolute;
    z-index: 1;
}
.big-button.training-program .training-program .exercise-images {
    padding-left: 1rem;
    padding-right: 1rem;
}
.big-button.training-program .training-program .exercise-images .preview #training-video img {
    position: relative;
    width: 90%;
}
.big-button.training-program .training-program .exercise-images .preview img.active,
.training-calendar-day .training-session .exercise-images .preview img.active {
    z-index: 3;
}
.training-calendar-day .training-session .exercise-images .preview:not(.no-image) + .focus.no-image {
    height: 10rem;
}
.big-button.training-program .training-program .training-data {
    background-color: #f4f4f4;
    border-radius: 0.5rem;
    margin: 0;
    padding: 0 1rem;
    width: 100%;
}
.training-calendar-day .training-session .training-data {
    margin: 0;
    padding: 0 1rem;
    width: 100%;
}
.training-calendar-day .training-session .training-data.row,
.training-calendar-day .training-session .collapsible {
    border: 0;
}
.big-button.training-program .training-program .training-data-row,
.training-calendar-day .training-session .training-data-row,
.training-calendar-day .training-session .client-notes-row,
.training-calendar-day .training-session .session-notes-row,
.training-calendar-day .training-session .session-totals-row {
    border-bottom: 1px solid #ccc;
    display: flex;
    padding: 1rem 0;
    width: 100%;
}
.training-calendar-day .training-session .session-totals-row p {
    font-weight: bold;
}
.training-calendar-day .training-session .client-notes-row {
    border: 0;
}
.big-button.training-program .training-program .training-data-row {
    white-space: break-spaces;
}
.big-button.training-program .training-program .training-data-row > div,
.training-calendar-day .training-session .training-data-row > div,
.training-calendar-day .training-session .client-notes-row > div,
.training-calendar-day .training-session .session-notes-row > div {
    padding: 0;
}
.big-button.training-program .training-program .training-data-row > div:first-child,
.training-calendar-day .training-session .training-data-row > div:first-child,
.training-calendar-day .training-session .client-notes-row > div:first-child,
.training-calendar-day .training-session .session-notes-row > div:first-child {
    padding: 0 0.5rem 0 0;
}
.training-calendar-day .training-session .training-data-row > div:first-child span {
    font-weight: bold;
}
.training-calendar-day .training-session .training-data-row i.fal {
    float: right;
    margin-top: 0.2rem;
}
.big-button.training-program .training-program .training-exercise-notes {
    padding-bottom: 1rem;
    padding-top: 1rem;
}
.training-calendar-day .training-session .training-exercise-notes {
    padding-top: 1rem;
}
body.client-controller.training-action .big-button.training-calendar img,
body.client-controller.training-action .big-button.training-program img {
    height: 2rem;
}
#exerciseInfoModal .modal-header {
    border: 0;
    justify-content: flex-end;
}
#runExerciseModal .modal-header {
    background-color: #2d2d2d;
    border: 0;
    color: #fff;
    padding-bottom: 0.5rem;
}
#runExerciseModal .modal-header .training-set-info {
    width: 100%;
}
#exerciseInfoModal .modal-body,
#runExerciseModal .modal-body {
    font-size: 90%;
}
#runExerciseModal .modal-body .training-datas {
    width: 100%;
}
#exerciseInfoModal .modal-body h5,
#runExerciseModal .modal-body h5 {
    font-size: 100%;
    font-weight: 900;
}
#runExerciseModal .modal-body h5 {
    color: #000;
    font-size: 110%;
    line-height: 1.3;
}
#exerciseInfoModal .training-type,
#exerciseInfoModal .control-label {
    font-weight: bold;
    margin-bottom: 0;
}
#exerciseInfoModal .all-training-images,
#runExerciseModal .all-training-images {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: repeat(2, 1fr);
    -ms-grid-rows: 1fr;
    grid-template-rows: 1fr;
}
#exerciseInfoModal .preview,
#runExerciseModal .preview {
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-area: 1 / 1 / 2 / 2;
    min-height: 250px;
}
#runExerciseModal .preview {
    /*min-height: 10rem;*/
}
#exerciseInfoModal .focus,
#runExerciseModal .focus {
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-area: 1 / 2 / 2 / 3;
}
#exerciseInfoModal #training-images,
#exerciseInfoModal #training-focus-image,
#runExerciseModal #training-images,
#runExerciseModal #training-focus-image {
    padding: 0;
}
#showTrainingExerciseModal .modal-body .row:first-child {
    min-height: 10rem;
}
#exerciseInfoModal .preview img,
#exerciseInfoModal #training-focus-image img,
#runExerciseModal .preview img,
#runExerciseModal .focus img,
#showTrainingExerciseModal .preview img,
#showTrainingExerciseModal .focus img
.mobile-only.show-training-exercise .preview img,
.mobile-only.show-training-exercise .focus img {
    object-fit: contain;
    max-height: 100%;
    max-width: 100%;
    height: auto;
    position: absolute;
}
#exerciseInfoModal .preview img,
#runExerciseModal .preview img,
#showTrainingExerciseModal .preview img,
.mobile-only.show-training-exercise .preview img {
    width: 100%;
}
#showTrainingExerciseModal .preview img,
.mobile-only.show-training-exercise .preview img {
    min-height: 10rem;
}

#exerciseInfoModal #training-video,
#runExerciseModal #training-video {
    text-align: center;
}

#exerciseInfoModal #training-video iframe {
    height: 320px;
    max-height: 320px;
    max-width: 95%;
    width: 100%;
}
#runExerciseModal #training-video iframe {
    margin-top: 1rem;
    max-height: 320px;
    max-width: 95%;
    width: 100%;
}
#exerciseInfoModal #training-description,
#runExerciseModal #training-description {
    margin-top: 1rem;
}
#exerciseInfoModal .exercise-images {
    height: 50vh;
}
#runExerciseModal .exercise-images {
    box-shadow: 0 10px 20px -20px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 10;
}
#exerciseInfoModal .exercise-images img,
#runExerciseModal .exercise-images img,
#showTrainingExerciseModal img,
.mobile-only.show-training-exercise img {
    height: auto;
    max-width: 90%;
    max-height: 100%;
    width: auto;
}
#runExerciseModal .exercise-images img,
#showTrainingExerciseModal img,
.mobile-only.show-training-exercise img {
    width: 100%;
}
#exerciseInfoModal .exercise-images .preview,
#runExerciseModal .exercise-images .preview,
#showTrainingExerciseModal .preview,
.mobile-only.show-training-exercise .preview {
    position: relative;
}
#exerciseInfoModal .exercise-images .preview img,
#runExerciseModal .exercise-images .preview img,
#showTrainingExerciseModal .preview img,
.mobile-only.show-training-exercise .preview img {
    position: absolute;
    z-index: 1;
}
#exerciseInfoModal .exercise-images .preview img.active,
#runExerciseModal .exercise-images .preview img.active,
#showTrainingExerciseModal .preview img.active,
.mobile-only.show-training-exercise .preview img.active {
    z-index: 3;
}
.trainingexercise-controller.edit-action img.exercise-image,
.trainingexercise-controller.edit-action img.focus-image {
    height: 100%;
    width: 100%;
}
#runExerciseModal .exercise-info {
    background-color: #f4f4f4;
    border-radius: 0.5rem;
    margin: 0;
    padding: 0 1rem;
    width: 100%;
}
#runExerciseModal .exercise-description {
    color: #272727;
    font-size: 90%;
    line-height: 1.38;
    margin-top: 1.6rem;
}
#runExerciseModal h6 {
    font-size: 60%;
    font-weight: bold;
    line-height: 2;
    text-transform: uppercase;
}
#runExerciseModal .training-datas .training-data-row {
    border-bottom: 1px solid #ccc;
    margin-bottom: 0.6rem;
    padding-bottom: 0.6rem;
}
#runExerciseModal .training-datas .training-data-row span {
    display: inline-block;
    margin-right: 0.5rem;
    padding-bottom: 0.5rem;
}
#runExerciseModal .training-datas .training-data-row .form-control {
    display: inline-block !important;
    padding: 0.375rem 0.25rem;
    width: 3rem !important;
}
#runExerciseModal .collapsible {
    border-top: 0;
    padding-top: 0.5rem;
}
#runExerciseModal .collapsible-content {
    background-color: initial;
    margin-bottom: 1rem;
}
#runExerciseModal .collapsible-content .training-data-row {
    width: 100%;
}
#runExerciseModal .collapsible-content .training-data-row .col-12 {
    padding: 0.25rem 0;
}
#runExerciseModal .exercise-notes {
    padding-bottom: 1rem;
    width: 100%;
}
#runExerciseModal .exercise-notes textarea {
    margin-top: 1.5rem;
}
#runExerciseModal .modal-footer {
    border: 0;
}
#runExerciseModal #done-exercise-button i {
    float: right;
}
#runExerciseModal #skip-exercise-button,
#runExerciseModal #go-back-to-exercise-button {
    text-align: left;
    font-size: 89%;
    font-weight: bold;
}
#runExerciseModal #skip-exercise-button i,
#runExerciseModal #go-back-to-exercise-button i {
    float: right;
}
/*#endregion */

/*#region TrainingProgram Admin */
.exercise-search-form/*,
.exercise-settings-form,
.training-program-edit-form*/ {
    background-color: #eee;
    border-radius: 0.5em;
    padding: 1em;
}

.exercise-search-form .btn-group {
    padding: 1em 0;
}

.exercise-search-form .exercise-selection-tabs .selected {
    background-color: #666;
    color: #fff;
}

.exercise-search-form select.form-control {
    border-radius: 0.25em !important;
    padding: 3px 6px;
    width: 100% !important;
}

.exercise-search-form .col-4,
.exercise-search-form .col-8 {
    padding-left: 0;
    padding-right: 0;
}
#main-grid .exercise-list-grid {
    margin-top: 2rem;
}
.exercise-list-grid,
.my-exercises-list-grid {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}
.mobile-only .exercise-list-grid,
.mobile-only .my-exercises-list-grid {
    -webkit-justify-content: space-evenly;
    justify-content: space-evenly;
}
.exercise-list-item {
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    width: 200px;
    height: 200px;
    border: 1px solid #eee;
    border-radius: 0.5em;
    padding: 0.5em;
    position: relative;
    margin: 5px;
}
.exercise-list-item.rest-item {
    background-color: #f1f9f2;
}
.exercise-list-item .add-overlay {
    background-color: rgba(30,30,30,0.75);
    border-radius: 0.25em;
    color: #fff;
    display: none;
    font-size: 2rem;
    height: 100%;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 1000;
}
.exercise-list-item .add-overlay > i {
    margin-top: calc(50% - 1rem);
}
.mobile-only .exercise-list-item {
    border-color: #f4f4f4;
    border-radius: 0.25rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin: 1rem 0;
    min-height: 14rem;
    padding: 1rem 0 0 0;
    width: 45%;
}
.exercise-list-item .title {
    height: 3rem;
    text-align: center;
}
.mobile-only .exercise-list-item .title {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    line-clamp: 2;
    order: 2;
    overflow: hidden;
    padding: 0 0.5rem;
    text-overflow: ellipsis;
}
.exercise-list-item .title a {
    color: #000;
    display: -webkit-box;
    height: 3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.mobile-only .exercise-list-item .title a {
    color: #272727;
    font-size: 0.9rem;
    height: 2rem;
    line-height: 1.25;
}
.exercise-list-item .preview {
    height: 60%;
    margin-bottom: 0.5rem;
    padding-left: 3em;
    position: relative;
}
.mobile-only .exercise-list-item .preview {
    display: flex;
    justify-content: center;
    order: 1;
    padding-left: 0;
}
.exercise-list-item .preview img {
    max-width: 150px;
    max-height: 100%;
    position: absolute;
}
.mobile-only .exercise-list-item.rest-item .preview.rest img {
    margin-top: 1rem;
    max-width: 80px;
}
.exercise-list-item .preview.no-image {
    color: #ccc;
}
.exercise-list-item.rest-item .preview.no-image {
    align-items: center;
    display: flex;
    font-size: 4rem;
    justify-content: center;
    padding: 0;
}
.exercise-list-item .preview.video-image {
    color: #ccc;
    padding-left: 0;
    text-align: center;
}
.exercise-list-item .preview.video-image img {
    left: 1rem;
}
.mobile-only .exercise-list-item .preview.video-image img {
    max-width: 75%;
    object-fit: contain;
    position: initial;
}
.exercise-list-item .actions {
    align-items: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 7px;
    display: flex;
    justify-content: space-evenly;
    /*height: 15%;*/
    margin: 0 auto;
    padding: 0.1rem 1rem;
    /*width: 70px;*/
    text-align: center;
}
.mobile-only .exercise-list-item .actions {
    align-items: center;
    background-color: #f4f4f4;
    border: 0;
    border-radius: 0 0 0.25rem 0.25rem;
    margin-top: 0.5rem;
    max-height: 1.66rem;
    order: 3;
    width: 100%;
}
.mobile-only .exercise-list-item .actions :nth-child(1) {
    order: 2;
}
.mobile-only .exercise-list-item .actions :nth-child(2) {
    order: 1;
}
.mobile-only .exercise-list-item .actions :nth-child(3) {
    order: 3;
}
.exercise-list-item .actions a {
    color: #2d2d2d;
}
.exercise-list-item .actions i.fa-star {
    color: #b70406;
}
.mobile-only .exercise-list-item .actions i.fa-plus-circle {
    font-size: 2.25rem;
    font-weight: 900;
    margin-top: 0.25rem;
}
.training-program-exercise-list-item {
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #ddd;
    margin-bottom: 3px;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 3fr 3fr 1fr;
    grid-template-columns: 1fr repeat(2, 3fr) 1fr;
    -ms-grid-rows: auto 1fr auto;
    grid-template-rows: auto 1fr auto;
    grid-row-gap: 0.5em;
}
.training-program-exercise-list-item .position {
    background: #ddd;
    font-weight: bold;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-area: 1 / 1 / 2 / 2;
    height: 2em;
    padding: 0.25em 0.5em;
    text-align: center;
}
.training-program-exercise-list-item .title {
    -ms-grid-column: 2;
    -ms-grid-column-span: 5;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-area: 1 / 2 / 2 / 6;
    /*height: 2em;*/
    padding: 0.25em 0.5em;
}
.training-program-exercise-list-item .preview {
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-area: 2 / 2 / 3 / 3;
    height: 120px;
    position: relative;
}
.training-program-exercise-list-item .preview.only-video {
    -ms-grid-column: 2;
    -ms-grid-column-span: 2;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-area: 2 / 2 / 3 / 4;
}
.training-program-exercise-list-item .preview img {
    height: auto;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    position: absolute;
}
.training-program-exercise-list-item .preview.only-video img {
    position: static;
}
.training-program-exercise-list-item .focus img {
    height: auto;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}
.training-program-exercise-list-item .preview.no-image,
.training-program-exercise-list-item .focus.no-image {
    color: #ccc;
    visibility: hidden;
}
.training-program-exercise-list-item .focus {
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-area: 2 / 3 / 3 / 4;
}
.training-program-exercise-list-item .training-data {
    margin-left: 1em;
    vertical-align: top;
    -ms-grid-column: 1;
    -ms-grid-column-span: 6;
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    grid-area: 3 / 1 / 4 / 7;
}
.exercise-settings-form {
    background-color: #eee;
    border-radius: 0.5em;
    padding: 1em;
}
.exercise-search-form .btn-group {
    padding: 1em 0;
}
.exercise-search-form .exercise-selection-tabs .selected {
    background-color: #666;
    color: #fff;
}
.exercise-search-form select.form-control {
    border-radius: 0.25em !important;
    padding: 3px 6px;
    width: 100% !important;
}
.exercise-search-form .col-4,
.exercise-search-form .col-8 {
    padding-left: 0;
    padding-right: 0;
}
.exercise-settings-form {
    margin-top: 1em;
}
.exercise-settings-form .notes {
    width: 100%;
}
.exercise-settings-form .notes textarea {
    width: 100%;
}
.exercise-settings-form > label {
    text-transform: uppercase;
}
.exercise-settings-form .form-check-group {
}
.exercise-settings-form .form-check {
    /*display: inline-block;*/
    margin-right: 1em;
}
.exercise-settings-form h6 {
    color: #272727;
    font-size: 0.6rem;
    font-weight: bold;
    padding: 1rem 1rem 0 1rem;
    text-transform: uppercase;
    font-style: normal;
}
.exercise-settings-form .form-check label {
    font-weight: normal;
}
.exercise-settings-form .training-focus-group > .form-check.parent-1 {
    background-color: #fff;
    border-radius: 5px 5px 0 0;
}

.exercise-settings-form .training-focus-group > .form-check.parent-2 {
    background-color: #fff;
}

.exercise-settings-form .training-focus-group > .form-check.parent-3 {
    background-color: #ddebf7;
}

.exercise-settings-form .training-focus-group > .form-check.parent-4 {
    background-color: #d9d9d9;
}

.exercise-settings-form .training-focus-group > .form-check.parent-5 {
    background-color: #fff;
}

.exercise-settings-form .training-focus-group > .form-check.parent-6 {
    background-color: #fff2cc;
}

.exercise-settings-form .training-focus-group > .form-check.parent-7 {
    background-color: #e2efda;
}

.exercise-settings-form .training-focus-group > .form-check.parent-8 {
    background-color: #fce4d6;
}

.exercise-settings-form .training-focus-group > .form-check.parent-10 {
    background-color: #ddebf7;
    border-radius: 0 0 5px 5px;
}

.exercise-settings-form .training-focus-group > .form-check.parent-11 {
    background-color: #fff;
    border-radius: 0 0 5px 5px;
}
.training-data-form > .form-group {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}
#trainingDataModal .training-data-form > .form-group,
#restTrainingDataModal .training-data-form > .form-group {
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
#trainingDataModal #trainingDataRowsTable .data-row-item,
#restTrainingDataModal #trainingDataRowsTable .data-row-item {
    border-radius: 0.33rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
#trainingDataModal #trainingDataRowsTable .input-group-addon.data-row-position,
#restTrainingDataModal #trainingDataRowsTable .input-group-addon.data-row-position {
    align-self: center;
    margin-right: 0.5rem;
}
#trainingDataModal #trainingDataRowsTable .input-group-addon.data-row-actions,
#restTrainingDataModal #trainingDataRowsTable .input-group-addon.data-row-actions {
    align-self: center;
}
#trainingDataModal .training-data-form .data.term-item .data-term-name,
#restTrainingDataModal .training-data-form .data.term-item .data-term-name {
    line-height: 1;
}
#trainingDataModal #trainingDataRowsTable .input-group-addon.data-row-actions i,
#restTrainingDataModal #trainingDataRowsTable .input-group-addon.data-row-actions i {
    margin-left: 1rem;
}
.training-data-form hr {
    border-top: 2px solid #ccc;
}
.training-data-form .data-term-item {
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    margin-bottom: 0.5em;
    width: 100%;
}
#trainingDataModal .training-data-form .data-term-item,
#restTrainingDataModal .training-data-form .data-term-item {
    -webkit-flex: 0 1 45%;
    -ms-flex: 0 1 45%;
    flex: 0 1 45%;
    width: auto;
}
.training-data-form .data-term-item .data-term-name {
    width: 20%;
}
#trainingDataModal .training-data-form .data-term-item .data-term-name,
#restTrainingDataModal .training-data-form .data-term-item .data-term-name {
    width: auto;
}
.training-data-form .data-term-item .data-term-unit {
    background-color: #fff;
    border-left: 0px;
    text-align: center;
    width: 20%;
}
.training-data-form .data-term-item .delete-data-term-button {
    margin-left: 10px;
    position: absolute;
    top: 25%;
    width: 10%;
}
#trainingDataModal .training-data-form .data-term-item .delete-data-term-button,
#restTrainingDataModal .training-data-form .data-term-item .delete-data-term-button {
    line-height: 1;
    margin-left: 1rem;
    position: unset;
    top: 0;
    vertical-align: middle;
    width: auto;
}
.training-data-form .add-new-data-term-form input {
    margin-bottom: 0.5em;
}
.training-data-form .add-new-data-term-form input.has-error {
    background-color: #f3d4d3;
    border-color: #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
@media (min-width: 768px) {
    .training-program-exercise-list-item,
    #training-plan-session-exercises-grid .training-plan-session-exercise-list-item {
        background-color: #fff;
        border-radius: 5px;
        border: 1px solid #ddd;
        margin-bottom: 3px;
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 3fr 3fr 12fr 1fr;
        grid-template-columns: 1fr repeat(2, 3fr) 12fr 1fr;
        -ms-grid-rows: auto 1fr auto;
        grid-template-rows: auto 1fr auto;
        grid-row-gap: 0.5em;
    }
    .training-program-exercise-list-item .training-data,
    #training-plan-session-exercises-grid .training-plan-session-exercise-list-item .training-data {
        -ms-grid-column: 4;
        -ms-grid-column-span: 1;
        -ms-grid-row: 2;
        -ms-grid-row-span: 1;
        grid-area: 2 / 4 / 3 / 5;
    }
    .training-program-exercise-list-item .training-data .edit-training-data,
    #training-plan-session-exercises-grid .training-plan-session-exercise-list-item .training-data .edit-training-data {
        cursor: pointer;
        font-size: 0.8rem;
        margin-left: 1rem;
    }
    .training-program-exercise-list-item .notes,
    #training-plan-session-exercises-grid .training-plan-session-exercise-list-item .notes {
        -ms-grid-column: 2;
        -ms-grid-column-span: 6;
        -ms-grid-row: 3;
        -ms-grid-row-span: 1;
        grid-area: 3 / 2 / 4 / 7;
        margin-bottom: 1em;
    }
    .training-program-info #trainingProgramExercises a {
        color: #000;
    }
    .training-program-info #trainingProgramExercises .training-program-exercise-list-item-actions {
        margin-right: 0.5rem;
        text-align: center;
    }
}
/*#endregion */

/*#region Schedules */
body.client-controller.create-action .green-area, 
body.client-controller.edit-action .green-area,
body.schedule .green-area,
body.surveys .green-area {
    background-color: var(--nd-dark-green);
    height: 3rem;
}
body.client-controller.body-action .green-area {
    height: 3rem;
}
.schedules-container .form-group.row:not(.meal-schedule-row-header):first-child {
    margin-top: 2rem;
}
/*
.schedules-container .meal-schedule-name,
.schedules-container .exercise-schedule-name {
    color: #666;
    font-size: 1rem;
    line-height: 1.33;
}
.schedules-container .meal-schedule-info {
    color: #2d2d2d;
    display: block;
    font-size: 0.7rem;
    line-height: 1.33;
}
*/
body.schedule .datepicker table tr td.disabled {
    background: var(--nd-purple-light);
    color: #666;
    cursor: default;
    opacity: 0.5;
}
.edit-client-container,
.create-client-container,
.show-schedule-container {
    background-color: #fff;
    border-radius: 1rem 1rem 0 0;
    /*height: 100%;*/
    margin-bottom: 1rem;
    margin-top: -3rem;
}
body.showexerciseschedule-action .show-schedule-container {
    margin-bottom: 7rem;
}
.show-schedule-container h2 {
    color: #000;
    font-size: 1.2rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.5px;
    line-height: 1.27;
    margin-bottom: 0;
    padding: 1.7rem 0 0 0;
    text-align: center;
    text-transform: uppercase;
}
.show-schedule-container .exercise-schedule-description {
    font-size: 0.8rem;
    margin-bottom: 0;
    padding: 0;
    white-space: pre-line
}
.show-schedule-container .meal-name-row {
    display: flex;
    margin-top: 2.9rem;
    padding: 0 0.5rem; 
}
.show-schedule-container .meal-name-row > .col-10 {
    border-bottom: solid 1px #d4d4d4;
    margin-left: 0;
    margin-right: 0;
    padding-bottom: 1rem;
    padding-left: 0.5rem;
    padding-right: 0;
}
.show-schedule-container .meal-name-row > .action-col {
    border-bottom: solid 1px #d4d4d4;
    margin-left: 0;
    margin-right: 0;
    padding-bottom: 1rem;
    padding-left: 0;
    padding-right: 0;
}
.show-schedule-container .meal-food-rows {
    background-color: #f4f4f4;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    padding: 0 1rem;
}
.show-schedule-container .meal-food-row {
    padding: 0 5px;
}
.show-schedule-container .meal-food-row > div {
    border-bottom: 1px solid #e8e8e8;
    padding: 1rem 0 0.6rem 0;
}
.show-schedule-container .meal-name,
.show-schedule-container .meal-kcal,
.show-schedule-container .activity-name {
    color: #2d2d2d;
    font-size: 100%;
    font-stretch: normal;
    font-style: normal;
    font-weight: bold;
    letter-spacing: normal;
    line-height: 1.33;
    padding-right: 1rem;
}
.show-schedule-container .meal-food-row .meal-food-name a {
    color: var(--nd-light-green);
    font-size: 100%;
}
.show-schedule-container .activity-name {
    display: block;
    font-weight: normal;
    margin-top: 1rem;
}
.show-schedule-container .activity-info {
    color: #666;
    display: block;
    font-size: 70%;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.69;
}
.show-schedule-container .exercise-day-row {
    color: #000;
    font-size: 110%;
    font-weight: 900;
    letter-spacing: normal;
    line-height: 1.3;
    margin-top: 2rem;
}
.show-schedule-container .exercise-day-row > div {
    border-bottom: 1px solid #ccc;
    margin-left: 15px;
    margin-right: 15px;
    padding-bottom: 1rem;
    padding-left: 3px;
    padding-right: 3px;
    width: auto;
}
.show-schedule-container .exercise-day-exercises {
    padding: 0 1rem;
}
.show-schedule-container .meal-kcal {
    font-weight: normal;
    padding-right: 0;
}
.show-schedule-container .meal-info,
.show-schedule-container .meal-food-info {
    color: #666;
    display: block;
    font-size: 70%;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    line-height: 1.69;
}
.show-schedule-container .meal-description,
.mealschedule-controller.edit-action .table-row .meal-description,
body.print .table-row .meal-description {
    color: #222;
    font-size: 80%;
    line-height: 1.69;
}
.mealschedule-controller.edit-action .table-row .meal-description {
    font-size: 70%;
}
.show-schedule-container .action-col {
    text-align: right;
}
.show-schedule-container .exercise-day-exercise-row .action-col {
    margin-top: 1rem;
}
.show-schedule-container .action-link {
    color: var(--nd-light-green);
    font-size: 170%;
    font-stretch: normal;
    font-style: normal;
    font-weight: 300;
    letter-spacing: normal;
    line-height: 0.73;
    text-align: center;
}
.show-schedule-container .meal-food-row .col-4 {
    text-align: right;
}
.show-schedule-container .cta,
.schedules-container .cta {
    text-align: left;
}
.show-schedule-container .cta i,
.schedules-container .cta i {
    float: right;
}
#useMealInFoodDiaryModal .modal-header,
#useActivityInExerciseDiaryModal .modal-header {
    flex-direction: column;
}
#useMealInFoodDiaryModal .modal-header h6,
#useActivityInExerciseDiaryModal .modal-header h6 {
    font-size: 80%;
}
/*#endregion */

/*#region Lists */
.row-header-subtitle {
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: 1rem;
}
.row-header-subtitle .header,
.row-header .header {
    color: #2d2d2d;
    font-weight: normal;
    line-height: 1.33;
}
#previously-selected-foods .row-header-subtitle .header {
    cursor: pointer;
}
.row-header-subtitle .subtitle,
.row-subtitle .subtitle {
    color: #666;
    display: block;
    font-size: 70%;
    line-height: 1.69;
}
.row-header-subtitle .action-col,
.row-header .action-col{
    align-self: center;
    color: var(--nd-light-green);
    font-size: 1.7rem;
    line-height: 0.73;
    padding-top: 0.65rem;
}
.row-header-subtitle .action-col button,
.row-header .action-col button {
    border: 0;
    background: none;
    padding: 0 0.1rem;
}
.row-header-subtitle .action-col button:focus,
.row-header .action-col button:focus {
    outline: 0;
}
.row-header-subtitle.no-subtitle .action-col,
.row-header.no-subtitle .action-col {
    padding-top: 0rem;
}
.row-header-subtitle .action-col i.fa-plus-circle,
.row-header-subtitle .action-col i.fa-check-circle,
.row-header-subtitle .action-col i.fa-circle-notch,
.row-header-subtitle .action-col i.fa-registered,
.row-header .action-col i.fa-plus-circle,
.row-header .action-col i.fa-check-circle,
.row-header .action-col i.fa-circle-notch,
.row-header .action-col i.fa-registered {
    color: var(--nd-light-green);
    font-size: 1.7rem;
}
.row-header-subtitle .action-col i.fa-times-circle,
.row-header .action-col i.fa-times-circle {
    color: #d25f5f;
    font-size: 1.7rem;
}
.clients-container .row-header-subtitle.client-row-header,
.schedules-container .row-header-subtitle.meal-schedule-row-header {
    margin-bottom: 0;
    margin-top: 1rem;
}
.tab-bar-tab-content .row.row-header {
    border: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}
/*#endregion */

/*#region ShowInModal (Recipe) */
#showRecipeModal .modal-header {
    border: 0;
    justify-content: flex-end;
}
#showRecipeModal .modal-title {
    font-size: 120%;
    font-weight: 900;
    margin-top: 1rem;
}
#showRecipeModal img {
    width: 100%;
}
#showRecipeModal .ingredients,
#showRecipeModal .instructions {
    font-size: 90%;
}
#showRecipeModal h6 {
    font-size: 100%;
    font-weight: bold;
    margin-top: 1rem;
}
#showRecipeModal .header.nutrition-info {
    font-size: 90%;
    font-weight: bold;
    margin-top: 1rem;
    text-transform: uppercase;
}
#showRecipeModal .row.nutrition-info {
    font-size: 90%;
}
#showRecipeModal .square-action-buttons .square-action-button {
    font-size: 90%;
    height: 2rem;
    width: 2rem;
}
#showRecipeModal .square-action-buttons a.square-action-button i {
    margin-top: 60%;
}
@media only screen and (min-width: 500px) {
    #showRecipeModal .square-action-buttons .square-action-button {
        font-size: 1rem;
        height: 3rem;
        width: 3rem;
    }
    #showRecipeModal .square-action-buttons a.square-action-button i {
        margin-top: 1rem;
    }
}
/*#endregion */

/*#region Recipes */
body.recipe .bg-dark-green,
body.client .bg-dark-green,
body.my-account .bg-dark-green,
body.mobile-client-body .bg-dark-green.cli-info,
body.manual-controller.show-action .bg-dark-green,
body.my-files .bg-dark-green {
    height: 4rem;
}
.nvd3.nv-pie path {
    fill-opacity: 1 !important;
}
#recipe-diagrams {
    background-color: var(--nd-dark-green);
    padding: 1rem 1.5rem 9rem 1.5rem;
    position: relative;
}
#recipe-diagrams::before {
    color: var(--nd-dark-green);
}
#recipe-diagrams h6 {
    color: #fff;
    font-weight: 900;
    margin-bottom: 1rem;
}
#recipe-diagrams p {
    color: #fff;
    font-size: 90%;
    margin-bottom: 0;
}
#recipe-diagrams .legend-nutrition-pie {
    color: #fff;
    /*left: 25%;
    position: relative;
    width: 70%;*/
    margin-left: 2rem;
}
#recipe-diagrams .legend-nutrition-pie ul {
    padding-left: 0;
}
#recipe-diagrams .legend-nutrition-pie li span {
    border-radius: 1rem;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.16);
    font-size: 100%;
    height: 1.1rem;
    position: relative;
    top: 0.3rem;
    width: 1.1rem;
}
.client-details-child-container .legend-client-energy-ratio li span,
.client-details-child-container .legend-recommended-energy-ratio li span,
#row-diagrams .legend-client-energy-ratio li span,
#row-diagrams .legend-recommended-energy-ratio li span,
#row-diagrams .legend-client-meal-ratio li span,
#row-diagrams .legend-recommended-meal-ratio li span,
.mealschedule-controller #piechart-nutrition li span {
    border-radius: 1rem;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.16);
    font-size: 80%;
    height: 0.8rem;
    position: relative;
    top: 0.15rem;
    width: 0.8rem;
}
#recipe-diagrams .legend-nutrition-pie li {
    font-size: 80%;
    height: 1.7rem;
}
.client-details-child-container .legend-client-energy-ratio li,
.client-details-child-container .legend-recommended-energy-ratio li,
#row-diagrams .legend-client-energy-ratio li,
#row-diagrams .legend-recommended-energy-ratio li,
#row-diagrams .legend-client-meal-ratio li,
#row-diagrams .legend-recommended-meal-ratio li {
    font-size: 80%;
    height: 1.4rem;
}
#recipe-diagrams svg > g.nv-pieChart {
    transform: scale(1.25);
    /*transform: translateX(25%);*/
}
.add-recipes-container #my-recipes,
.add-recipes-container #favourites,
.add-recipes-container #collection,
.schedules-container,
.body-container,
.add-activity-container #generic-activities,
.add-activity-container #my-activities,
.clients-container #my-clients {
    padding-top: 1rem;
}
.add-activity-container #generic-activities .activity-name,
.add-activity-container #my-activities .activity-name,
.clients-container #my-clients .client-name {
    color: #2d2d2d;
}
.add-activity-container #generic-activities .activity-info,
.add-activity-container #my-activities .activity-info {
    color: #666;
    display: block;
    font-size: 0.7rem;
}
.add-recipes-container #my-recipes .action-col,
.add-recipes-container #favourites .action-col {
    padding-top: 0.65rem;
}
.add-recipes-container #collection #SearchName {
    font-family: 'Font Awesome 5 Pro', HKGrotesk, Helvetica, Arial, sans-serif;
}
.add-recipes-container #collection label {
    font-size: 90%;
    margin-bottom: 0;
}
.add-recipes-container #collection select {
    padding: 0.5rem;
}
.add-recipes-container #collection button {
    margin-bottom: 0.5rem;
}
.add-recipes-container #collection button.black-and-white  {
    line-height: normal;
    padding-left: 1.7rem;
    padding-right: 1.7rem;
}
#show-recipe-container .btn.black-and-white {
    line-height: normal;
}
.add-recipes-container #collection button.black-and-white i,
#show-recipe-container .btn.black-and-white i {
    line-height: normal;
    padding-top: 1.1px;
}
#createRecipeForm img,
#show-recipe-container img {
    margin-bottom: 1rem;
    width: 100%;
}
#show-recipe-container .recipe-header-row {
    margin-bottom: 2rem;
    margin-top: 1rem;
}
#show-recipe-container h2 {
    color: #2d2d2d;
    font-size: 110%;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 0;
}
#show-recipe-container h6 {
    font-weight: bold;
}
#show-recipe-container .recipe-servings-info {
    color: #666;
    font-size: 70%;
}
#show-recipe-container .action-col {
    align-self: center;
}
#show-recipe-container .action-link i {
    color: var(--nd-light-green);
    font-size: 170%;
}
#show-recipe-container .ingredients,
#show-recipe-container .instructions {
    font-size: 90%;
    margin-bottom: 2rem;
}
#show-recipe-container .cta {
    text-align: left;
}
#show-recipe-container .cta i {
    float: right;
}
#show-recipe-container button.toggle-favourite.on {
    background-color: var(--nd-coral);
    border: 1px solid var(--nd-coral);
    color: #fff;
}
#createRecipeForm .recipe-image-row,
#editRecipeForm .recipe-image-row,
#show-recipe-container .recipe-image-row,
#edit-client-container .row,
#editClientForm .client-image-row,
#profileImageForm .profile-image-row {
    margin-top: 1rem;
    text-align: center;
}
#createRecipeForm .recipe-image-row img,
#editRecipeForm .recipe-image-row img,
#editClientForm .client-image-row img,
#profileImageForm .profile-image-row img,
#show-recipe-container img {
    width: 100%;
}
#createRecipeForm .no-recipe-image,
#editRecipeForm .no-recipe-image,
#editClientForm .no-client-image,
#profileImageForm .no-profile-image,
#show-recipe-container .no-recipe-image {
    color: #e8e8e8;
    font-size: 15rem;
}
.desktop-left-menu .show-recipe div .recipe-image {
    width: 100%;
}
.image-action-button {
    color: #fff;
    padding: 0.25rem 0.5rem;
    position: absolute;
    right: 15px;
}
.image-action-button.add-image {
    background-color: var(--nd-dark-green);
}
.image-action-button.delete-image {
    background-color: #d25f5f;
}
.image-action-button.star {
    background-color: var(--nd-light-green);
    color: #fff;
}
#createRecipeForm input[name="Recipe.FoodImageFileName"],
#editRecipeForm input[name="Recipe.FoodImageFileName"],
#editClientForm input[name="Client.ProfileImageFileName"] {
    display: none;
}
#desktop-main-area #editRecipeForm input[name="Recipe.FoodImageFileName"] {
    display: block;
}
#createRecipeForm .recipe-image-upload,
#editRecipeForm .recipe-image-upload,
#editClientForm .client-image-upload,
#profileImageForm .profile-image-upload {
    left: calc(50% - 3rem);
    position: absolute;
    text-align: center;
    top: calc(50% - 3rem);
}
#createRecipeForm .recipe-image-upload i,
#editRecipeForm .recipe-image-upload i,
#editClientForm .client-image-upload i,
#profileImageForm .profile-image-upload i {
    float: none;
    font-size: 3rem;
}
#createRecipeForm .row:not(.collapsible),
#createActivityForm .row {
    border: 0;
    padding-bottom: 0;
}
#createRecipeForm .row.collapsible {
    border-bottom: 0;
}
#createRecipeForm h5,
#editRecipeForm h5,
#editClientForm h5 {
    font-size: 110%;
    font-weight: bold;
}
#createRecipeForm label,
#editRecipeForm label,
#editClientForm label,
#createActivityForm label,
.training-program-info label {
    color: #272727;
    font-size: 90%;
    margin-bottom: 0;
    margin-top: 1rem;
}
#editClientForm label span {
    color: #272727;
    font-size: 90%;
    line-height: 1.38;
}
#createRecipeForm button i,
#editRecipeForm button i,
#editClientForm button i,
#createActivityForm button i {
    float: right;
}
#createRecipeForm #recipe-ingredients,
#createRecipeForm #recipe-categories {
    display: flex;
}
#createRecipeForm button[type=submit].w-100 {
    line-height: normal;
}
#createRecipeForm button[type=submit].w-100 .fal {
    font-size: 1.1rem;
    line-height: normal;
}
#addIngredientsModal .search-form {
    background-color: inherit;
    padding: 0;
}
#addIngredientsModal .search-form-field input {
    border: 1px solid #272727;
    border-radius: 1rem 0 0 1rem;
    border-right: 0;
}
#addIngredientsModal .search-form-field input.searching {
    border-bottom-left-radius: 0;
    border-bottom: 0;
}
#addIngredientsModal .search-form-field .input-group-text {
    border: 1px solid #272727;
    border-bottom-right-radius: 1rem;
    border-top-right-radius: 1rem;
}
#addIngredientsModal .search-form-field .input-group-text.searching {
    border-bottom: 0;
    border-bottom-right-radius: 0;
}
#addIngredientsModal .search-results {
    border: 1px solid #272727;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    height: 12rem;
    width: calc(100% - 1.7rem);
}
#addIngredientsModal .search-results .list-group-item {
    font-size: 90%;
    padding: 0.5rem 0;
}
#addIngredientsModal .add-food-form-row {
    background-color: #e8e8e8;
    border-radius: 1rem;
    margin: 1rem 0;
    padding: 0 0 1rem 0;
}
#addIngredientsModal #add-food-portion-info {
    font-size: 90%;
    font-style: italic;
}
#addIngredientsModal .recipe-ingredient-row {
    display: flex;
    padding: 0.5rem 0;
}
.modal .modal-body .row.header,
#addIngredientsModal .row.header {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.modal .modal-body .row.header > div {
    padding: 0;
}
#addIngredientsModal .row.header > div {
    padding: 0;
    text-align: right;
}
#addIngredientsModal .recipe-ingredient-row > div {
    font-size: 90%;
    padding: 0;
    text-align: right;
}
#addIngredientsModal .row.header > div:first-child,
#addIngredientsModal .recipe-ingredient-row > div:first-child {
    text-align: left;
}
#collection-search-results {
    margin-top: 2rem;
}
#collection-search-results .row {
    border: 0;
    padding-bottom: 2rem;
}
#collection-search-results img {
    margin-bottom: 0.5rem;
    width: 100%;
}
#collection-search-results .no-recipe-image {
    color: #e8e8e8;
    font-size: 15rem;
}
#collection-search-results .no-recipe-image i {
    font-size: 15rem !important;
}
#collection-search-results a:hover {
    text-decoration: none;
}
#collection-search-results h4 {
    color: #000;
    font-size: 110%;
    font-weight: 900;
    line-height: 1.3;
}
#collection-search-results .fa-spin {
    margin-bottom: 5rem;
}
#main-grid.recipes-data {
    align-content: flex-start;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.recipe-box {
    margin-bottom: 1rem;
}
.recipe-box .recipe-favourite {
    left: 1rem;
    position: absolute;
}
.recipe-box .no-recipe-image {
    text-align: center;
}
.recipe-box .no-recipe-image i {
    color: #e8e8e8;
    margin-top: 0.5rem;
}
.recipe-box img {
    height: auto;
    width: 100%;
}
.recipe-box a {
    cursor: pointer;
}
#addToFoodDiaryModal {
    overflow-y: scroll;
}
/*#endregion */
.container-with-overlap {
    background-color: #fff;
    border-radius: 1rem 1rem 0 0;
    /*height: 100%;*/
    margin: -4rem 0.5rem 0 0.5rem;
    padding: 1rem;
}
.container-with-overlap.schedule {
    margin-top: -3rem;
}

/*#region Collapsible */
.collapsible {
    /*border-bottom: 1px solid #e8e8e8;*/
    border-top: 1px solid #e8e8e8;
    font-size: 1rem;
    font-weight: 900;
    padding: 1rem 0;
    text-transform: uppercase;
}
.collapsible .col-12 {
    line-height: 1.33;
}
.collapsible i.fal {
    float: right;
    font-size: 1.7rem;
    line-height: 0.73;
    position: absolute;
    right: 1rem;
    top: 0.15rem;
}
.collapsible-content {
    background-color: #f2f2f2;
    display: none;
}
.clients-container .collapsible-content,
.schedules-container .collapsible-content {
    background-color: #f4f9f4;
    margin-bottom: 1rem;
    padding-bottom: 0;
}
.collapsible-content .header {
    line-height: 1.2;
}
.collapsible-content .recipe-ingredient-row,
.collapsible-content .recipe-category-row,
.collapsible-content .training-exercise-category-row {
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    padding: 1rem;
    width: 100%;
}
.collapsible-content .client-row,
.collapsible-content .meal-schedule-row {
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    padding: 1rem 0.5rem;
    width: 100%;
}
.collapsible-content .meal-schedule-name a {
    color: #272727;
}
.collapsible-content .recipe-category-row {
    padding: 0 1rem;
}
.collapsible-content .header .col-1,
.collapsible-content .recipe-ingredient-row .col-1 {
    flex: 0 0 5%;
    max-width: 5%;
}
.collapsible-content .header .col-3,
.collapsible-content .recipe-ingredient-row .col-3 {
    flex: 0 0 15%;
    max-width: 15%;
    padding-left: 0.5rem;
    padding-right: 0;
    text-align: right;
}
.collapsible-content .header .col-4,
.collapsible-content .recipe-ingredient-row .col-4 {
    flex: 0 0 55%;
    max-width: 55%;
    padding-left: 0.5rem;
    padding-right: 0;
}
.collapsible-content .row {
    background-color: #eee;
    width: 100%;
}
.collapsible-content :not(.meal-schedule-row) .col-12 {
    padding: 1rem;
    width: 100%;
}
.collapsible-content h6 {
    font-weight: bold;
    text-transform: uppercase;
}
.collapsible-content .form-check {
    align-items: center;
    display: flex;
    position: inherit;
}
.collapsible-content .form-check-input {
    height: 1rem;
    margin-top: 0 !important;
    width: 1rem;
}
.collapsible-content .form-check-label {
    margin-left: 1rem;
    margin-top: 0 !important;
    padding: 0.25rem 0;
}
.collapsible-content .header,
#addIngredientsModal .row.header {
    color: #272727;
    display: flex;
    font-size: 60%;
    font-weight: bold;
    padding: 1rem 1rem 0 1rem;
    text-transform: uppercase;
    width: 100%;
}
.collapsible-content .recipe-info {
    color: #666;
    display: block;
    font-size: 70%;
}
/*#endregion */

#recipe-ingredients .header .col-1,
#recipe-ingredients .drag-col {
    padding: 0;
}
#recipe-ingredients .action-col {
    color: #d25f5f;
    flex: 0 0 15%;
    font-size: 1.7rem;
    line-height: 0.73;
    max-width: 15%;
    padding: 0;
    text-align: center;
}

.modal .form-control[name="AddFoodAmount"],
.modal .form-control[name="AddFoodUnit"] {
    padding: 0.375rem 0.25rem;
}

div.schedule-table .table-row.header {
    background-color: #fff;
    color: #000;
    font-size: 0.6rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    line-height: 2;
    text-transform: uppercase;
}
div.schedule-table .sub-header {
    background-color: #f1f9f2 !important;
    color: #272727;
    font-size: 0.8rem;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.43;
    padding-bottom: 0.8rem;
    padding-top: 0.8rem;
}
div.schedule-table .sub-header a {
    color: #272727;
}
div.schedule-table .sub-header a.edit-meal {
    cursor: pointer;
    float: right;
    margin-right: 55%;
}
div.schedule-table .sub-header a.edit-meal i {
    color: var(--nd-light-green);
    cursor: pointer;
    font-size: 1rem;
}
div.schedule-table .schedule-item {
    background-color: #fff !important;
    color: #272727;
    font-size: 0.8rem;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.43;
    padding-bottom: 0;
}
div#meal-schedule .schedule-item a {
    color: var(--nd-dark-green);
}
div.schedule-table .schedule-item > div {
    border-bottom: 1px solid #f4f4f4;
    padding-bottom: 0.5rem;
}
div.schedule-table .schedule-item > div:first-child {
    border: 0;
}
div.schedule-table .totals {
    background-color: #fff !important;
    color: #272727;
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: normal;
    line-height: 1.43;
    margin-bottom: 2rem;
    padding-bottom: 0;
}
#saveStandardsForRIForMealScheduleForm h3 {
    color: #000;
    font-size: 1.2rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.5px;
    line-height: 1.27;
    text-transform: uppercase;
}
#saveStandardsForRIForMealScheduleForm select {
    margin-bottom: 1.1rem;
    width: auto;
}
/*#region Print of MealSchedule */
body.print table#meal-schedule,
body.print table#meal-schedule th,
body.print table#meal-schedule td {
    border: 0 !important;
}
body.print table#meal-schedule > tbody > tr:nth-of-type(odd) {
    background-color: #ecece9 !important;
}
body.print .btn-group {
    display: none;
}
body.print #piechart-nutrition li.legend-protein::before {
    border-left: 10px solid #8e67b8;
    content: '';
}
body.print li.legend-protein span.dot-protein {
    height: 1rem;
    width: 0.5rem;
}
/* second color in a sequence */
body.print #piechart-nutrition li.legend-fett::before {
    border-left: 10px solid #feab28;
    content: '';
}
body.print li.legend-fett .dot-fett {
    height: 1rem;
    width: 0.5rem;
}
/* third color in a sequence */
body.print #piechart-nutrition li.legend-kolhydrater::before {
    border-left: 10px solid #45a067;
    content: '';
}
body.print li.legend-kolhydrater .dot-kolhydrater,
body.print li.legend-alkohol .dot-alkohol,
body.print li.legend-ratio .dot-ratio {
    height: 1rem;
    width: 0.5rem;
}
body.print #piechart-nutrition li.legend-ratio::before {
    border-left: 10px solid #eee;
    content: '';
}
body.print li.legend-kolhydrater .dot-ratio {
    height: 1rem;
    width: 0.5rem;
}
body.print table#meal-schedule {
    page-break-after: auto;
}

body.hide-diagrams #row-diagrams {
    display: none !important;
}
body.print .keep-together-in-print {
    page-break-inside: avoid;
}
body.print .diagram-all-nutritients-container {
    color: #000;
}
body.print .diagram-all-nutritients-container a {
    display: none;
}
/*#endregion */
/*#region Print of ExerciseSchedule */
body.print table#exercise-schedule,
body.print table#exercise-schedule th,
body.print table#exercise-schedule td {
    border: 0 !important;
}
body.print table#exercise-schedule > tbody > tr:nth-of-type(odd) {
    background-color: #ecece9 !important;
}
/*#endregion */

/*#region Print of TrainingProgram */
body.print .training-program-exercise-list-item {
    page-break-inside: avoid;
}
/*#endregion */

/*#region Print of Summary */
body.print.summary .pie .center-block .col-md-6 {
    float: left;
    width: 50% !important;
}

body.print.summary .main-diagram-container {
    page-break-inside: avoid;
}

body.print.summary {
    -webkit-print-color-adjust: exact;
}
/*#endregion */

/*#region Print of DayOverview */
body.print table#dayoverview,
body.print table#dayoverview th,
body.print table#dayoverview td,
body.print table#dayoverview-notes,
body.print table#dayoverview-notes th,
body.print table#dayoverview-notes td {
    border: 0 !important;
    padding: 4px;
}

    body.print table#dayoverview > tbody > tr:nth-of-type(odd) {
        background-color: #ecece9 !important;
    }

body.print.dayoverview {
    font-size: 11px;
}

body.print .btn-group {
    display: none;
}
/*#endregion */

/*#region Print of Recipe */
body.print .recipe-image {
    max-height: 250px;
    max-width: 300px;
    width: auto;
}

body.print.recipe table,
body.print.recipe table tr td,
body.print.recipe table tr th {
    page-break-inside: avoid;
}
/*#endregion */

#main-grid.edit-client .form-check-input[type=radio] + label {
    display: block;
}

.client-action-buttons {
    justify-content: flex-end;
}
.client-action-buttons button,
.client-action-buttons a {
    margin-left: 1rem;
}
.btn-group.exercise-selection-tabs button {
    margin-right: 1rem;
}
.view-mode .preview img {
    display: none;
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    z-index: 1;
}
.view-mode .preview img.active {
    display: inline;
    z-index: 3;
}
.view-mode .exercise-image, 
.view-mode .focus-image {
    height: 100%;
    width: 100%;
}
table.nutrients-table td:first-child {
    width: 30%;
}
table.nutrients-table .form-control {
    width: auto;
}

.div-table .header {
    background-color: #f1f9f2;
    font-weight: 900;
    padding: 1rem 0;
}
body.print .div-table .header {
    background-color: #b8d15b;
}
.div-table .table-row {
    padding: 0.5rem;
}
.div-table .table-row:nth-of-type(even) {
    background-color: #f9f9f9;
}
.div-table .table-row select {
    padding: 0.5rem;
}
body.print .div-table .table-row.row[id^=meal],
body.print .div-table .table-row.row[id^=snack] {
    background-color: #e0ebb7;
    font-weight: 700;
}
.div-table.foods-table .table-row button {
    padding: 0;
    vertical-align: middle;
}
.search-results .list-group-item,
#search-results-food .list-group-item  {
    cursor: pointer;
}
.nutrient-table-header {
/*    background-color: #f1f9f2;*/
    font-weight: 900;
    padding: 1rem 0;
}
#main-grid .nutrient-table-header div {
    padding: 0;
}
.nutrient-row-item:not(.nutrient-table-header) {
    padding: 0.25rem 0;
}
/*.nutrient-row-item:nth-of-type(even) {
    background-color: #f9f9f9;
}*/
#main-grid .nutrient-row-item input.form-control,
#main-grid .nutrient-row-item label,
#main-grid .nutrient-table-header div {
    display: inline-block;
    margin-bottom: 0;
}
#main-grid .nutrient-row-item label {
    font-weight: normal;
}

#saveStandardsForRIForMealScheduleForm {
    align-items: center;
}
#saveStandardsForRIForMealScheduleForm select {
    margin-bottom: 0 !important;
}

.div-table .fooddiary-meal-tools {
    padding: 0;
}
.div-table .fooddiary-meal-tools button {
    padding: 0;
}

/*#region Colours for dots used for client's activies */
.fa-circle.weight {
    color: #8e67b8;
}

.fa-circle.exercisediary {
    color: #337ab7;
}

.fa-circle.fooddiary {
    color: #46a168;
}

.fa-circle.training {
    color: #ff762e;
}

.fa-circle.no-new-entries {
    color: #ccc;
}

.fa-circle.weight,
.fa-circle.exercisediary,
.fa-circle.fooddiary,
.fa-circle.training,
.fa-circle.no-new-entries {
    margin: 0 2px 0 0 !important;
    padding: 0 !important;
}
/*#endregion */

/*#region As Client - Summary */
.summary-data .meal-name {
    background-color: #337ab7 !important;
    color: #fff;
}
.summary-data .total {
    background-color: #d9edf7 !important;
}
.summary-data .exercise {
    background-color: #f2dede !important;
}
.summary-data .blood-sugar {
    background-color: #fcf8e3 !important;
}
.summary-data .total-intake {
    background-color: #dff0d8 !important;
}
.summary-data .table-row.total-consumed {
    background-color: #f2dede !important;
}
/*#endregion */

.as-client-diagram-area {
    background-color: #f1f9f2;
}
.as-client-diagram-area .diary-diagrams {
    background-color: #f1f9f2;
    display: block;
}
.as-client-diagram-area .daily-circle-diagram  {
    height: 17rem;
}
.as-client-diagram-area .daily-circle-diagram,
.as-client-diagram-area .info-protein-fat-carbo {
    background-color: #f1f9f2;
    color: #2d2d2d;
}
.as-client-diagram-area .info-protein-fat-carbo .bar {
    background-color: var(--nd-light-green);
    opacity: 0.5;
}
.as-client-diagram-area .info-protein-fat-carbo .bar.filled {
    opacity: 1;
}
.as-client-diagram-area #row-diagrams .main-diagram-container,
.as-client-diagram-area #row-diagrams .main-diagram-container h3 {
    color: #2d2d2d;
}
#main-as-client-grid .existing-meals-buttons{
    background-color: #fff;
    padding: 1.5rem 0;
}
#main-as-client-grid .existing-meals-summary {
    color: #272727;
}
#main-as-client-grid .search-form {
    background-color: #fff;
}
#main-as-client-grid #week-days .nav-item.active:not(.calendar):before {
    left: calc(50% - 0.5rem);
}
.new-action-menu-top .client-status-circles {
    margin-top: 1rem;
    text-align: left;
}
.desktop-left-menu .clients {
    margin-top: 1.5rem;
}
.fa-circle.weight,
.fa-circle.exercisediary,
.fa-circle.fooddiary,
.fa-circle.training,
.fa-circle.no-new-entries {
    border: 0;
    border-radius: 0;
    font-size: 0.8rem;
    margin: 0 2px 0 0 !important;
    padding: 0 !important;
}
.client-controller .new-action-menu-top p {
    margin: 0;
    width: 100%;
}
.adminshow-action .show-recipe h4 {
    margin-bottom: 0.5rem;
    margin-top: 1rem;
    padding-bottom: 0.5rem;
}
.adminshow-action .show-recipe .recipe-servings-info {
    font-weight: bold;
    margin-top: 1rem;
}


/*#region Fixes for the bottom containers on ExerciseDiaryAsClient and FoodDiaryAsClient */
.admin-start-page-left {
    padding: 4rem 5% 3rem 5%;
}
.admin-start-page-left .welcome-back {
    color: #000;
    font-size: 0.9rem;
    line-height: 1.25;
    margin-bottom: 0;
}
.admin-start-page-left h2 {
    border-bottom: solid 1px #e8e8e8;
    color: #000;
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1.27;
    letter-spacing: 0.5px;
    padding-bottom: 2rem;
    text-align: left;
}
.admin-start-page-left .admin-start-page-button {
    border-bottom: solid 1px #e8e8e8;
    display: none;
    padding-bottom: 0.25rem;
    padding-top: 1rem;
}
.admin-start-page-left .admin-start-page-button h3 {
    color: #000;
    font-size: 1rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: 900;
    letter-spacing: normal;
    line-height: 1.33;
    margin-bottom: 0;
    text-transform: uppercase;
}
.admin-start-page-left .admin-start-page-button .col-8 p {
    color: rgba(39, 39, 39, 0.39);
    font-size: 0.9rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.38;
}
.admin-start-page-left .admin-start-page-button .col-4 {
    padding-top: 1.1rem;
}
.admin-start-page-left .admin-start-page-button a {
    border: solid 3px rgba(157, 157, 157, 0.2);
    border-radius: 1.5rem;
    display: inline-block;
    height: 3rem;
    width: 3rem;
}
.admin-start-page-left .admin-start-page-button i {
    color: #2d2d2d;
    font-size: 2rem;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.25;
    letter-spacing: 1px;
    padding-right: 0.8rem;
    padding-top: 0.2rem;
}
.admin-start-page-right {
    background-color: #f1f9f2;
    padding-top: 4rem;
}
.admin-start-page-right h2 {
    color: #000;
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1.27;
    letter-spacing: 0.5px;
    text-align: center;
    text-transform: uppercase;
}
.admin-start-page-right p {
    color: #272727;
    font-size: 0.85rem;
    font-weight: normal;
    line-height: 1.27;
    letter-spacing: normal;
    text-align: center;
}
.admin-start-page-right p.icon {
    color: var(--nd-light-green);
}
.admin-start-page-right p.intro {
    padding: 0 25%;
}
.admin-start-page-right p a {
    color: #d25f5f;
    font-weight: bold;
}
.admin-start-page-right p .manual-button {
    background-color: transparent;
    border: solid 1px #000;
    border-radius: 2rem;
    color: #000;
    display: inline-block;
    font-weight: normal;
    margin-bottom: 2rem;
    padding: 0.65rem 1.1rem 0.65rem 1.7rem;
}
.as-client-diagram-area .daily-circle-diagram {
    margin-bottom: 3rem;
}
#main-as-client-grid .add-activities-container {
}
#main-as-client-grid #meal-contents-details-container,
#main-as-client-grid #activity-contents-details-container {
    background-color: #fff;
    box-shadow: 0px 20px 40px -10px rgb(0 0 0 / 40%);
    display: none;
    height: auto;
    overflow-y: visible;
    padding: 0 0.5rem;
    position: absolute;
    width: 100%;
    top: 10rem;
    z-index: 1029;
}
#main-as-client-grid #meal-contents-summary-container,
#main-as-client-grid #activity-contents-summary-container {
    bottom: initial;
    display: flex;
    justify-content: space-between;
    left: initial;
    padding: 1rem;
    position: initial;
    right: initial;
    z-index: 1028;
}
.as-client-diagram-area .circles {
    margin-top: 1rem;
}
.as-client-diagram-area .circles .info .number,
.as-client-diagram-area .circles .info .text {
    position: absolute;
}
@media only screen and (min-width: 768px) {
    .admin-start-page-left .admin-start-page-button {
        display: flex;
    }
    .admin-start-page-left .welcome-back + h2 + .pt-4,
    .admin-start-page-left .welcome-back + h2 + .pt-4 + ul,
    .admin-start-page-left .welcome-back + h2 + .pt-4 + ul + .pt-2  {
        display: none;
    }
}
/*#endregion */

/*#region Button groups in Summary */
#btn-group-periods {
    background-color: #fff;
    border-radius: 1rem;
}
#btn-group-periods .btn {
    border: 0;
    color: #528653;
    font-size: 0.7rem;
    line-height: 1.69;
    padding: 0.6rem 1rem;
    text-transform: uppercase;
}
#btn-group-periods .btn.btn-active {
    background-color: var(--nd-dark-green);
    border-radius: 1rem;
    color: #fff;
}
.print-button {
    color: #2d2d2d;
    cursor: pointer;
    display: inline-block;
    font-size: 0.7rem;
    margin-bottom: 1.6rem;
}
.print-button i {
    color: #272727;
}
/*#endregion */
.action-buttons-row {
    align-items: center;
    color: #2d2d2d;
    display: flex;
    font-size: 1.1rem;
    justify-content: space-evenly;
    padding-bottom: 3rem;
    padding-top: 1.3rem;
}
.action-buttons-row a,
.action-buttons-row button {
    color: #2d2d2d;
    text-align: center;
}
.summary-action .summary-data #row-diagrams,
.mealschedule-controller.editfoods-action #row-diagrams {
    display: block;
}
.mealschedule-controller.editfoods-action .favourites.tab-bar-tab-content {
    display: none;
}
.summary-action .summary-data #row-diagrams .main-diagram-container,
.summary-action .summary-data #row-diagrams .main-diagram-container h3 {
    color: #000;
}
.fooddiaryasclient-action #btn-group-diagram-chooser-container1,
.fooddiaryasclient-action #btn-group-diagram-chooser-container2,
.fooddiaryasclient-action #btn-group-diagram-chooser-container3,
.editfoodsasclient-action #btn-group-diagram-chooser-container1,
.editfoodsasclient-action #btn-group-diagram-chooser-container2,
.editfoodsasclient-action #btn-group-diagram-chooser-container3,
.diaryasclient-action #btn-group-diagram-chooser-container1,
.diaryasclient-action #btn-group-diagram-chooser-container2,
.diaryasclient-action #btn-group-diagram-chooser-container3,
.nutritionalcalculation-action #btn-group-diagram-chooser-container1,
.nutritionalcalculation-action #btn-group-diagram-chooser-container2,
.nutritionalcalculation-action #btn-group-diagram-chooser-container3,
#btn-group-diagram-chooser-container1,
#btn-group-diagram-chooser-container2,
#btn-group-diagram-chooser-container3 {
    float: none !important;
    position: absolute;
    right: 1rem;
}
.swapfood-action #btn-group-diagram-chooser-container1,
.swapfood-action #btn-group-diagram-chooser-container2,
.swapfood-action #btn-group-diagram-chooser-container3 {
    justify-self: center;
    right: auto;
}
.summary-action .change-diagram-group,
.editfoodsasclient-action .change-diagram-group,
.fooddiaryasclient-action .change-diagram-group,
.diaryasclient-action .change-diagram-group,
.nutritionalcalculation-action .change-diagram-group,
.editfoodsnc-action .change-diagram-group,
.swapfood-action .change-diagram-group {
    display: flex;
    margin-bottom: 1.6rem;
    position: static !important;
}
.summary-action .change-diagram-group h3,
.editfoodsasclient-action .change-diagram-group h3,
.fooddiaryasclient-action .change-diagram-group h3,
.diaryasclient-action .change-diagram-group h3,
.nutritionalcalculation-action .change-diagram-group h3,
.editfoodsnc-action .change-diagram-group h3,
.swapfood-action .main-diagram-container > .diagram-container > h3 {
    color: #000;
    flex: 1 1 auto;
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    line-height: 1.27;
    margin-bottom: 0;
    text-transform: uppercase;
}
.editfoodsasclient-action .change-diagram-group h3 {
    padding-left: 1.5rem;
}
.summary-action .change-diagram-button,
.editfoodsasclient-action .change-diagram-button,
.fooddiaryasclient-action .change-diagram-button,
.diaryasclient-action .change-diagram-button,
.nutritionalcalculation-action .change-diagram-button,
.editfoodsnc-action .change-diagram-button,
.swapfood-action .change-diagram-button {
    align-self: center;
    color: #272727;
    flex: 1 0 auto;
    font-size: 0.65rem;
    line-height: 1;
    text-align: right;
}
.summary-action .change-diagram-button i,
.editfoodsasclient-action .change-diagram-button i,
.fooddiaryasclient-action .change-diagram-button i,
.diaryasclient-action .change-diagram-button i,
.nutritionalcalculation-action .change-diagram-button i,
.editfoodsnc-action .change-diagram-button i,
.swapfood-action .change-diagram-button i {
    color: #272727;
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.5;
    margin-left: 0.5rem;
    vertical-align: middle;
}
.summary-action .main-diagram-container,
.swapfood-action .main-diagram-container {
    margin-left: -1rem;
    margin-top: 0 !important;
}
.summary-action .main-diagram-container > .diagram-container:not(.pie),
.swapfood-action .main-diagram-container > .diagram-container:not(.pie) {
    padding-left: 0;
}
.summary-action .main-diagram-container h3,
.editfoodsasclient-action .main-diagram-container h3,
.fooddiaryasclient-action .main-diagram-container h3,
.nutritionalcalculation-action .main-diagram-container h3,
.editfoodsnc-action .main-diagram-container h3,
.diaryasclient-action .main-diagram-container h3 {
    display: none;
}
.fooddiaryasclient-action #btn-group-diagram-chooser-container1,
.editfoodsasclient-action #btn-group-diagram-chooser-container1,
.diaryasclient-action #btn-group-diagram-chooser-container1,
.nutritionalcalculation-action #btn-group-diagram-chooser-container1,
#btn-group-diagram-chooser-container1 {
    z-index: 12;
}
.nutritionalcalculation-action #btn-group-diagram-chooser-container1,
.nutritionalcalculation-action #btn-group-diagram-chooser-container2,
.nutritionalcalculation-action #btn-group-diagram-chooser-container3 {
    top: 0.75rem;
}
.nutritionalcalculation-action #btn-group-diagram-chooser-container2,
.fooddiaryasclient-action #btn-group-diagram-chooser-container2,
.editfoodsasclient-action #btn-group-diagram-chooser-container2,
.diaryasclient-action #btn-group-diagram-chooser-container2,
.nutritionalcalculation-action #btn-group-diagram-chooser-container2,
#btn-group-diagram-chooser-container2 {
    z-index: 11;
}
.fooddiaryasclient-action #btn-group-diagram-chooser-container3,
.editfoodsasclient-action #btn-group-diagram-chooser-container3,
.diaryasclient-action #btn-group-diagram-chooser-container3,
.nutritionalcalculation-action #btn-group-diagram-chooser-container3,
#btn-group-diagram-chooser-container3 {
    z-index: 10;
}
.fooddiaryasclient-action #btn-group-diagram-chooser-container2,
.fooddiaryasclient-action #btn-group-diagram-chooser-container3,
.editfoodsasclient-action #btn-group-diagram-chooser-container2,
.editfoodsasclient-action #btn-group-diagram-chooser-container3,
.diaryasclient-action #btn-group-diagram-chooser-container2,
.diaryasclient-action #btn-group-diagram-chooser-container3,
body:not(.nutritionalcalculation-action) #btn-group-diagram-chooser-container2,
body:not(.nutritionalcalculation-action) #btn-group-diagram-chooser-container3 {
    margin-top: 1rem;
}
.summary-action #btn-group-diagram-chooser-container1 ul,
.summary-action #btn-group-diagram-chooser-container2 ul,
.summary-action #btn-group-diagram-chooser-container3 ul,
.fooddiaryasclient-action #btn-group-diagram-chooser-container1 ul,
.fooddiaryasclient-action #btn-group-diagram-chooser-container2 ul,
.fooddiaryasclient-action #btn-group-diagram-chooser-container3 ul,
.editfoodsasclient-action #btn-group-diagram-chooser-container1 ul,
.editfoodsasclient-action #btn-group-diagram-chooser-container2 ul,
.editfoodsasclient-action #btn-group-diagram-chooser-container3 ul,
.diaryasclient-action #btn-group-diagram-chooser-container1 ul,
.diaryasclient-action #btn-group-diagram-chooser-container2 ul,
.diaryasclient-action #btn-group-diagram-chooser-container3 ul,
.nutritionalcalculation-action #btn-group-diagram-chooser-container1 ul,
.nutritionalcalculation-action #btn-group-diagram-chooser-container2 ul,
.nutritionalcalculation-action #btn-group-diagram-chooser-container3 ul,
#btn-group-diagram-chooser-container1 ul,
#btn-group-diagram-chooser-container2 ul,
#btn-group-diagram-chooser-container3 ul{
    min-width: 20rem;
    padding: 0.5rem;
}

#main-as-client-grid .as-client-diagram-area #activity-contents-details-container {
    background-color: inherit;
    box-shadow: none;
    display: block;
    position: static;
    top: auto; 
}
#main-as-client-grid .as-client-diagram-area #meal-contents-details-container {
    background-color: inherit;
    box-shadow: none;
    display: block;
    position: static;
    top: auto;
}
.nutritionalcalculation-action .desktop-left-menu {
    background-color: #fff;
}
.nutritionalcalculation-action #main-grid {
    background-color: #f1f9f2;
}
.nutritionalcalculationcompare-action #desktop-main-area {
    margin-left: 5%;
    margin-right: 5%;
}
.mealschedule-controller .diagram-all-nutritients-container {
    color: #000;
}
.all-nutrients-table.full-width {
    width: 100%;
}
.all-nutrients-table.full-width th, 
.all-nutrients-table.full-width td {
    padding-right: 0.5rem;
}
.all-nutrients-select-row {
    display: none;
}
@media only screen and (max-width: 767px) {
    .all-nutrients-table thead tr th:nth-child(3),
    .all-nutrients-table tbody tr td:nth-child(3),
    .all-nutrients-table tfoot tr th:nth-child(3),
    .all-nutrients-table thead tr th:nth-child(4),
    .all-nutrients-table tbody tr td:nth-child(4),
    .all-nutrients-table tfoot tr th:nth-child(4),
    .all-nutrients-table thead tr th:nth-child(5),
    .all-nutrients-table tbody tr td:nth-child(5),
    .all-nutrients-table tfoot tr th:nth-child(5),
    .all-nutrients-table thead tr th:nth-child(6),
    .all-nutrients-table tbody tr td:nth-child(6),
    .all-nutrients-table tfoot tr th:nth-child(6) {
        display: none !important;
    }
}
body.print .all-nutrients-table thead tr th:nth-child(3),
body.print .all-nutrients-table tbody tr td:nth-child(3),
body.print .all-nutrients-table tfoot tr th:nth-child(3),
body.print .all-nutrients-table thead tr th:nth-child(4),
body.print .all-nutrients-table tbody tr td:nth-child(4),
body.print .all-nutrients-table tfoot tr th:nth-child(4),
body.print .all-nutrients-table thead tr th:nth-child(5),
body.print .all-nutrients-table tbody tr td:nth-child(5),
body.print .all-nutrients-table tfoot tr th:nth-child(5),
body.print .all-nutrients-table thead tr th:nth-child(6),
body.print .all-nutrients-table tbody tr td:nth-child(6),
body.print .all-nutrients-table tfoot tr th:nth-child(6) {
    display: none !important;
}
.cta.mini.nc {
    background-color: #f3f8f3;
    border: 0;
    border-radius: 1.2rem;
    color: #528653;
    font-size: 0.7rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.69;
    padding-left: 5%;
    padding-right: 5%;
    text-align: center;
    white-space: nowrap;
}
.cta.mini.nc.primary-nc {
    background-color: var(--nd-dark-green);
    color: #fff;
}
.nutritionalcalculation-action h3,
.nutritionalcalculationcompare-action h3 {
    color: #2d2d2d;
    font-size: 1.2rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.5px;
    line-height: 1.27;
    margin-bottom: 1rem;
    text-transform: uppercase;
}
.nutritionalcalculation-action .div-table .table-row,
.nutritionalcalculationcompare-action .div-table .table-row {
    background-color: #fff;
    padding-left: 0;
    padding-right: 0;
}
.nutritionalcalculation-action .div-table .table-row.meal-food-row,
.nutritionalcalculationcompare-action .div-table .table-row.meal-food-row {
    color: #272727;
    font-size: 0.8rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.43;
}
.nutritionalcalculation-action .table-row.header,
.nutritionalcalculationcompare-action .table-row.header {
    color: #272727;
    font-size: 0.6rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: bold;
    letter-spacing: normal;
    line-height: 1.2;
    text-transform: uppercase;
}
.nutritionalcalculation-action .div-table .meal-header,
.nutritionalcalculationcompare-action .div-table .meal-header {
    border-bottom: 1px solid #e8e8e8;
    margin-left: 0;
    margin-right: 0;
}
.nutritionalcalculation-action .div-table .breakfast-colour,
.nutritionalcalculation-action .div-table .lunch-colour,
.nutritionalcalculation-action .div-table .dinner-colour,
.nutritionalcalculation-action .div-table .snack-colour,
.nutritionalcalculationcompare-action .div-table .breakfast-colour,
.nutritionalcalculationcompare-action .div-table .lunch-colour,
.nutritionalcalculationcompare-action .div-table .dinner-colour,
.nutritionalcalculationcompare-action .div-table .snack-colour {
    padding-left: 0;
    padding-right: 0;
}
.nutritionalcalculation-action .div-table .meal-header a,
.nutritionalcalculationcompare-action .div-table .meal-header a {
    color: var(--nd-dark-green);
    display: flex;
    font-size: 1rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    justify-content: space-between;
    letter-spacing: normal;
    line-height: 1.33;
}
.nutritionalcalculation-action .div-table .meal-header a i,
.nutritionalcalculationcompare-action .div-table .meal-header a i {
    color: var(--nd-light-green);
    font-size: 1.7rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: 300;
    letter-spacing: normal;
    line-height: 0.73;
    vertical-align: middle;
}
.nutritionalcalculation-action .div-table .meal-summary,
.nutritionalcalculationcompare-action .div-table .meal-summary {
    color: #272727;
    font-size: 0.8rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: bold;
    letter-spacing: normal;
    line-height: 1.43;
    margin-bottom: 2rem;
}
select.tighter {
    border: 1px solid #cfcfcf;
    border-radius: 0.25rem;
    padding: 0.6rem;
    width: auto;
}
.nutritionalcalculation-action .action-buttons {
    display: flex;
    justify-content: space-between;
}
.nutritionalcalculation-action .action-buttons .cta.mini{
    padding: 0.7rem 1rem;
}
.nutritionalcalculation-action .action-buttons i {
    margin-left: 1rem;
}
.nutritionalcalculation-action #row-diagrams,
#main-as-client-grid .as-client-diagram-area #row-diagrams {
    background-color: inherit;
}
.nutritionalcalculation-action #row-diagrams::before,
#main-as-client-grid .as-client-diagram-area #row-diagrams::before {
    border: 0;
    content: none;
}
.nutritionalcalculation-action #row-diagrams h3,
.nutritionalcalculationcompare-action #row-diagrams h3,
.nutritionalcalculationcompare-action .main-diagram-container h3,
.mealschedule-controller.editfoods-action #row-diagrams h3,
.mealschedule-controller.showinfoforfood-action #row-diagrams h3 {
    color: #000;
}
.nutritionalcalculationcompare-action .main-diagram-container h3,
.mealschedule-controller.editfoods-action #row-diagrams h3,
.mealschedule-controller.showinfoforfood-action #row-diagrams h3 {
    font-size: 0.9rem;
    font-weight: 900;
    padding: 1rem 1rem 0.5rem 1rem;
    text-transform: uppercase;
}
.nutritionalcalculation-action .total-text,
.nutritionalcalculationcompare-action .total-text {
    color: #000;
    font-size: 1rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: 900;
    letter-spacing: normal;
    line-height: 1.33;
    margin-bottom: 4rem;
}
.search-form.rounded-border-white {
    background-color: #fff;
    padding: 0;
}
.search-form.rounded-border-white #SearchName {
    margin-bottom: 0;
}
#main-as-client-grid .search-form input,
.search-form.rounded-border-white input {
    border: 1px solid #ccc;
}
#main-as-client-grid .search-form .input-group-append,
.search-form.rounded-border-white .input-group-append {
    border: 1px solid #ccc;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
}
.mealschedule-controller.editfoods-action .own-food-name {
    cursor: pointer;
}
.mealschedule-controller #meal-schedule.div-table .fa-edit {
    cursor: pointer;
    padding-left: 1rem;
}
.mealschedule-controller #meal-schedule.div-table .fa-bars {
    cursor: grab;
}
/*#region NutritionalCalculation */
#save-as-meal-schedule {
    display: none;
}

#hidden-diagrams,
#hidden-diagrams-1,
#hidden-diagrams-2 {
    display: none;
}

.delete-nutritional-calculation-form {
    display: inline-block;
}
.editfoodsnc-action #enter-food-details,
.mealschedule-controller.editfoods-action #enter-food-details,
.mealschedule-controller.editfoods-action #own-foods,
.mealschedule-controller.editfoods-action #favourites {
    display: none;
}
.editfoodsnc-action #selected-foods,
.mealschedule-controller.editfoods-action #selected-foods,
.mealschedule-controller.showinfoforfood-action #selected-foods,
.mealschedule-controller.showinfoforfoodnc-action #selected-foods {
    padding: 1rem;
}
.editfoodsnc-action .edit-meal-food-link,
.editfoodsnc-action .edit-snack-food-link,
.mealschedule-controller.editfoods-action .edit-meal-food-link,
.mealschedule-controller.editfoods-action .edit-snack-food-link {
    cursor: pointer;
}
.mealschedule-controller .fooddiary-meal-tools button {
    vertical-align: baseline;
}
.mealschedule-controller.editfoodsnc-action #selected-foods #colselector,
.mealschedule-controller.editfoods-action #selected-foods #colselector {
    padding: 0;
}
.mealschedule-controller.editfoodsnc-action #selected-foods .table-row:not(.header),
.mealschedule-controller.editfoods-action #selected-foods .table-row:not(.header) {
    color: #272727;
    font-size: 0.8rem;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.43;
}
.mealschedule-controller.editfoodsnc-action #selected-foods .fooddiary-meal-tools i,
.mealschedule-controller.editfoods-action #selected-foods .fooddiary-meal-tools i {
    font-size: 1rem;
}
table.shopping-list th {
    border: 0;
}
body.shopping-list .show-schedule-container {
    margin-bottom: 5rem;
}
/*#endregion */


#main-area-row {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 5rem;
}
.coloured-background-1 {
    background-color: #f1f9f2;
}
@media(min-width: 768px) {
    #left-grid {
        padding-left: 5%;
        padding-top: 3rem;
    }
    #left-grid h1,
    .large-page-title {
        color: #000;
        font-size: 1.7rem;
        font-stretch: normal;
        font-style: normal;
        font-weight: 500;
        letter-spacing: 1.2px;
        margin-bottom: 1.5rem;
        text-transform: uppercase;
    }
    #left-grid .summary-section-header {
        margin-top: 1.5rem;
    }
    #left-grid .summary-section-header i {
        color: var(--nd-purple-dark);
        font-size: 2rem;
        padding-left: .35rem;
        padding-bottom: .2rem;
    }
    #left-grid .summary-section-header h3 {
        color: #000;
        font-family: HKGrotesk, Helvetica, Arial, sans-serif;
        font-size: 1rem;
        font-stretch: normal;
        font-style: normal;
        font-weight: 900;
        letter-spacing: normal;
        line-height: 1.33;
        margin-bottom: 0;
        text-transform: uppercase;
    }
    #left-grid .existing-meals-buttons,
    #replaced-meals .existing-meals-buttons {
        background: none;
        padding-left: 0;
    }
    #left-grid .existing-meals-buttons .existing-meal-button-upper,
    #replaced-meals .existing-meals-buttons .existing-meal-button-upper {
        padding-right: 1.5rem;
    }
    #left-grid .existing-meal-button.total,
    #replaced-meals .existing-meal-button.total {
        box-shadow: none;
        border-bottom: 0;
    }
    #right-grid {
        padding: 3rem 3% 2.2rem 4rem;
    }
    .page-header {
        display: none;
    }
    #main-area-row {
        width: 100%;
    }
    body:not(.mobile-client-body) #main-search {
        background: none;
        max-width: 50%;
    }
    #main-search .search-form-field {
        border: 1px solid #ccc;
    }
    #left-grid .date .input-group-addon,
    .title-area .date .input-group-addon {
        background-color: var(--nd-dark-green);
        color: #fff;
        padding: 8px 1rem;
    }
    body:not(.mobile-client-body) .add-recipes-container {
        max-width: 50%;
    }
    body:not(.mobile-client-body) .add-recipes-container #collection-search-results {
        left: 52%;
        position: absolute;
        top: 0;
    }
}

#main-as-client-grid #meal-contents .color-dot {
    display: none;
}

.bodyasclient-action .as-client-diagram-area,
.bodyasclient-action .as-client-diagram-area .line-diagram-row h3,
.bodyasclient-action .as-client-diagram-area .month-year-switch .month,
.bodyasclient-action .as-client-diagram-area .month-year-switch label {
    color: #000;
}
.bodyasclient-action .as-client-diagram-area .line-diagram svg {
    fill: #000;
}
#row-diagrams.row.meal-schedule-diagrams h3 {
    color: #000;
}
#row-diagrams.row.meal-schedule-diagrams .main-diagram-container {
    margin-bottom: 1rem;
}
#row-diagrams.row.meal-schedule-diagrams .main-diagram-container .list-nutrient-per-food,
.nutritionalcalculationcompare-action .diagram-nutrient-per-food-container .list-nutrient-per-food {
    color: #222;
}
.nutritionalcalculationcompare-action .diagram-nutrient-per-food-container .form-control {
    padding: .375rem .75rem;
}
.change-diagram-group {
    cursor: pointer;
}
.change-diagram-button.active i {
    background-color: var(--nd-coral);
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    padding: 0.25rem;
}
.change-diagram-group ul.dropdown-menu {
    background-color: var(--nd-coral);
    border: 0;
    color: #fff;
    margin-top: 0;
}

.change-diagram-group ul.dropdown-menu li a {
    color: #fff;
}

#my-meal-schedules ul.dropdown-menu,
#standard-meal-schedules ul.dropdown-menu,
#my-training-programs ul.dropdown-menu,
#my-surveys ul.dropdown-menu {
    background-color: #efefef;
    padding: 0.5rem;
}

/*#region Print of MealSchedule */
body.print table#meal-schedule,
body.print table#meal-schedule th,
body.print table#meal-schedule td {
    border: 0 !important;
}

    body.print table#meal-schedule > tbody > tr:nth-of-type(odd) {
        background-color: #ecece9 !important;
    }

body.print .btn-group {
    display: none;
}

body.print #piechart-nutrition li.legend-protein::before {
    border-left: 10px solid #d0acda;
    content: '';
}
/* second color in a sequence */
body.print #piechart-nutrition li.legend-fett::before,
body.print #piechart-nutrition li.legend-fat::before {
    border-left: 10px solid #e5c74f;
    content: '';
}
/* third color in a sequence */
body.print #piechart-nutrition li.legend-kolhydrater::before,
body.print #piechart-nutrition li.legend-carbohydrates::before {
    border-left: 10px solid #9bdc88;
    content: '';
}
body.print #piechart-nutrition li.legend-alkohol::before,
body.print #piechart-nutrition li.legend-alcohol::before {
    border-left: 10px solid #e66464;
    content: '';
}
body.print #piechart-nutrition li.legend-ratio::before {
    border-left: 10px solid #eeeeee;
    content: '';
}

body.print table#meal-schedule {
    page-break-after: always;
}

body.hide-diagrams #row-diagrams {
    display: none !important;
}
/*#endregion */

/*#region Print of ExerciseSchedule */
body.print table#exercise-schedule,
body.print table#exercise-schedule th,
body.print table#exercise-schedule td {
    border: 0 !important;
}

    body.print table#exercise-schedule > tbody > tr:nth-of-type(odd) {
        background-color: #ecece9 !important;
    }
/*#endregion */

/*#region Print of TrainingProgram */
body.print .training-program-exercise-list-item {
    page-break-inside: avoid;
}
/*#endregion */

/*#region Print of Summary */
body.print.summary .pie .center-block .col-md-6 {
    float: left;
    width: 50% !important;
}

body.print.summary .main-diagram-container {
    page-break-inside: avoid;
}

body.print.summary {
    -webkit-print-color-adjust: exact;
}
/*#endregion */

/*#region Print of DayOverview */
body.print table#dayoverview,
body.print table#dayoverview th,
body.print table#dayoverview td,
body.print table#dayoverview-notes,
body.print table#dayoverview-notes th,
body.print table#dayoverview-notes td {
    border: 0 !important;
    padding: 4px;
}

body.print table#dayoverview > tbody > tr:nth-of-type(odd) {
    background-color: #ecece9 !important;
}

body.print.dayoverview {
    font-size: 11px;
}

body.print .btn-group {
    display: none;
}
/*#endregion */

/*#region Print of Recipe */
body.print .recipe-image {
    max-height: 250px;
    max-width: 300px;
    width: auto;
}

body.print.recipe table,
body.print.recipe table tr td,
body.print.recipe table tr th {
    page-break-inside: avoid;
}
/*#endregion */
body.print h3,
body.print ul {
    color: #000 !important;
}
body.print #hidden-diagrams .diagram-container {
    display: none !important;
}
body.print .row.keep-together-in-print {
    margin-top: 2rem;
}
body.print .row.keep-together-in-print svg {
    margin-top: 2rem;
}
body.print .two-column-diagram-container .col-6 h3 {
    margin-left: 2.5rem !important;
    text-align: left !important;
}
body.print li.legend-frukost span {
    background-color: #99d1e6 !important;
}
body.print li.legend-lunch span {
    background-color: #fabcbd !important;
}
body.print li.legend-middag span {
    background-color: #9bdc88 !important;
}
body.print li.legend-mellanmal span {
    background-color: #d0acda !important;
}
body.print.summary .list-nutrient-per-food {
    color: #000;
}



/*#region Tiny Search */
.tiny-search {
    position: relative;
}
.tiny-search .search-form-field {
    background: transparent;
    display: none;
    position: absolute;
    right: -0.5rem;
    top: -1rem;
    z-index: 10;
}
.tiny-search .search-form-field.visible {
    background: transparent;
    display: flex;
}
.tiny-search .search-form-field input {
    border-top-left-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;
    font-size: 0.8rem;
    height: 3rem;
}
.tiny-search .search-form-field input.has-results {
    border-bottom-left-radius: 0;
}
.tiny-search .search-form-field span {
    background-color: #528653 !important;
    color: #fff !important;
}
.tiny-search .search-results {
    display: none;
}
.tiny-search .search-results.visible {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin-left: 0.5rem;
    margin-right: 2.5rem;
    margin-top: 0.5rem;
    padding-left: 0;
}
.tiny-search .search-results .list-group-item.food-hidden {
    background-color: #eee;
}
.tiny-search .search-results .list-group-item.food-hidden i {
    margin-right: 0.5rem;
}
.tiny-search .search-results .list-group-item a {
    color: #000;
}
/*#endregion */

#save-as-template-button {
    float: right;
}
#save-as-template-button:focus {
    outline: 0;
}
#save-as-template-button i {
    margin-left: 1rem;
}


.mealschedule-controller.editfoods-action #own-foods .search-results {
    display: none;
}
.mealschedule-controller.editfoods-action #own-foods .search-results.visible {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin-left: 0.5rem;
    margin-right: 2.5rem;
    margin-top: 0.5rem;
    padding-left: 0;
}
.mealschedule-controller.editfoods-action #own-foods .search-results .list-group-item a {
    color: #000;
}

/*#region SpecialReport */
#SpecialReportForm {
    display: flex;
}
#SpecialReportForm select[name="ClientIds[]"] {
    background-image: none;
}
#SpecialReportForm select[name="ReportType"] {
    padding: 0 0.5rem;
}
/*#endregion */

/*#region Basic Data Form (in Client Create/Edit */
.basic-data-form i.fa-info-circle,
.client-overview-basic-data-form i.fa-info-circle,
#main-grid .client-details-child-container[data-details="about-client"] i.fa-info-circle {
    color: #000;
    float: right;
    font-size: 14px;
    font-stretch: normal;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    letter-spacing: normal;
    padding-top: 0.3rem;
}
.basic-data-form i.fa-info-circle.no-float,
.client-overview-basic-data-form i.fa-info-circle.no-float{
    float: none;
    margin-left: 0.5rem;
}
.basic-data-form input {
    margin-bottom: 2.2rem !important;
}
.basic-data-form input,
.basic-data-form select,
.food-controller input[type=text],
.food-controller select {
    background-color: #f3f3f3;
    border: 0;
    border-radius: 0;
    color: #272727;
    font-size: 18px;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    height: auto;
    letter-spacing: normal;
    line-height: 1.33;
    padding: 0.85rem;
}
span.bigger-kcal {
    color: #272727;
    font-size: 1.1rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.4;
    text-transform: uppercase;
}
.basic-data-form h2 {
    color: #000;
    font-size: 1.7rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.5px;
    line-height: 1.25;
    text-transform: uppercase;
}
.basic-data-form h3,
.food-controller h3 {
    color: #2d2d2d;
    font-size: 1.2rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.5px;
    line-height: 1.27;
    text-transform: uppercase;
}
.food-controller h3 {
    display: flex;
    font-weight: 500;
    margin-top: 3rem;
    white-space: nowrap;
}
.food-controller h3 > hr {
    margin: 0.75rem 0 0 2rem;
    width: 100%;
}
.food-controller .cta.primary:not(.mini) {
    margin-top: 3rem;
}
.food-controller .cta.primary:not(.mini) i {
    margin-left: 1.5rem;
}
.basic-data-form h4 {
    color: #2d2d2d;
    font-size: 1.1rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: bold;
    letter-spacing: 0.5px;
    line-height: 1.27;
    margin-top: 2rem;
    text-transform: uppercase;
}
.basic-data-form .preamble {
    color: #272727;
    font-size: 0.8rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.43;
}
.basic-data-form input#Password {
    margin-bottom: 1rem !important;
}
p.has-password {
    color: #222;
    font-size: 0.8rem;
    font-stretch: normal;
    font-style: italic;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.29;
}
.row > .spacer {
    border-top: solid 1px #e8e8e8;
    margin: 3rem 15px;
}
@media only screen and (min-width: 768px) {
    .basic-data-form .preamble {
        width: 70%;
    }
    .settings-client-menu label {
        margin-right: 1rem;
    }
    .basic-data-form .settings-client-menu input[type=checkbox] {
        margin-bottom: 0 !important;
    }
    .basic-data-form input#Client_ClientData_BmrManual {
        color: #272727;
        font-size: 60px;
        font-stretch: normal;
        font-style: normal;
        font-weight: bold;
        letter-spacing: normal;
        line-height: 1.33;
        padding-bottom: 0;
        padding-top: 0;
    }
    .basic-data-form .collapsible {
        color: #000;
        font-size: 0.9rem;
        font-stretch: normal;
        font-style: normal;
        font-weight: 900;
        letter-spacing: normal;
        line-height: 1.25;
    }
    basic-data-form .collapsible i {
        color: #2d2d2d;
        font-size: 1.65rem;
        font-weight: normal;
        letter-spacing: 0.68px;
        line-height: 0.93;
    }
    .basic-data-form .collapsible-content,
    .basic-data-form .collapsible-content .row {
        background-color: inherit;
    }

    .own-measurements input {
        margin-bottom: 0.5rem !important;
    }
    .own-measurements > .row > div {
        align-self: center;
    }
    .own-measurements .own-measurement-label-actions,
    .own-measurements .edit-own-measurement-label-modal-button,
    .own-measurements .delete-own-measurement-label-modal-button {
        padding: 0;
    }
    .create-client-own-measurement-label-actions {
        align-self: center;
    }
}
/*#endregion */
.row.daily-blood-sugars {
    margin-bottom: 5rem;
}
.row.daily-blood-sugars h6 {
    color: #2d2d2d;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.4;
    margin: 0;
}
.row.daily-blood-sugars p {
    font-size: 0.9rem;
}
.row.daily-blood-sugars .delete-action {
    background: 0;
    border: 0;
    color: #d25f5f;
    float: right;
    font-size: 1.4rem;
    line-height: 1;
    outline: 0;
    padding: 0;
    text-align: right;
}

/*#region Error screen */
body.error-screen #top-menu {
    display: none !important;
}
body.error-screen .error-logo img {
    margin-top: 2rem;
    width: 5rem;
}
body.error-screen a {
    color: #2d2d2d;
    font-size: 1rem;
    text-decoration: underline;
}
/*#endregion */


.no-diary-top-area {
    background-color: var(--nd-dark-green);
    padding-bottom: 5rem;
    text-align: center;
}
.no-diary-top-area h1 {
    color: #fff;
    font-size: 1.8rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 1.5px;
    line-height: 1.25;
    margin-top: 4rem;
}
.no-diary-top-area p {
    color: #fff;
    font-size: 0.9rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.38;
}
.no-diary-top-area + .company-info-box {
    margin-top: 0;
}

/*#region Mobile admin app adjustments */
.page-header.mobile-only > h1 i {
    font-size: 1.6rem;
    margin-top: -0.1rem;
    padding: 0;
}
.mobile-row .control-label {
    color: #272727;
    font-size: 0.9rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.38;
    margin-bottom: 0;
    margin-top: 0.9rem;
}
.create-client-container .mobile-row:not(.collapsible-content),
.edit-client-container .mobile-row:not(.collapsible-content) {
    display: flex;
}
.create-client-container .mobile-row.collapsible-content,
.edit-client-container .mobile-row.collapsible-content {
    padding: 1rem 0;
}
.create-client-container .mobile-row .control-label,
.create-client-container .mobile-row .fa-info-circle,
.edit-client-container .mobile-row .control-label,
.edit-client-container .mobile-row .fa-info-circle {
    font-size: 0.67rem;
    line-height: 1;
    text-transform: uppercase;
}
.create-client-container .mobile-row .fa-info-circle, 
.edit-client-container .mobile-row .fa-info-circle {
    color: #666;
    font-size: 1rem;
    margin-top: 0.7rem;
    position: absolute;
    right: 1rem;
}
.create-client-container .mobile-row span.floating-unit, 
.edit-client-container .mobile-row span.floating-unit {
    display: block;
    left: 5rem;
    position: absolute;
    top: 2.25rem;
}
.create-client-container .mobile-row h3,
.edit-client-container .mobile-row h3 {
    color: #000;
    font-size: 1.2rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.5px;
    line-height: 1.27;
    margin-bottom: 0;
    margin-top: 3rem;
    text-transform: uppercase;
}
.create-client-container .mobile-row input,
.create-client-container .mobile-row select,
.edit-client-container .mobile-row input,
.edit-client-container .mobile-row select {
    background-color: #f4f4f4;
    border-radius: 0.22rem;
    color: #272727;
    font-size: 1rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.33;
}
.create-client-container .mobile-row select,
.edit-client-container .mobile-row select {
    padding: 0.5rem 1rem;
}
.meal-schedule-foods .row.footer {
    line-height: 1;
}
.meal-schedule-foods .action-col,
.add-recipe-to-meal-schedule-container .action-col {
    align-self: start;
    padding-top: 0;
}
.meal-schedule-foods .action-col .fa-info-circle {
    color: #666;
    font-size: 1.7rem;
}
.mealschedule-controller.collection-action .recipe-category-row label {
    font-size: 0.9rem;
    margin-bottom: 0;
}
.show-schedule-container.mobile-only #meal_breakfast {
    margin-top: 0;
}
.show-schedule-container.mobile-only .dropdown-toggle::after{
    position: absolute;
    right: -0.5rem;
    top: 1rem;
}
.show-schedule-container.mobile-only #dropDownSendToButton {
    position: relative;
}
.show-schedule-container.mobile-only #row-diagrams {
    background-color: var(--nd-dark-green);
    margin-left: 0;
    margin-right: 0;
    margin-top: 2rem;
    padding-top: 3rem;
    position: relative;
}
.show-schedule-container.mobile-only #row-diagrams::before {
    border-style: solid;
    border-top-color: #fff;
    border-width: .7rem .7rem 0;
    color: var(--nd-dark-green);
    content: "";
    height: 1rem;
    left: calc(50% - 0.7rem);
    position: absolute;
    top: 0;
    width: 1rem;
}
.show-schedule-container.mobile-only #row-diagrams .change-diagram-group {
    margin-top: -2rem;
}
.show-schedule-container.mobile-only #row-diagrams h3,
.show-schedule-container.mobile-only #row-diagrams .diagram-container li {
    color: #fff;
}
.meal-schedule-row-header .dropdown-menu-mobile a {
    color: #2d2d2d;
}
#main-area-row.container-with-overlap.mobile-only.show-training-exercise,
#main-area-row.container-with-overlap.mobile-only.create-training-exercise {
    padding-left: 1rem;
    padding-right: 1rem;
}
#showTrainingExerciseModal .exercise-image,
#main-area-row.container-with-overlap.mobile-only.show-training-exercise .exercise-image {
    height: 12rem;
    width: auto;
}
#showTrainingExerciseModal h6,
.mobile-only.container-with-overlap h6 {
    color: #272727;
    font-size: 0.6rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1;
    margin-top: 1.5rem;
    text-transform: uppercase;
}
#showTrainingExerciseModal .exercise-info,
#main-area-row.container-with-overlap.mobile-only.show-training-exercise .exercise-info {
    color: #272727;
    font-size: 0.9rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.38;
}
@media (max-width: 767px) {
    #addToTrainingProgramModal label {
        font-size: 0.8rem;
        line-height: 1.43;
        margin-bottom: 0;
    }
}
#addToTrainingProgramModal {
    z-index: 1060;
}
#showTrainingExerciseModal .training-exercise-description,
.mobile-only .training-exercise-description {
    color: #272727;
    font-size: 1rem;
    line-height: 1.33;
}
.container-with-overlap.mobile-only.show-training-exercise .training-exercise-category-row,
.container-with-overlap.mobile-only.show-training-exercise .collapsible-content-row {
    padding: 0;
}
.collapsible-content-row {
    padding: 0;
    width: 100%;
}
.container-with-overlap.mobile-only.show-training-exercise .collapsible-content-row iframe,
#showTrainingExerciseModal iframe {
    height: auto;
    width: 100%;
}
.collapsible-content-row label {
    font-size: 1rem;
    font-weight: bold;
    margin-top: 0;
}
#main-area-row #training-exercise-images .collapsible-content-row .exercise-image,
#main-area-row #training-exercise-focus-image .collapsible-content-row .exercise-image {
    height: auto;
    max-width: 100%;
    width: 100%;
}
.container-with-overlap.mobile-only.show-training-exercise .training-exercise-category-row h6 {
    font-size: 1rem;
    font-weight: bold;
    margin-top: 0;
}
.container-with-overlap.mobile-only.show-training-exercise .training-exercise-category-row .group-children {
    padding-left: 1rem;
}
.mobile-only h2 {
    color: #000;
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1.27;
    text-transform: uppercase;
}
.icon-explainer {
    display: block;
    font-size: 0.5rem;
    padding: 0;
    text-align: center;
}
#all-exercises-tab {
    display: flex;
}
#all-exercises-tab,
#my-exercises-tab,
#favourite-exercises-tab {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
.tab-bar-tab.filter-toggle.active {
    background: #f4f4f4;
    border-radius: 0;
    color: #000;
    padding-bottom: 1rem;
}
#filter-tab .filter-results {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
#desktop-filter-clients-tab .filter-content, 
#filter-tab .filter-content,
#filter-clients-tab .filter-content {
    background-color: #f4f4f4;
    margin-top: -1rem;
    padding: 1rem;
}
#desktop-filter-clients-tab .filter-content label,
#filter-tab .filter-content label,
#filter-clients-tab .filter-content label {
    color: #2d2d2d;
    font-size: 0.8rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.43;
    width: 100%;
}
#desktop-filter-clients-tab .filter-content select,
#desktop-filter-clients-tab .filter-content input,
#filter-tab .filter-content select,
#filter-tab .filter-content input,
#filter-clients-tab .filter-content select,
#filter-clients-tab .filter-content input {
    border: 0;
    margin-bottom: 0.8rem;
    padding: 0.6rem;
}
.desktop-only #desktop-filter-clients-tab {
    position: absolute;
    right: 2rem;
    top: 8rem;
}
.desktop-filter-clients-button {
    cursor: pointer;
    display: inline;
    float: right;
    font-size: 0.8rem;
}
/*#endregion */

/*#region My files */
body.my-files h5 {
    font-size: 1.1rem;
    font-weight: bold;
}
.my-files-list {
    list-style-type: none;
    padding: 0;
}
.my-files-list li {
    border-bottom: 1px solid #ccc;
    padding-bottom: 1rem;
    padding-top: 1rem;
}
.my-files-list li.no-border {
    border: 0;
    padding-top: 0;
}
.my-files-list li a {
    color: #222;
    display: block;
    width: 100%;
}
.my-files-list li img {
    height: auto;
    width: 100%;
}
.wellgo-files-list,
.cli-files-list {
    border-bottom: 1px solid #ccc;
    padding-bottom: 1rem;
}
h5.header-with-top-border {
    border-top: 3px solid var(--nd-dark-green);
    padding-top: 1rem;
}
/*#endregion */
/*#region Training Calendar - Clients */
.training-calendar-admin.trainingcalendar-controller.adminclient-action #top-menu .nav-item {
    width: 33%;
}
.training-calendar-admin.trainingcalendar-controller.adminclient-action #top-menu .nav-item.nav-link-current-client {
    margin: 0;
    padding: 0;
    position: relative;
}
#top-menu .red-pill {
    left: 0.25rem;
    position: absolute;
    top: 0.75rem;
}
#top-menu .client-circle {
    background-color: #f2f2f2;
    border-radius: 100%;
    color: #9a9a9a;
    font-size: 1rem;
    font-weight: 600;
    height: 3rem;
    left: 3rem;
    line-height: normal;
    position: relative;
    text-align: center;
    width: 3rem;
}
#main-area-row .training-calendar-container .tab-bar-tabs {
    justify-content: center;
}
#main-area-row #clients-tab,
#main-area-row #filter-results-tab {
    padding: 0;
}
#main-area-row #clients-tab .client,
#main-area-row #filter-results-tab .client {
    align-items: center;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    flex: 0 1 auto;
    padding: 1rem;
    width: 100%;
}
#main-area-row #clients-tab .client a,
#main-area-row #filter-results-tab .client a {
    align-items: center;
    color: #222;
    display: flex;
    flex: 1 0 auto;
}
#main-area-row #clients-tab .client p,
#main-area-row #filter-results-tab .client p {
    flex: 1 0 auto;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.36px;
    line-height: 1.75;
    margin-bottom: 0;
}
#main-area-row #clients-tab .client-circle,
#main-area-row #filter-results-tab .client-circle {
    background-color: #f2f2f2;
    border-radius: 100%;
    color: #9a9a9a;
    font-size: 1rem;
    font-weight: 600;
    height: 3rem;
    line-height: normal;
    margin-right: 1rem;
    text-align: center;
    width: 3rem;
}
#main-area-row #clients-tab .client-circle span,
#main-area-row #filter-results-tab .client-circle span {
    display: block;
    height: 100%;
    padding-top: 1rem;
}
#main-area-row #clients-tab .client-notifications i,
#main-area-row #clients-tab .client-tools i {
    font-size: 1.5rem;
}
#main-area-row #clients-tab .client-tools {
    cursor: pointer;
    flex: 0;
    line-height: 1;
    margin-right: 0.5rem;
}
#main-area-row #clients-tab .client-notifications {
    line-height: 1;
}
#main-area-row #clients-tab .client-notifications > div {
    display: inline-block;
}
#main-area-row #clients-tab .client-notifications > div:first-child {
    margin-right: 0.5rem;
}
#main-area-row #clients-tab .client-notifications .unchecked-completed-sessions i {
    color: var(--nd-dark-green);
}
#main-area-row #clients-tab .client-notifications .unread-client-notes i {
    color: #f7d055;
}
/*#endregion */

/*#region Training Calendar - Week Overview */
#week-overview-tab #add-week-container {
    display: flex;
    flex-direction: row;
    margin-top: 2rem;
}
#week-overview-tab .temporary-week-container {
    background-color: #f2f2f2;
    border-radius: 0.3rem;
    margin-top: 2.2rem;
    padding: 1.7rem 1.2rem;
    text-align: center;
}
#week-overview-tab .week-container {
    display: flex;
    flex-direction: column;
}
#week-overview-tab .week-container .week-header  {
    padding: 14px 25px 13px 15px;
    border-radius: 0.33rem 0.33rem 0 0;
    background-color: var(--nd-ocean);
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 2.2rem;
}
#week-overview-tab .week-container .week-header h3 {
    font-size: 1rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: 600;
    letter-spacing: normal;
    line-height: normal;
    margin: 0;
}
#week-overview-tab .week-container .week-header .week-actions > div {
    display: inline-block;
    margin-left: 1rem;
}
#week-overview-tab .week-actions .add-week {
    background-color: var(--nd-ocean);
    border-radius: 0.33rem 0 0 0.33rem;
    color: #fff;
    padding: 1.25rem 0.8rem;
}
#week-overview-tab #add-week-container .add-week {
    cursor: pointer;
}
#week-overview-tab .week-overview {
    background-color: #f2f2f2;
    border-radius: 0 0.33rem 0.33rem 0;
    display: flex;
    flex-direction: column;
    padding: 0.6rem 0.6rem 0 0.6rem;
    text-align: center;
    width: 100%;
}
#week-overview-tab #add-week-container .week-overview {
    padding: 1.25rem 0.8rem;
}
#week-overview-tab .week-overview .day-container {
    background-color: #fff;
    border-radius: 0.33rem;
    margin-bottom: 0.6rem;
}
#week-overview-tab .week-overview .day {
/*    background-color: #fff;
    border-radius: 0.33rem;*/
    border-radius: 0;
    display: flex;
    flex-direction: row;
    padding: 0.25rem 0.5rem;
/*    margin-bottom: 0.6rem;*/
}
#week-overview-tab .week-overview .add-day-row {
    background-color: #fff;
    border-radius: 0.33rem;
    display: flex;
    flex-direction: row;
    padding: 0 0.5rem 0.9rem 0.5rem;
/*    margin-bottom: 0.6rem;
    margin-top: -1rem;
*/}
#week-overview-tab .week-overview .day-info {
    display: flex;
    flex: 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
}
#week-overview-tab .week-overview .day-completed {
    margin-right: 0.5rem;
    padding-top: 0.5rem;
    width: 1rem;
}
#week-overview-tab .week-overview .day-name {
    background-color: #fff;
    border-radius: 0.33rem 0.33rem 0 0;
    color: #272727;
    flex: 1 0 100%;
    font-size: 0.65rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: bold;
    letter-spacing: normal;
    line-height: 1;
    padding: 0.9rem 0 0 2rem;
    text-align: left;
    text-transform: capitalize;
}
#week-overview-tab .week-overview .day.multi:not(.first).next .day-name {
    display: none;
}
#week-overview-tab .week-overview .day.multi.first {
/*    border-radius: 0;*/
/*    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;*/
    margin-bottom: 0;
}
#week-overview-tab .week-overview .day.multi.next {
/*    border-top-left-radius: 0;
    border-top-right-radius: 0;*/
/*    padding-top: 0;*/
    margin-bottom: 0;
}
#week-overview-tab .week-overview .day-training-program-name {
    color: #272727;
    flex: 1 0 50%;
    font-size: 0.9rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.38;
    text-align: left;
}
#week-overview-tab .week-overview .add-day-row .day-training-program-name,
#week-overview-tab .week-overview .day.empty .day-training-program-name {
    align-self: center;
    cursor: pointer;
    font-size: 0.67rem;
    line-height: 1;
}
#week-overview-tab .week-overview .day .day-training-program-name > div {
    color: #666;
    font-size: 0.7rem;
    line-height: 1.69;
}
#week-overview-tab .week-overview .day .move-day i {
    padding: 0 0.5rem;
}
#week-overview-tab .week-overview .day .day-actions {
    flex: 1 1 35%;
}
#week-overview-tab .week-overview .day .day-actions i {
    cursor: pointer;
    margin-left: 0.5rem;
}
#week-overview .week-overview.add-week {
    color: #272727;
    font-size: 0.9rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.38;
}
.tab-bar-tab.filter-toggle.active[data-tab="training-calendar-training-programs-tab"],
.tab-bar-tab.filter-toggle.active[data-tab="filter-clients-tab"] {
    background-color: #fff;
    border-radius: 0;
    color: #528653;
    padding-bottom: 1rem;
}
#training-calendar-training-programs-tab,
#filter-clients-tab {
    background-color: white;
    box-shadow: 0 30px 30px -30px rgba(0, 0, 0, 0.5);
    padding-bottom: 2rem;
    position: absolute;
    top: 6rem;
    z-index: 1000;
}
#training-calendar-training-programs-tab h3 {
    border-bottom: 1px solid #e8e8e8;
    color: #272727;
    font-size: 1.1rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.4;
    margin-bottom: 1.1rem;
    padding-bottom: 1.3rem;
}
#training-calendar-training-programs-tab .training-program {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-right: 1rem;
}
#training-calendar-training-programs-tab .training-program-name {
    color: #2d2d2d;
    cursor: pointer;
    flex: 0 1 90%;
    font-size: 1rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.94;
}
#training-calendar-training-programs-tab .hide-training-program {
    line-height: 1.94;
}
#addDayModal #page-1 .week-overview .list-group-item.training-group {
    padding-left: 0;
}
/*#endregion */


/*#region Training Programs - mobile admin view */
.list-container .list-group-container {
    background-color: #fff;
    border-radius: 0.33rem;
    margin-bottom: 0.5rem;
    padding: 1.2rem 1.1rem;
}
.list-container .list-group-header {
    color: #272727;
    cursor: pointer;
    font-size: 1.1rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.4;
}
.list-container .list-group-header i {
    color: var(--nd-light-green);
    float: right;
    font-size: 1.7rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: 300;
    letter-spacing: normal;
    line-height: 0.73;
    text-align: center;
}
.list-container .list-group-items {
    display: none;
    margin-top: 1.1rem;
}
.list-container .list-group-item {
    border: 0;
    border-top: 1px solid #e8e8e8;
    padding: 1.1rem 0;
}
.list-container .list-group-name {
    cursor: pointer;
}
.list-container .list-group-item-actions {
    display: flex;
    float: right;
}
.list-container .list-group-item-actions i {
    color: #2d2d2d;
    font-size: 0.85rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.47;
    margin-left: 1rem;
    text-align: center;
}
.list-container .list-group-item-actions i.fa-angle-down,
.list-container .list-group-item-actions i.fa-angle-up {
    font-size: 1.7rem;
    font-weight: 300;
    line-height: 0.73;
}
.list-container .list-group-items.second-level .list-group-item {
    border: 0;
    color: #272727;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1.38;
    padding: 0 0 1rem 0;
}
.list-container .list-group-items.second-level .list-group-item i {
    margin-right: 0.5rem;
}
@media(max-width: 767px) {
    #showTrainingProgramModal {
        z-index: 1048;
    }
    #showTrainingProgramModal .modal-header {
        align-items: flex-start;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    #showTrainingProgramModal .modal-header i {
        cursor: pointer;
        margin-top: 0.25rem;
    }
    #showTrainingProgramModal .modal-header .action-buttons-row {
        flex: 1 0 auto;
        margin-bottom: 0.5rem;
        margin-top: 0.25rem;
        padding: 0;
    }
    #showTrainingProgramModal .modal-header .fa-times {
        padding-top: 0.33rem;
    }
    #showTrainingProgramModal .modal-header .action-buttons-row .dropdown-menu {
        padding: 0.5rem;
    }
    #showTrainingProgramModal .modal-header .action-buttons-row #dropDownSendToButton::after {
        content: none;
    }
    #showTrainingProgramModal #showTrainingProgramModalLabel {
        flex: 1 0 100%;
        text-align: center;
    }
    #showTrainingProgramModal .modal-body > div:not(.training-set) .training-exercise,
    #showTrainingProgramModal .modal-body > .item {
        border-top: 1px solid #e8e8e8;
        margin-top: 1.5rem;
        padding-top: 1rem;
    }
    #showTrainingProgramModal .exercise-name {
        color: #000;
        font-size: 1.1rem;
        font-weight: 900;
        padding-left: 0;
        padding-right: 0;
    }
    #showTrainingProgramModal .exercise-images {
        margin-bottom: 1rem;
    }
    #showTrainingProgramModal .exercise-images img {
        width: 100%;
    }
    #showTrainingProgramModal .exercise-images .preview > img {
        height: auto;
        max-height: 100%;
        max-width: 100%;
        object-fit: contain;
        position: absolute;
    }
    #showTrainingProgramModal .training-exercise-images .images {
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-top: 1.4rem;
    }
    #showTrainingProgramModal .training-exercise-images img {
        width: 100%;
    }
    #showTrainingProgramModal .training-exercise-images .preview {
        flex: 0 0 40%;
        position: relative;
        text-align: left;
    }
    #showTrainingProgramModal .training-exercise-images .preview img {
        height: auto;
        max-height: 100%;
        max-width: 100%;
        object-fit: contain;
        position: absolute;
    }
    #showTrainingProgramModal .training-exercise-images .focus {
        flex: 0 0 40%;
    }
    #showTrainingProgramModal .exercise-images .preview #training-video img {
        width: 85%;
    }
    .training-calendar-admin.adminclient-action #showTrainingProgramModal .training-exercise {
        background-color: white;
        border: 1px solid #f4f4f4;
        border-radius: 0.3rem;
        margin: 0 0 1rem 0;
        padding: 0.5rem;
    }
    .training-calendar-admin.adminclient-action #showTrainingProgramModal .training-exercise-name {
        color: #272727;
        font-size: 0.9rem;
        font-stretch: normal;
        font-style: normal;
        font-weight: normal;
        letter-spacing: normal;
        line-height: 1.63;
        padding: 1.4rem 0;
        text-align: center;
    }
    .training-calendar-admin.adminclient-action #showTrainingProgramModal .training-data-row {
        border: 0;
        font-size: 0.9rem;
        padding: 0 1rem;
        text-align: left;
    }
    .training-calendar-admin.adminclient-action #showTrainingProgramModal .training-exercise-actions {
        display: none;
        /*background-color: #f4f4f4;
        color: #2d2d2d;
        margin-top: 1rem;
        padding: 0.6rem 0;
        text-align: center;
        */
    }
    .training-calendar-admin.adminclient-action #showTrainingProgramModal .training-exercise-actions > i {
        margin-right: 0.8rem;
    }
    #showTrainingProgramModal .training-data.row {
        background-color: #f4f4f4;
        border-radius: 0.5rem;
        margin: 0;
        padding: 0 1rem;
        width: 100%;
    }
    #showTrainingProgramModal .training-data-row {
        border-bottom: 1px solid #ccc;
        /*display: flex;*/
        padding: 1rem 0;
        width: 100%;
    }
    #showTrainingProgramModal .training-data-row > div:first-child {
        padding: 0 0.5rem 0 0;
    }
    #showTrainingProgramModal .training-data-row .fa-edit {
        cursor: pointer;
        float: right;
        padding-top: 0.25rem;
    }
    #showTrainingProgramModal .training-exercise-notes .fa-edit {
        cursor: pointer;
        font-weight: 100;
        padding-top: 0.25rem;
    }
    #showTrainingProgramModal .training-exercise-notes {
        padding-top: 1rem;
    }
}
/*#endregion */

.show-details-pill {
    border-radius: 0.65rem;
    background-color: #fff;
    color: #79a25f;
    display: none;
    font-size: 0.65rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    line-height: 1.09;
    margin-left: 0.66rem;
    padding: 0.3rem 0.9rem;
    text-align: center;
}

.fixed-bottom-container-contents-details {
    background-color: #fff;
    height: 100%;
    overflow-y: scroll;
    padding: 0;
    position: fixed;
    top: 100%;
    width: 100%;
    z-index: 1029;
}
.fixed-bottom-container .contents-details-header {
    background-color: #f4f4f4;
    box-shadow: 0 -0.6rem 1.1rem -0.8rem rgba(0, 0, 0, 0.5);
    color: #000;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
}
.fixed-bottom-container .contents-details-header .minimize-details {
    cursor: pointer;
}
.fixed-bottom-container #training-program-contents {
    padding: 1.4rem 1.6rem;
}
.fixed-bottom-container #training-program-contents .training-exercise {
    border: solid 1px #f4f4f4;
    border-radius: 0.33rem;
    margin-bottom: 1.3rem;
    text-align: center;
    width: 100%;
}
.fixed-bottom-container #training-program-contents .training-exercise .training-exercise-images {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 1.4rem;
}
.fixed-bottom-container #training-program-contents .training-exercise .training-exercise-images .preview,
.fixed-bottom-container #training-program-contents .training-exercise .training-exercise-images .focus {
    flex: 0 0 40%;
}
.fixed-bottom-container #training-program-contents .training-exercise .training-exercise-images img {
    width: 100%;
}
.fixed-bottom-container #training-program-contents .training-exercise .training-exercise-name {
    color: #272727;
    font-size: 0.9rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.63;
    padding: 1.4rem 0;
    text-align: center;
}
.fixed-bottom-container #training-program-contents .training-exercise .training-data-row {
    font-size: 0.9rem;
    padding: 0 1rem;
    text-align: left;
}
.fixed-bottom-container #training-program-contents .training-exercise .training-exercise-notes {
    font-size: 0.9rem;
    padding: 0 1rem;
    text-align: left;
}
.fixed-bottom-container #training-program-contents .training-exercise .training-exercise-actions {
    background-color: #f4f4f4;
    color: #2d2d2d;
    margin-top: 1rem;
    padding: 0.6rem 0;
}
.fixed-bottom-container #training-program-contents .training-exercise .training-exercise-actions .move {
    display: inline-block;
}
.fixed-bottom-container #training-program-contents .training-exercise .training-exercise-actions i {
    cursor: pointer;
    font-size: 1.1rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: 300;
    letter-spacing: normal;
    line-height: normal;
    margin: 0 0.8rem;
    text-align: center;
}
.fixed-bottom-summary-container {
    background-color: var(--nd-coral);
    bottom: 0;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    left: 0;
    padding: 1rem 1rem 0 1rem;
    position: fixed;
    right: 0;
    text-align: center;
    z-index: 1028;
}
.fixed-bottom-summary-container .show-details,
.fixed-bottom-container-contents-details .minimize-details {
    cursor: pointer;
    font-size: 0.67rem;
    font-weight: bold;
    letter-spacing: normal;
    line-height: 1.67;
    margin-bottom: 0.2rem;
    margin-top: -0.1rem;
    text-transform: lowercase;
}
.fixed-bottom-summary-container .show-details {
    color: #5eb5b7;
    background-color: #fff;
    border-radius: 1rem;
    box-shadow: 0 -0.5rem 1.4rem -0.85rem rgb(0 0 0 / 50%);
    border: solid 1px var(--nd-coral);
    left: 30%;
    padding: 0.33rem;
    position: relative;
    text-align: center;
    top: -1.66rem;
    width: 40%;
}
.fixed-bottom-summary-container .title-summary {
    bottom: 1.5rem;
    font-size: 1rem;
    font-weight: normal;
    margin-top: -0.4rem;
    position: relative;
}
.fixed-bottom-container-contents-details .title-summary .fal {
    cursor: pointer;
    float: right;
    line-height: 1.5;
    padding-right: 0.5rem;
}
.fixed-bottom-container-contents-details .main-info-contents {
    padding: 3rem 2rem 2rem 2rem ;
}
.fixed-bottom-container-contents-details .main-info-contents label {
    color: #272727;
    font-size: 0.8rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.43;
}



#trainingDataMobileModal .modal-body {
    padding: 1rem 0;
}
#trainingDataMobileModal .exercise-settings-form {
    background-color: #fff;
    padding: 0;
}
#trainingDataMobileModal #trainingDataRowsTable {
    padding: 0 1rem;
}
#trainingDataMobileModal #trainingDataRowsTable .data-row-item {
    border-radius: 0.33rem;
}
#trainingDataMobileModal #trainingDataRowsTable .data-row-item .data-row-position {
    align-self: center;
    font-variant: tabular-nums;
    margin-right: 0.5rem;
    text-align: right;
    width: 1.5rem;
}
#trainingDataMobileModal #trainingDataRowsTable .data-row-item .form-control {
    border: 1px solid #ced4da;
    border-radius: .25rem;
    height: auto;
}
#trainingDataMobileModal #trainingDataRowsTable .data-row-item .data-row-actions {
    align-self: center;
    padding-left: 0.5rem;
}
#trainingDataMobileModal #trainingDataRowsTable .data-row-item .data-row-actions i {
    cursor: pointer;
    padding: 0 0.5rem;
}
#trainingDataMobileModal #trainingDataRowsTable .copy-to-all-exercises-button {
    width: 100%;
}
#trainingDataMobileModal label[for="exercise-notes"] {
    color: #272727;
    font-size: 0.8rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.43;
}
#trainingDataMobileModal textarea[name="exercise-notes"] {
    background-color: #fff;
    border: solid 1px #cfcfcf;
    border-radius: 0.33rem;
    padding: 0.5rem;
}
#trainingDataMobileModal .save-notes {
    width: 100%;
}
#trainingDataMobileModal #save-notes-button {
    background-color: #666;
    border-radius: 1.1rem;
    border: solid 1px #666;
    color: #fff;
    font-size: 0.67rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: 0.27px;
    line-height: normal;
    margin-top: 1.5rem !important;
    text-align: center;
    width: 100%;
}
#trainingDataMobileModal .training-data-form label.data-term-name,
#trainingDataMobileModal .add-new-data-term-form label {
    color: #272727;
    font-size: 0.8rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.43;
}
#trainingDataMobileModal #trainingDataRowsTable + label,
#trainingDataMobileModal .add-new-data-term-form h6 {
    color: #272727;
    font-size: 0.8rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: bold;
    letter-spacing: normal;
    line-height: 1.57;
    margin-top: 2.5rem;
    padding: 0 1rem;
}
#trainingDataMobileModal .add-new-data-term-form h6 {
    padding: 0;
}
#trainingDataMobileModal .add-training-data {
    background-color: #f4f4f4;
    justify-content: space-between;
    margin-bottom: 0;
    padding: 1.5rem 1rem;
}
#trainingDataMobileModal .add-training-data .data-term-item {
    flex: 0 1 45%;
}
#trainingDataMobileModal .add-training-data .data-term-item label {
    width: auto;
}
#trainingDataMobileModal .add-training-data .data-term-item .delete-data-term-button {
    position: unset;
    vertical-align: middle;
}
#trainingDataMobileModal .add-training-data-row-button {
    text-align: center;
    width: 100%;
}
#trainingDataMobileModal .add-training-data + .col-12.text-right {
    background-color: #f4f4f4;
    padding: 0 1rem 3rem 1rem;
}
#trainingDataMobileModal .training-data-form > .col-12:not(.text-right, .add-training-data) {
    display: none;
}
#trainingDataMobileModal .add-new-data-term-form button {
    background-color: #666;
    border: solid 1px #666;
    border-radius: 1.1rem;
    color: #fff;
    font-size: 0.67rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: 0.27px;
    line-height: normal;
    margin-bottom: 5rem;
    margin-top: 2rem;
    text-align: center;
    width: 100%;
}
#trainingDataMobileModal .dismiss-button {
    border: solid 1px #000;
    border-radius: 1.5rem;
    color: #151c27;
    font-size: 0.67rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: bold;
    letter-spacing: normal;
    line-height: normal;
    margin-bottom: 5rem;
    padding: 1rem 1.5rem;
    text-align: center;
}

.previous-training-session {
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    padding-bottom: 1rem;
}
.training-sessions .previous-training-session .training-data-row,
.training-sessions .previous-training-session .client-notes-row {
    border: 0;
    padding: 0;
}
.training-sessions .previous-training-session .client-notes-row p {
    padding: 0;
}
.exercise-history-row {
    padding: 0 0 1.2rem 0;
}
.client-controller.list-action .exercise-history-row,
.training-calendar-admin .exercise-history-row {
    padding: 0.5rem 0 0 0;
}
.exercise-history-row a,
.exercise-history-row button {
    background-color: #2d2d2d;
    border-radius: 0.85rem;
    color: #fff;
    font-size: 0.66rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: 0.27px;
    line-height: normal;
    padding: 0.4rem 1.2rem;
    text-align: center;
    text-transform: uppercase;
}
.exercise-history-row a i,
.exercise-history-row button i {
    float: none;
}


.training-calendar-history {
    background-color: #fff;
    border-radius: 1rem 1rem 0 0;
    height: 100%;
    margin-top: -4rem;
}
.training-calendar-history .previous-training-sessions {
    border-bottom: 1px solid #e8e8e8;
    margin: 0 1rem;
    padding-top: 0.5rem;
}
.training-calendar-history .previous-training-session {
    border: 0;
}
.training-calendar-history .collapsible {
    border-top: 1px solid #e8e8e8;
    color: #2d2d2d;
    font-size: 1rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.33;
    text-transform: initial;
}
.training-calendar-history .previous-training-sessions .collapsible:first-child {
    border-top: 0;
}
.training-calendar-history .training-data-row,
.training-calendar-history .client-notes-row {
    color: #2d2d2d;
    font-size: 0.7rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.69;
}
.training-calendar-history .client-notes-row {
    margin-top: 1rem;
}


/*#region New Client Overview */
.clients-overview-list .client-overview {
    background-color: #f4f4f4;
    border-radius: 0.33rem;
    margin-bottom: 0.33rem;
    padding: 0.6rem 0.8rem;
}
.clients-overview-list .client-overview .client-header-row .fas.fa-bell::after,
.clients-overview-list .client-overview .client-details-header-row .fas.fa-bell::after {
    background-color: #d25f5f;
    border-radius: 1rem;
    content: ' ';
    display: block;
    height: 0.6rem;
    position: relative;
    left: 0.4rem;
    top: -1rem;
    width: 0.6rem;
}
.clients-overview-list .client-overview .client-details-header-row .fas.fa-bell::after {
    height: 0.4rem;
    top: -0.9rem;
    width: 0.4rem;
}
.clients-overview-list .client-overview .client-header-row {
    display: flex;
    flex-direction: row;
}
.clients-overview-list .client-overview .client-header-row > div {
    align-self: center;
    flex: 1 1 auto;
}
.clients-overview-list .client-overview .client-header-row .client-circle {
    background-color: #f2f2f2;
    border-radius: 100%;
    color: #9a9a9a;
    flex: 0 1 3rem;
    font-size: 1.5rem;
    font-weight: 600;
    height: 3rem;
    line-height: normal;
    text-align: center;
    width: 3rem;
}
.clients-overview-list .client-overview .client-header-row .client-name {
    color: #272727;
    cursor: pointer;
    flex: 0 0 30%;
    font-size: 0.9rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: 600;
    letter-spacing: normal;
    line-height: 1.25;
    margin-left: 1.1rem;
}
.clients-overview-list .client-overview .client-header-row .client-status {
    left: calc(50% - 7px);
    position: absolute;
    transition: all 150ms;
}
.clients-overview-list .client-overview .client-details-header-row .update-status {
    transition: all 150ms;
}
.clients-overview-list .client-overview .client-header-row .client-status.updates:hover,
.clients-overview-list .client-overview .client-details-header-row .update-status.updates:hover {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 2rem;
    margin-left: -1rem;
    padding: 0 1rem;
}
.clients-overview-list .client-overview .client-header-row .client-status.updates:hover::after,
.clients-overview-list .client-overview .client-details-header-row .update-status.updates:hover::after{
    color: #272727;
    content: 'Markera som läst';
    font-size: 0.6rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.09;
    margin-left: 1rem;
}
.clients-overview-list .client-overview .client-header-row .client-go-to-page {
    margin-right: 4.5rem;
    text-align: right;
}
.clients-overview-list .client-overview .client-go-to-page a {
    border: solid 1px #000;
    border-radius: 1.5rem;
    color: #151c27;
    font-size: 0.6rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: 500;
    letter-spacing: normal;
    line-height: normal;
    padding: 0.4rem 0.75rem;
    text-transform: uppercase;
}
.clients-overview-list .client-overview .client-header-row .client-toggle {
    color: #272727;
    flex: 0 0 2rem;
    font-size: 0.9rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.25;
    margin-right: 2rem;
    text-align: right;
}
.clients-overview-list .client-toggle {
    cursor: pointer;
}
.clients-overview-list .client-overview .client-toggle i.fa {
    font-weight: 500;
}
.client-details-parent-container,
.client-details-child-container {
    display: none;
    flex-direction: column;
    margin-top: 0.5rem;
}
.client-details-parent-container .client-details {
    background-color: #fff;
    border-radius: 0.33rem;
    margin: 0.33rem 0 0 0;
}
.client-details-parent-container .client-details .client-details-header-row {
    color: #272727;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: 600;
    letter-spacing: normal;
    line-height: 1.43;
    padding: 1rem 0.8rem;
}
.client-details-parent-container .client-details .client-details-header-row .update-status {
    left: 50%;
    position: absolute;
}
.client-details-parent-container .client-details .client-toggle {
    flex: 0 0 2rem;
    font-size: 0.9rem;
    font-weight: normal;
    line-height: 1.25;
    margin-right: 1.25rem;
    text-align: right;
}
.client-details-child-container > .row {
    margin: 0;
}
#main-grid .client-details-child-container .row label {
    font-size: 0.9rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: 900;
    letter-spacing: normal;
    line-height: 1.25;
    color: #000;
}
#main-grid .client-details-child-container .row .form-control {
    background-color: #f3f3f3;
    border-radius: 0.15rem;
    color: #272727;
    font-size: 0.9rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.38;
    margin-bottom: 0;
}
#main-grid .client-details-child-container[data-details="basic-data"] .client-overview-basic-data-form {
    padding: 0 15px;
}
#main-grid .client-details-child-container[data-details="basic-data"] .row .form-control {
    margin-bottom: 0.9rem;
}
#main-grid .client-details-child-container[data-details="basic-data"] .delete-client-button,
#main-grid .client-details-child-container[data-details="basic-data"] .move-client-button {
    background-color: #d25f5f;
    border: 0;
    border-radius: 2rem;
    color: #fff;
    font-size: 0.9rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: 900;
    letter-spacing: normal;
    line-height: normal;
    margin-top: 1rem;
    padding: 0.8rem 4rem;
    text-align: center;
}
#main-grid .client-details-child-container[data-details="basic-data"] .move-client-button {
    background-color: #fff;
    border: solid 1px #000;
    color: #222;
}
#main-grid .client-details-child-container[data-details="basic-data"] .move-client-button:disabled,
#main-grid .client-details-child-container[data-details="basic-data"] .delete-client-button:disabled {
    background-color: #666;
    color: #fff;
}
#main-grid .client-details-child-container[data-details="basic-data"] .delete-client-button:disabled:hover,
#main-grid .client-details-child-container[data-details="basic-data"] .move-client-button:disabled:hover {
    cursor: not-allowed;
}
#main-grid .client-details-child-container .row select {
    margin: 0;
    padding: 0.5rem;
}
#main-grid .client-details-child-container span.floating-unit {
    display: block;
    left: 5rem;
    position: absolute;
    top: 0.33rem;
}
#main-grid .client-details-child-container h3 {
    color: #000;
    font-size: 1.1rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: 900;
    letter-spacing: normal;
    line-height: 1.3;
}
#main-grid .client-details-child-container .preamble {
    color: #272727;
    font-size: 0.8rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.43;
}
#main-grid .client-details-child-container .has-password {
    font-size: 0.8rem;
    font-stretch: normal;
    font-style: italic;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.29;
}
.client-details-child-container .body-card-column {
    align-content: flex-start;
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}
.client-details-child-container .body-card {
    background-color: #f4f4f4;
    border-radius: 0.2rem;
    flex: 0 1 48%;
    margin: 0 0 0.5rem 0;
    padding: 0.5rem 0 0 0;
    position: relative;
    text-align: center;
}
.client-details-child-container .body-card:nth-child(2n+1) {
    margin-right: 0.5rem;
}
.client-details-child-container .body-card.change {
    background-color: rgba(186, 210, 95, 0.2);
}
.client-details-child-container .body-card .body-card-content {
    display: inline-block;
}
.client-details-child-container .body-card h3 {
    text-align: left;
}
.client-details-child-container .body-card .num {
    color: #272727;
    font-size: 2.2rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: bold;
    letter-spacing: normal;
    line-height: normal;
    margin-bottom: 0.5rem;
    margin-top: -0.5rem;
}
.client-details-child-container .body-card .num .unit {
    color: #272727;
    font-size: 1rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.33;
}
.client-details-child-container .body-card .continue-button {
    padding: 0.7rem 1.5rem;
}
.client-details-child-container .body-card .continue-button i {
    margin-left: 0.5rem;
}
.client-details-child-container .body-card.change > .fa-info-circle  {
    color: #2d2d2d;
    font-size: 0.75rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.54;
    position: absolute;
    right: 0.4rem;
}
.client-details-child-container .body-card.change .body-card-change-info,
.client-controller.body-action .body-card-change-info {
    background-color: #fff;
    border-radius: 0.25rem;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.27);
    color: #2d2d2d;
    display: none;
    font-size: 0.65rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.67;
    padding: 0.9rem;
    position: absolute;
    right: -132%;
    text-align: left;
    top: 1rem;
    width: 140%;
    z-index: 1000;
}
.client-controller.body-action .body-card-change-info {
    right: auto;
    width: 75%;
}
.client-details-child-container .body-card-column.right-column .body-card.change .body-card-change-info {
    right: 10%;
}
.client-details-child-container .info-card {
    background-color: #f4f4f4;
    border-radius: 0.2rem;
    flex: 1 1 50%;
    padding: 1.6rem 1.2rem 2rem 3rem;
    position: relative;
}
.client-details-child-container .info-card:first-child {
    margin-right: 1.6rem;
}
.client-details-child-container .info-card h3 {
    color: #000;
    font-size: 0.9rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: 900;
    letter-spacing: normal;
    line-height: 1.25;
}
.client-details-child-container .info-card .progress-circle {
    align-items: center;
    background-color: #d25f5f;
    border-radius: 3rem;
    color: #fff;
    display: flex;
    height: 3rem;
    place-content: center;
    position: absolute;
    right: 10%;/*2.6rem;*/
    text-align: center;
    top: 1.6rem;
    width: 3rem;
}
.client-details-child-container .info-card .num {
    color: #272727;
    font-size: 3.3rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: 900;
    letter-spacing: normal;
    line-height: 1.33;
    margin-bottom: 0.5rem;
}
.client-details-child-container .info-card .num .unit {
    color: #272727;
    font-size: 1.6rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: bold;
    letter-spacing: normal;
    line-height: 1;
}
.client-details-child-container .info-card a {
    background-color: #2d2d2d;
    border-radius: 1.6rem;
    color: #fff;
    font-size: 0.66rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: normal;
    padding: 0.5rem 1.5rem;
    text-align: center
}
.client-details-child-container .row.client-overview-save-note-form {
    margin-bottom: 2rem;
    margin-top: 1rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.client-details-child-container .row.client-overview-save-note-form input, 
.client-details-child-container .row.client-overview-save-note-form textarea {
    margin-bottom: 1rem !important;
}
.client-details-child-container .row.client-overview-save-note-form .save-note-button {
    background-color: #2d2d2d;
    border: 0;
    border-radius: 1.5rem;
    color: #fff;
    font-size: 0.8rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: bold;
    letter-spacing: normal;
    line-height: normal;
    margin-bottom: 1.5rem;
    padding: 0.8rem 1.5rem;
}
.client-details-child-container .row.client-overview-save-note-form .save-note-button i {
    font-size: 0.65rem;
    font-weight: normal;
    line-height: normal;
    margin-left: 1.5rem;
}
.client-details-child-container .client-overview-upload-own-file-form #upload-own-file-button {
/*    background-color: #2d2d2d;
    border: 0;
    border-radius: 1.5rem;
    color: #fff;
    font-size: 0.8rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: bold;
    letter-spacing: normal;
    line-height: normal;
    margin-bottom: 1.5rem;
    padding: 0.8rem 1.5rem;*/
    position: absolute;
    right: 0;
    top: 1rem;
}
.client-details-child-container .client-overview-upload-own-file-form #upload-own-file-button i {
    font-size: 0.65rem;
    font-weight: normal;
    line-height: normal;
    margin-left: 1.5rem;
}
.client-details-child-container .table-header {
    color: #838383;
    font-size: 0.55rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: bold;
    letter-spacing: normal;
    line-height: 2;
    text-transform: uppercase;
}
.client-details-child-container .collapsible {
    color: #272727;
    font-size: 0.67rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1;
}
.client-details-child-container[data-details="client-settings"] {
    padding-bottom: 3rem;
}
.client-details-child-container .collapsible i.fa {
    color: #2d2d2d;
    float: right;
    font-size: 0.9rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: 0.36px;
    line-height: 1;
}
.client-details-child-container .collapsible-content {
    background-color: #fff;
    color: #272727;
    font-size: 0.8rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.43;
    padding-bottom: 1rem;
}
.client-details-child-container .collapsible-content .row {
    background-color: #fff;
}
.client-details-child-container .collapsible > .col-12 {
    cursor: pointer;
}
.client-details-child-container select[name="PresetDiagrams[]"] {
    margin-bottom: 0.5rem;
}
.client-details-child-container .latest-training-sessions-row {
    border-bottom: 1px solid #f4f4f4;
    padding: 0.5rem 0; /* 0.3rem 0;*/
}
.client-details-child-container .latest-training-sessions-row .name {
    color: #272727;
    font-size: 0.8rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.43;
}
.client-details-child-container .latest-training-sessions-row .completed-at {
    color: #838383;
    font-size: 0.65rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1;
    padding-top: 0.3rem;
}
.client-details-child-container .latest-training-sessions-row .fa-exclamation-circle {
    color: #d25f5f;
    cursor: pointer;
}
.client-details-child-container .continue-button {
    border: 1px solid #000;
    border-radius: 1.5rem;
    color: #151c27;
    font-size: 0.65rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: bold;
    letter-spacing: normal;
    line-height: normal;
    padding: 0.7rem;
    text-align: center;
    text-transform: uppercase;
}
.client-details-child-container .continue-button i {
    margin-left: 1.5rem;
}

.client-details-child-container .files-list {

}
.client-details-child-container .files-list-row,
.client-details-child-container .notes-list-row,
.client-details-child-container .surveys-list-row {
    color: #272727;
    display: flex;
    font-size: 0.8rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.43;
    padding: 0 15px;
}
.client-details-child-container .surveys-list-row {
    border-top: 1px solid #ccc;
    padding: 0;
    text-transform: none !important;
}
.client-details-child-container .notes-list-row {
    align-items: center;
}
.client-details-child-container .notes-list-row .name i.fa-edit {
    cursor: pointer;
    margin-right: 0.8rem;
}
.client-details-child-container .files-list-row > div,
.client-details-child-container .notes-list-row > div,
.client-details-child-container .surveys-list-row > div {
    border-bottom: 1px solid #f4f4f4;
    padding-bottom: 0.8rem;
    padding-top: 0.8rem;
}
.client-details-child-container .surveys-list-row > div {
    align-content: center;
}
.client-details-child-container[data-details="surveys"] .collapsible-content {
    background-color: #f8f8f8;
    padding: 1rem 2rem;
}
.client-details-child-container[data-details="surveys"] .collapsible-content > .row {
    background-color: #f8f8f8;
}
.client-details-child-container[data-details="surveys"] .collapsible-content > .row.answer {
    border-top: 1px solid #ccc;
    padding: 1rem 0;
}
.client-details-child-container[data-details="surveys"] .collapsible-content > .row.answer:first-child {
    border-bottom: 0;
}
 .client-details-child-container .files-list-row > div:first-child, .client-details-child-container .notes-list-row > div:first-child, .client-details-child-container .surveys-list-row > div:first-child {
    padding: 0.8rem 0;
}
.client-details-child-container .notes-list-row > .name > span {
    cursor: pointer;
}
.client-details-child-container[data-details="energy-and-nutrition"] .diagram-energy-ratio-container h3.secondary {
    margin-left: -3rem;
}
.client-details-child-container #note-form .save-note-button.saved {
    background-color: var(--nd-dark-green);
}
.client-details-child-container #note-form .save-note-button.error {
    background-color: #d25f5f;
}
.client-details-child-container #note-form .delete-note-button {
    background-color: #888;
    border: 1px solid #2d2d2d;
    border-radius: 1.5rem;
    color: #fff;
    font-size: 0.8rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: bold;
    letter-spacing: normal;
    line-height: normal;
    margin-bottom: 1.5rem;
    margin-left: 1rem;
    padding: 0.8rem 1.5rem;
}
.client-details-child-container .row.client-overview-save-note-form .delete-note-button i {
    font-size: 0.65rem;
    font-weight: normal;
    line-height: normal;
    margin-left: 1.5rem;
}
.client-details-child-container[data-details="messages"] .load-all-messages-button {
    margin-bottom: 1rem;
}
.client-details-child-container .image-attachments-row {
    flex-wrap: wrap;
    flex-direction: row;
    flex-basis: fit-content;
    gap: 1rem;
}
.client-details-child-container .image-attachments-row .image-attachment {
    cursor: pointer;
    flex: 0 0 5rem;
    height: 5rem;
    width: 5rem;
}
.client-details-child-container .image-attachments-row .image-attachment img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
#previewImageModal .modal-body {
    text-align: center;
}
#previewImageModal .modal-body img {
    height: auto;
    max-height: 80vh;
    max-width: 80vw;
    object-fit: contain;
    width: 100%;
}
pre.note-text {
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}
/*#endregion */
.custom-checkbox-inline {
    cursor: pointer;
    display: block;
    font-size: 0.8rem !important;
    font-weight: normal !important;
    margin-bottom: 12px;
    padding-left: 35px;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.custom-checkbox-inline.language-settings {
    display: flex;
    align-items: center;
}
.custom-checkbox-inline.language-settings svg {
    height: 2rem;
    width: auto;
}
.custom-checkbox-inline.language-settings .custom-checkbox-span.green {
    top: unset;
}
#training-program-content-container .custom-checkbox-inline {
    padding-left: 0;
}
.custom-checkbox-input {
    cursor: pointer;
    height: 0;
    opacity: 0;
    position: absolute;
    width: 0;
}
.custom-checkbox-span {
    background-color: #fff;
    border-radius: 1rem;
    border: 1px solid #666;
    height: 25px;
    left: 0;
    position: absolute;
    top: -15%;
    width: 25px;
}
.custom-checkbox-span.with-select {
    top: 0.5rem;
}
.monthly-row .custom-checkbox-inline select.w-5rem {
    width: 5rem;
}
.monthly-row .custom-checkbox-inline select.w-7rem {
    width: 7rem;
}
.monthly-row .custom-checkbox-inline select.w-8rem {
    width: 8rem;
}
#training-program-content-container .custom-checkbox-span {
    height: 22px;
    left: -3rem;
    width: 22px;
}
.custom-checkbox-span.green {
    top: 0;
}
.manual-controller.edit-action .custom-checkbox-span.green {
    top: -15%;
}
#training-program-content-container .custom-checkbox-span.green {
    top: -0.3rem;
}
.custom-checkbox-inline:hover .custom-checkbox-input ~ .custom-checkbox-span {
    background-color: #fff;
    border-radius: 1rem;
    border: 1px solid #666;
}
.custom-checkbox-inline .custom-checkbox-input:checked ~ .custom-checkbox-span {
    background-color: #d25f5f;
    border-radius: 1rem;
    border: 1px solid #666;
}
.custom-checkbox-inline .custom-checkbox-input:checked ~ .custom-checkbox-span.green {
    background-color: #528653;
}
.custom-checkbox-span:after {
    content: "";
    display: none;
    position: absolute;
}
.custom-checkbox-inline .custom-checkbox-input:checked ~ .custom-checkbox-span:after {
    display: block;
}
.custom-checkbox-span:after {
    border: solid white;
    border-width: 0 3px 3px 0;
    height: 10px;
    left: 9px;
    top: 5px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 5px;
}
body.tools-controller .custom-checkbox-inline {
    display: flex;
}
body.tools-controller .custom-checkbox-inline .text {
    margin-top: 4px;
} 
body.messages-admin .custom-checkbox-inline {
    display: inline-block;
    padding-right: 33px;
    position: absolute;
    right: 0;
    top: 1rem;
}
body.settings-controller.clientsettings-action .custom-checkbox-inline {
    display: inline-block;
}
body.settings-controller.clientsettings-action .fa-info-circle {
    font-size: 0.8rem;
    vertical-align: -webkit-baseline-middle;
}
body.settings-controller.clientsettings-action .custom-checkbox-inline > span.text {
    vertical-align: -webkit-baseline-middle;
}
body.settings-controller.clientsettings-action .client-settings-menu .custom-checkbox-inline {
    margin-right: 1rem;
}
body.messages-admin .custom-checkbox-inline .custom-checkbox-input:checked ~ .custom-checkbox-span {
    background-color: #528653;
}
body.settings-controller.clientsettings-action select.form-control.form-group {
    padding: .375rem .75rem;
}
body.settings-controller.clientsettings-action label:not(.custom-checkbox-inline) ~ i.fa-info-circle,
body.settings-controller.clientsettings-action h5 ~ p > .fa-info-circle {
    vertical-align: baseline;
}

#desktop-main-area .add-recipe-to-meal-schedule-container {
    background-color: transparent;
    margin-top: 0;
}
body.mealschedule-controller.editfoods-action #desktop-main-area #own-foods {
    background-color: #f1f9f2;
}
#desktop-main-area .add-recipe-to-meal-schedule-container #collection-search-results {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
#desktop-main-area .add-recipe-to-meal-schedule-container #collection-search-results h4 {
    font-weight: normal;
}
#desktop-main-area .add-recipe-to-meal-schedule-container #collection-search-results .row {
    width: 30%;
}
@media only screen and (min-width: 751px) {
    #desktop-main-area .add-recipe-to-meal-schedule-container #collection-search-results .row {
        width: 100%;
    }
}
@media only screen and (min-width: 1024px) {
    #desktop-main-area .add-recipe-to-meal-schedule-container #collection-search-results .row {
        width: 50%;
    }
}
@media only screen and (min-width: 1400px) {
    #desktop-main-area .add-recipe-to-meal-schedule-container #collection-search-results .row {
        width: 33%;
    }
}

#client-groups-tab .client-name a {
    color: #666;
}

.barcode-pill {
    background-color: #fff;
    border-radius: 1.5rem;
    color: var(--nd-dark-green);
    font-weight: bold;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    display: inline-block;
    float: right;
    height: 2.5rem;
    text-align: right;
    vertical-align: sub;
    padding-top: 0.75rem;
}
.room-for-barcode-pill {
    display: inline-flex;
    width: calc(100% - 4rem);
}
.room-for-barcode-pills {
    display: inline-flex;
    width: calc(100% - 7rem);
}
#barCodeReader {
    background-color: rgba(0, 0, 0, 0.5);
    bottom: 0;
    position: fixed !important;
    top: 0;
}
#barCodeReader video {
    height: 100%;
    width: 100%;
}

body.userfooddatabases-action #desktop-main-area {
    align-self: stretch;
    height: 75%; 
}
body.userfooddatabases-action #desktop-main-area .desktop-left-menu {
    align-self: stretch;
    height: 100%;
}


/*#region Training Sets */
.training-program-exercise-row {
}
.select-check-box-for-set {
    float: left;
    margin-left: -2rem;
    margin-top: 3rem;
    position: relative;
}
.select-check-box-for-set input {
    height: 1rem;
    width: 1rem;
}
/*#endregion */

/*#region Design 2023 */
#desktop-main-area.d-2023 {
    gap: 0px 0px;
    grid-template-columns: 32rem 1fr;
    /* grid-template-rows: 3.4rem auto auto; */
}
@media only screen and (min-width: 751px) {
    #desktop-main-area.d-2023 {
        display: grid !important;
    }
}
.d-2023.desktop-left-menu {
    padding: 0 1.1rem;
}
.d-2023 h5 {
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.1rem;
    margin-left: 0.6rem;
    margin-top: 2.2rem;
    text-transform: uppercase;
}
#main-grid.d-2023 .back-arrow > p,
#main-grid.d-2023 .training-session-name {
    margin-left: 2.8rem;
    white-space: pre-wrap;
}
#main-grid.d-2023 .back-arrow a {
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1.4rem;
}
#main-grid.d-2023 .back-arrow i {
    font-size: 1.67rem;
    margin-right: 1.1rem;
    vertical-align: bottom;
}
#main-grid.d-2023 .change-name-and-description {
    margin-left: 2.8rem;
}
#main-grid.d-2023 .change-name-and-description a {
    color: var(--nd-coral);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 0.9rem;
}
.number-of-iterations {
    display: flex;
    /*margin-bottom: 1.1rem;*/
    margin-top: 2rem;
}
.number-of-iterations .line {
    align-self: center;
    border-bottom: 1px solid #979797;
    flex: 1 1 auto;
    height: 1px;
}
.number-of-iterations .picker {
    border: 1px solid #979797;
    border-radius: 2rem;
    font-size: 0.65rem;
    font-weight: 500;
    line-height: 1.1rem;
    padding: 0.5rem 1.1rem;
}
.number-of-iterations .picker .fa-sync {
    margin-right: 0.5rem;
}
.number-of-iterations .picker select {
    background: none;
    border: none;
    font-weight: bold;
    outline: none;
    padding-right: 0.5rem;
}
/*
@keyframes flash-success {
    from { background-color: initial; }
    to { background-color: var(--nd-dark-green); }
}
*/
@keyframes flash-success {
    from { background-color: var(--nd-dark-green); }
    to { background-color: transparent; }
}
@keyframes flash-failure {
    from { background-color: #d25f5f; }
    to { background-color: transparent; }
}
.add-training-program-set {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 2.3rem;
}
.add-training-program-set .set-actions {
    font-size: 1.1rem;
    padding: 1.7rem 1.2rem;
}
.add-training-program-set .set-overview {
    align-self: center;
    background-color: #fff;
    border-radius: 0 0.3rem 0.3rem 0;
    flex: 1 1 90%;
    padding: 1.1rem 0;
    text-align: center;
}
.add-training-program-set .set-overview.add-set {
    cursor: pointer;
}
.desktop-left-menu.d-2023 .group-exercises-panel {
    background-color: #f1f9f2;
    display: flex;
    gap: 1rem;
    /*    margin-bottom: 1.3rem;*/
    padding-bottom: 1.3rem;
    padding-top: 1.1rem;
    position: sticky;
    top: 0;
    z-index: 100;
}
#main-area-row .group-exercises-panel {
    background-color: #f1f9f2;
    /*    margin-bottom: 1.3rem;*/
    padding-bottom: 1.3rem;
    padding-top: 1.1rem;
    position: sticky;
    top: 0;
    z-index: 100;
}
.exercise-search-form.d-2023 {
    background-color: #f1f9f2;
    margin-top: 1.1rem;
    padding: 1.7rem;
}
/*
.exercise-search-form.d-2023 #SearchName {
    border: 1px solid #e8e8e8;
    border-radius: 1.7rem;
}
*/
.exercise-search-form.d-2023 .search-field {
    position: relative;
}
.exercise-search-form.d-2023 .search-form-field.visible {
    background: transparent;
    display: flex;
}
.exercise-search-form.d-2023 .search-form-field {
    /*background: transparent;
    display: none;
    position: absolute;
    right: -0.5rem;
    top: -1rem;
    z-index: 10;*/
}
.exercise-search-form.d-2023 .search-form-field input {
    border-color: #e8e8e8;
    border-top-left-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;
    border-right: 0;
    font-size: 0.8rem;
    height: 3rem;
}
.exercise-search-form.d-2023 .search-form-field .input-group-append {
    border: 1px solid #e8e8e8;
    border-top-right-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
}
.exercise-search-form.d-2023 .filters {
    column-gap: 0.8rem;
    display: flex;
    margin-top: 1.1rem;
}
.exercise-search-form.d-2023 .filter {
    max-width: 20%;
    width: 20%;
}
.exercise-search-form.d-2023 .filter label {
    font-size: 0.6rem;
    font-style: normal;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1.3rem;
    text-transform: uppercase;
}
.exercise-search-form.d-2023 .filter select {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 0.2rem;
    font-size: 0.8rem;
    font-weight: 400;
    height: 2.2rem;
    line-height: 1.3rem;
}
.exercise-search-form.d-2023 .filter-buttons {
    column-gap: 0.55rem;
    display: flex;
    margin-top: 1.7rem;
}
.exercise-search-form.d-2023 .filter-buttons button {
    background: #d5f1d9;
    border: 0;
    border-radius: 6px;
    color: var(--nd-dark-green);
    font-size: 0.55rem;
    font-weight: 400;
    line-height: 0.55rem;
    padding: 0.5rem;
    text-transform: uppercase;
}
.exercise-list-grid.d-2023 {
    column-gap: 0.55rem;
    justify-content: space-between;
}
.exercise-list-grid.d-2023 .exercise-list-item {
    border-radius: 0.25rem;
    display: flex;
    flex-basis: 24%;
    flex-direction: column;
    height: 16rem;
    justify-content: space-between;
    margin: 0 0 2.2rem 0;
    min-width: 10rem;
    padding: 0;
}
.exercise-list-grid.d-2023 .exercise-list-item .preview {
    margin-top: 0.55rem;
}
.exercise-list-grid.d-2023 .exercise-list-item .preview.rest {
    padding-left: 0;
    text-align: center;
    top: 20%;
}
.exercise-list-grid.d-2023 .exercise-list-item .preview.rest img {
    height: 4rem;
    position: relative;
}
.exercise-list-grid.d-2023 .exercise-list-item .title {
    padding: 0 0.5rem;
}
.exercise-list-grid.d-2023 .exercise-list-item .title a {
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.1rem;
}
.exercise-list-grid.d-2023 .exercise-list-item .actions {
    background-color: #f4f4f4;
    border: 0;
    border-radius: 0 0 0.25rem 0.25rem;
    height: 2rem;
    width: 100%;
}
.exercise-list-grid.d-2023 .exercise-list-item .actions .add-exercise-to-training-program {
    font-size: 3rem;
}
#addDayModal #page-2 .training-program-exercise-list-item,
#addDayModal #page-2 #trainingProgramExercises .item,
#training-plan-session-exercises-grid .item,
.training-program-content .item {
    background-color: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 0.3rem;
    display: grid;
    grid-template-columns: 4rem 1.5fr 1fr;
    grid-template-rows: 0.6fr 1.5fr;
    gap: 0px 0px;
    grid-template-areas:
        "move title actions"
        "empty training-data images";
    margin-bottom: 0.55rem;
    padding-bottom: 0.55rem;
}
#addDayModal #page-2 .training-program-content .item.rest,
#addDayModal #page-2 #trainingProgramExercises .item.rest,
#training-plan-session-exercises-grid .item.rest,
.training-program-content .item.rest {
    border: 1px solid #d8d8d8;
    border-radius: 0.3rem;
    grid-template-columns: 4rem 1.5fr 1fr;
    grid-template-areas: "move title actions";
    grid-template-rows: auto;
    padding-bottom: 0;
}
#addDayModal #page-2 .training-program-content .item .move,
#addDayModal #page-2 #trainingProgramExercises .item .move,
#training-plan-session-exercises-grid .item .move,
.training-program-content .item .move {
    background-color: var(--nd-dark-green);
    border-radius: 0.3rem 0 0 0;
    color: #fff;
    grid-area: move;
    margin-left: -1px;
    margin-top: -1px;
    padding: 1rem;
    width: 3rem;
}
#addDayModal #page-2 .training-program-content .item.rest .move,
#addDayModal #page-2 #trainingProgramExercises .item.rest .move,
#training-plan-session-exercises-grid .item.rest .move,
.training-program-content .item.rest .move {
    border-radius: 0.3rem 0 0 0.3rem;
}
#addDayModal #page-2 .training-program-exercise-list-item .title,
#addDayModal #page-2 #trainingProgramExercises .item .title,
#training-plan-session-exercises-grid .item .title,
.training-program-content .item .title {
    align-self: center;
    color: #2a2a2a;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3rem;
    grid-area: title;
}
#addDayModal #page-2 .training-program-content .item .actions,
#addDayModal #page-2 #trainingProgramExercises .item .actions,
#training-plan-session-exercises-grid .item .actions,
.training-program-content .item .actions {
    align-self: center;
    grid-area: actions;
    padding-right: 1.2rem;
    text-align: right;
    z-index: 2;
}
#addDayModal #page-2 .training-program-content .item .actions button,
#addDayModal #page-2 #trainingProgramExercises .item .actions button,
#training-plan-session-exercises-grid .item .actions .button,
.training-program-content .item .actions button {
    background-color: #fff;
    border: 0;
    font-size: 1.1rem;
    line-height: 1.1rem;
    margin-left: 0.5rem;
}
#addDayModal #page-2 .training-program-content .item .images,
#addDayModal #page-2 #trainingProgramExercises .item .images,
#training-plan-session-exercises-grid .item .images,
.training-program-content .item .images {
    display: flex;
    grid-area: images;
    margin-top: -2rem;
    padding-right: 1.2rem;
}
#addDayModal #page-2 .training-program-content .item .images,
#addDayModal #page-2 #trainingProgramExercises .item .images,
.trainingprogram-controller.edit-action #training-plan-session-exercises-grid .item .images,
.trainingplansession-controller.edit-action .training-program-content .item .images,
.trainingsession-controller.edit-action .training-program-content .item .images,
.trainingprogram-controller.edit-action .training-program-content .item .images {
    margin-left: -2rem;
    margin-right: 2rem;
    margin-top: 0;
    padding-right: 0;
}
#training-plan-session-exercises-grid .item .images img,
.training-program-content .item .images img {
    max-height: 6rem;
    max-width: 6rem;
    position: absolute;
}
#addDayModal #page-2 .training-program-content .item .images img,
#addDayModal #page-2 #trainingProgramExercises .item .images img,
.trainingprogram-controller.edit-action #training-plan-session-exercises-grid .item .images img,
.trainingplansession-controller.edit-action .training-program-content .item .images img,
.trainingsession-controller.edit-action .training-program-content .item .images div:not(.only-video) img,
.trainingprogram-controller.edit-action .training-program-content .item .images div:not(.only-video) img {
    max-height: 5rem;
    max-width: 5rem;
    position: absolute;
}
.trainingsession-controller.edit-action .training-program-content .item .images #training-video img,
.trainingprogram-controller.edit-action .training-program-content .item .images #training-video img {
    position: relative;
}
#addDayModal #page-2 .training-program-content .item .training-data,
#addDayModal #page-2 #trainingProgramExercises .item .training-data,
#training-plan-session-exercises-grid .item .training-data,
.training-program-content .item .training-data {
    font-size: 0.8rem;
    font-weight: 400;
    grid-area: training-data;
    line-height: 1.1rem;
    padding-top: 0.5rem;
}
.training-program-content .item .training-data {
    padding-right: 1rem;
}
#addDayModal #page-2 .training-program-content .item .training-notes,
#addDayModal #page-2 #trainingProgramExercises .item .training-notes,
#training-plan-session-exercises-grid .item .training-notes,
.training-program-content .item .training-notes {
    font-size: 0.8rem;
    font-weight: 400;
    grid-area: training-notes;
    line-height: 1.1rem;
}
#training-plan-session-exercises-grid .item .empty,
.training-program-content .item .empty {
    grid-area: empty;
}
.training-set {
    background-color: #f4f4f4;
    border: 1px solid #d8d8d8;
    border-radius: 0.3rem;
    display: flex;
    flex-direction: row;
    margin-bottom: 0.55rem;
}
.training-calendar-day .training-session .training-set {
    background-color: #414141;
    border: 1px solid #414141;
    flex-direction: column;
    margin-left: -1rem;
    margin-right: -1rem;
    width: calc(100% + 2rem);
}
.training-calendar-day .training-session .training-set .training-set-content .training-exercise-item {
    border: 0;
}
.training-set .training-set-content {
    display: flex;
    flex-direction: column;
    padding: 0.55rem;
    row-gap: 0.55rem;
    width: 100%;
}
.training-set .training-set-content .item,
.fixed-bottom-container #training-program-contents .training-exercise {
    background-color: white;
    border-radius: 0.3rem;
    margin: 0;
    padding: 0.5rem;
}
.fixed-bottom-container #training-program-contents .training-exercise.rest .training-exercise-name {
    padding: 0;
}
.fixed-bottom-container #training-program-contents .training-exercise.rest .training-exercise-actions {
    margin-top: 0.5rem;
}
.training-set > .actions {
    align-items: center;
    background-color: var(--nd-ocean);
    border-radius: 0.3rem 0 0 0.3rem;
    color: #fff;
    display: flex;
    flex: 0 1 3rem;
    flex-direction: column;
    margin-left: -1px;
    margin-top: -1px;
    padding: 1rem;
    width: 3rem;
}
.training-calendar-day .training-session .training-set > .actions {
    align-items: flex-start;
    background-color: #414141;
    flex: 0 1 2rem;
    flex-direction: row;
    padding: 0;
    width: 100%;
}
.training-calendar-day .training-session .training-set > .actions .training-set-toggle {
    padding: 0.5rem 0rem 0.5rem 1rem;
}
.training-calendar-day .training-session .training-set > .actions .training-set-toggle i {
    vertical-align: bottom;
}
.training-set > .actions button {
    background-color: var(--nd-ocean);
    border: 0;
    color: #fff;
    font-size: 1.1rem;
    line-height: 1.1rem;
}
.training-set > .actions .title {
    line-height: 16px;
    margin: 1.7rem 0;
    transform: rotate(180deg);
    writing-mode: vertical-rl;
}
.training-calendar-day .training-session .training-set > .actions .title {
    margin: 1rem 0 0.5rem 0.5rem;
    transform: none;
    writing-mode: initial;
}
.training-set > .actions .duplicate-training-set-button,
.training-set > .actions .break-up-training-set-button {
    margin: 1.7rem 0 0 0;
}
#training-program-contents .training-set > .actions .duplicate-training-set-button,
#training-program-contents .training-set > .actions .break-up-training-set-button {
    padding: 0;
}
#trainingProgramContent .item .move input[type="checkbox"] {
    height: 1rem;
    width: 1rem;
}
.exercise-list-item.dragging-item {
    background-color: #fff;
    width: 100%;
}
.exercise-list-item.dragging-item .actions {
    display: none;
}
.drag-and-drop-target {
    background-color: #d5f1d9;
    font-size: 0.9rem;
    padding: 1rem;
    text-align: center;
}
@media (min-width: 768px) {
    #main-grid.d-2023 {
        padding-left: 1.65rem;
    }
    .add-training-program-set .set-actions {
        background-color: var(--nd-ocean);
        border-radius: 0.3rem 0 0 0.3rem;
        color: #fff;
        flex: 0 1 9%;
        font-size: 0.75rem;
        font-weight: 300;
        line-height: normal;
        padding: 1.7rem 0.75rem;
        text-align: center;
    }
    .add-training-program-set .set-actions i {
        font-size: 1.7rem;
        font-weight: 300;
        letter-spacing: normal;
        line-height: normal;
        margin-right: 0.5rem;
    }
    .training-set .training-set-content .item:not(.rest) {
        padding: 0 0 0.5rem 0;
    }
    .training-set .training-set-content .item.rest {
        padding: 0;
    }
}
@media (min-width: 768px) {
    #main-grid.d-2023 {
        padding-left: 1.65rem;
    }
}
/*#endregion */

.multiple-iterations-info {
    background-color: rgba(0,0,0,1);
    top: 0;
    color: #fff;
    display: none;
    height: 3rem;
    line-height: 1;
    max-width: 500px;
    padding: 1rem;
    position: absolute;
    width: 100%;
    z-index: 2000;
}
.exercise-timer {
    background-color: rgba(0,0,0,1);
    bottom: 0;
    color: #fff;
    display: none;
    height: 10rem;
    margin-bottom: 0;
    max-width: 500px;
    padding: 1rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
}
.exercise-timer .timer-actions {
    align-items: center;
    display: flex;
}
.exercise-timer .timer-actions .icon {
    flex: 0 1 auto;
    font-size: 170%;
    line-height: 1.6rem;
}
.exercise-timer .timer-actions .text {
    flex: 1 1 auto;
    font-size: 90%;
    margin-left: 0.7rem;
}
.exercise-timer .timer-actions .close-button {
    flex: 0 1 auto;
    font-size: 135%;
}
.exercise-timer .time {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    text-align: center;
}
.exercise-timer .time .minutes-block,
.exercise-timer .time .seconds-block {
    font-size: 350%;
    font-weight: 900;
    line-height: 1.5rem;
}
.exercise-timer .time .minutes-block .minutes-text,
.exercise-timer .time .seconds-block .seconds-text {
    font-size: 100%;
}
.exercise-timer .time-label {
    font-size: 20%;
    font-weight: 400;
    line-height: 1.1rem;
}

/*#region Colour themes */
.themes {
    column-gap: 1.5rem;
    display: flex;
    flex-direction: row;
}
.theme {
    border: 1px solid transparent;
    cursor: pointer;
    padding: 0.5rem;
}
.theme.selected {
    border: 1px solid #2d2d2d;
    border-radius: 0.25rem;
}
.theme-colour {
    border: 1px solid #d8d8d8;
    border-radius: 0.25rem;
    height: 3rem;
    width: 3rem;
}
.theme-colour.default {
    background-color: var(--nd-dark-green);
}
.theme-colour.dark {
    background-color: #2d2d2d;
}
.theme-colour.light {
    background-color: #f1f9f2;
}
.theme-colour.own-colour {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: none;
    border-radius: 0.25rem;
}
.theme-colour.own-colour::-webkit-color-swatch,
.theme-colour.own-colour::-moz-color-swatch {
    border: none;
    border-radius: 0.25rem;
    height: 3rem;
    width: 3rem;
}
.theme-name {
    font-size: 0.7rem;
    font-weight: 400;
    line-height: 1.3rem;
    text-align: center;
}
.theme-preview {
    border: 0.75rem solid #2d2d2d;
    border-radius: 0.75rem;
    height: 33rem;
    margin: auto;
    position: relative;
    width: 16rem;
}
.theme-preview .light-colour {
    height: 18rem;
    position: absolute;
    top: 0;
    width: 100%;
}
.theme-preview .dark-colour {
    height: 13.5rem;
    position: absolute;
    top: 18rem;
    width: 100%;
}
.theme-preview .site-start img {
    height: auto;
    position: absolute;
    top: 0;
    width: 100%;
}
/*#endregion */

#main-grid #preventingLayer {
    background-color: #ddd;
    border-radius: 0.33rem;
    margin: -1rem;
    opacity: 0.75;
    position: absolute;
    z-index: 1000000;
}

/*#region GU CLI specific */
body.mobile-client-body .container-with-overlap.cli-info h6 {
    font-weight: 900;
    margin-bottom: 1rem;
}
body.mobile-client-body .container-with-overlap.cli-info table tbody {
    background-color: #eee;
}
body.mobile-client-body .container-with-overlap.cli-info table tbody td {
    vertical-align: middle;
}
body.mobile-client-body .container-with-overlap.cli-info table .cli-green-bg {
    background-color: var(--nd-dark-green);
}
body.mobile-client-body .container-with-overlap.cli-info table .cli-yellow-bg {
    background-color: #ffc107;
}
body.mobile-client-body .container-with-overlap.cli-info .cli-red-bg {
    background-color: #e66464;
}
/*#endregion */

.showmealgroupsummary-action .copy-button,
.diaryasclient-action .copy-button,
.client-controller.fooddiary-action .copy-button,
.fooddiaryasclient-action .copy-button,
.editfoodsasclient-action .copy-button,
body.print .copy-button {
    display: none;
}

@media only screen and (max-width: 767px) {
    body > iframe.a {
        display: none;
    }
}
.trainingprogram-controller.edit-action > iframe.a,
.trainingsession-controller.edit-action > iframe.a {
    display: none;
}
/*#region Surveys */
.edit-survey-action-buttons {
    margin: -3rem 0 1rem 0 !important;
    width: 100%;
}
.survey-alert {
    clear: both;
}
#main-grid .survey-description {
    margin-top: 1rem;
    white-space: pre;
}
#survey-content,
#surveyContent {
    clear: both;
    margin-top: 2rem;
}
#survey-content .question,
#surveyContent .question {
    background-color: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 0.3rem;
    display: grid;
    grid-template-columns: 4rem 1.5fr 1fr;
    grid-template-rows: 0.6fr 1.5fr;
    gap: 0px 0px;
    grid-template-areas:
        "move title actions"
        "empty questioncontent questioncontent";
    /*margin-bottom: 0.55rem;*/
    padding-bottom: 0.55rem;
}
.adminstats-action #survey-content.survey-content-stats .question {
    border: 0;
    padding: 1.6rem 1rem;
}
#survey-content .survey-question-container .survey-add-question,
#surveyContent .survey-question-container .survey-add-question {
    align-items: center;
    color: #2a2a2a;
    cursor: pointer;
    display: flex;
    font-size: 1.1rem;
    font-weight: 600;
    justify-content: center;
    letter-spacing: normal;
    line-height: normal;
    padding: 1.4rem 1.1rem;
    text-align: center;
}
#main-grid #survey-content .survey-question-container .survey-add-question i,
#main-grid #surveyContent .survey-question-container .survey-add-question i {
    font-size: 1.7rem;
    font-weight: 300;
    letter-spacing: normal;
    line-height: normal;
    margin-right: 0.5rem;
}
#survey-content .survey-question-container .survey-question-actions,
#surveyContent .survey-question-container .survey-question-actions {
    background-color: #272727;
    border-radius: 0.3rem 0 0 0.3rem;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 300;
    line-height: normal;
    padding: 1.7rem 0.75rem;
    text-align: center;
    width: 3rem;
}

#main-grid #survey-content .survey-question-container .survey-question-actions,
#main-grid #surveyContent .survey-question-container .survey-question-actions {
    cursor: pointer;
}
.surveys-list .survey-answer-history button,
.survey-content-stats .survey-answer-history button {
    background-color: #2d2d2d;
    border-radius: 0.85rem;
    color: #fff;
    cursor: pointer;
    font-size: 0.66rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: 0.27px;
    line-height: normal;
    padding: 0.4rem 1.2rem;
    text-align: center;
    text-transform: uppercase;
}
.survey-content-stats .survey-answer-history {
    margin-top: 1rem;
}
.surveys-list .survey-answer-history-list,
.survey-content-stats .survey-answer-history-list {
    background-color: #eee;
    border-radius: 0.3rem;
    display: none;
    margin-top: 1rem;
    padding: 0.5rem 1rem;
}
.surveys-list .answer-history-row {
    border-bottom: 1px solid #aaa;
    margin-bottom: 1rem;
}
.surveys-list .answer-history-row .timestamp {
    font-size: 0.6rem;
    font-style: italic;
    margin-bottom: 0;
}
.surveys-list .answer-history-row .content {
    margin-bottom: 1rem;
}
#survey-content .question .move,
#surveyContent .question .move {
    background-color: var(--nd-dark-green);
    border-radius: 0.3rem 0 0 0;
    color: #fff;
    grid-area: move;
    margin-left: -1px;
    margin-top: -1px;
    padding: 1rem;
    width: 3rem;
}
#survey-content .question .title,
#surveyContent .question .title {
    align-self: center;
    color: #2a2a2a;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3rem;
    grid-area: title;
}
#survey-content .question .title .title-edit,
#survey-content .question .question-content .title-edit,
#surveyContent .question .title .title-edit,
#surveyContent .question .question-content .title-edit {
    background-color: var(--nd-dark-green)22;
    border: 1px solid var(--nd-dark-green)44;
    border-radius: 0.25rem;
    margin-top: 1rem;
    padding: 1rem;
    width: 80%;
}
#survey-content .question .question-content.yesno-content,
#surveyContent .question .question-content.yesno-content,
.survey-question .question-content.yesno-content {
    display: flex;
    flex-direction: row;
    gap: 2rem;
}
#survey-content .question .title button.save,
#survey-content .question .question-content button.save,
#surveyContent .question .title button.save,
#surveyContent .question .question-content button.save {
    color: var(--nd-dark-green);
    padding: 0.25rem;
    position: relative;
    top: -2rem;
}
#survey-content .question .title button.cancel,
#survey-content .question .question-content button.cancel,
#surveyContent .question .title button.cancel,
#surveyContent .question .question-content button.cancel {
    color: #d25f5f;
    padding: 0.25rem;
    position: relative;
    top: -2rem;
}
#survey-content .question .actions,
#surveyContent .question .actions {
    align-content: center;
    grid-area: actions;
    justify-self: end;
    padding-right: 1rem;
}
#survey-content .question .actions > button,
#surveyContent .question .actions > button {
    background-color: #fff;
    border: 0;
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.1rem;
    margin-left: 1rem;
}
#survey-content .question .question-content,
#surveyContent .question .question-content {
    grid-area: questioncontent;
    padding-right: 2rem;
}
.white-space-break,
#survey-content .question .question-content .comment-text,
#surveyContent .question .question-content .comment-text {
    white-space: break-spaces;
}
#survey-content .question .rating-labels,
#surveyContent .question .rating-labels,
.mobile-client-body .surveys-list .survey-question .rating-labels {
    font-size: 0.85rem;
    font-weight: 500;
    height: 2rem;
    line-height: 1.1rem;
    position: relative;
}
#survey-content .question .rating-label,
#surveyContent .question .rating-label,
.mobile-client-body .surveys-list .survey-question .rating-label {
    cursor: pointer;
    display: inline-block;
    position: absolute;
}
#survey-content .question .rating-1::before,
#survey-content .question .rating-7::after,
#surveyContent .question .rating-1::before,
#surveyContent .question .rating-7::after,
.mobile-client-body .surveys-list .survey-question .rating-1::before,
.mobile-client-body .surveys-list .survey-question .rating-7::after {
    border-left: 1px solid black;
    content: '';
    position: relative;
    top: 2.6rem;
}
#survey-content .question .rating-2,
#surveyContent .question .rating-2,
.mobile-client-body .surveys-list .survey-question .rating-2 {
    font-size: 0.4rem;
    left: calc(16.6% + 0.5rem);
}
#survey-content .question .rating-2::before,
#survey-content .question .rating-3::before,
#survey-content .question .rating-5::before,
#survey-content .question .rating-6::before,
#surveyContent .question .rating-2::before,
#surveyContent .question .rating-3::before,
#surveyContent .question .rating-5::before,
#surveyContent .question .rating-6::before,
.mobile-client-body .surveys-list .survey-question .rating-2::before,
.mobile-client-body .surveys-list .survey-question .rating-3::before, 
.mobile-client-body .surveys-list .survey-question .rating-5::before,
.mobile-client-body .surveys-list .survey-question .rating-6::before {
    border-left: 1px solid #222;
    content: '';
    position: relative;
    top: 2.6rem;
}
#survey-content .question .rating-3,
#surveyContent .question .rating-3,
.mobile-client-body .surveys-list .survey-question .rating-3 {
    font-size: 0.4rem;
    left: calc(33.3% + 0.5rem);
}
#survey-content .question .rating-4,
#surveyContent .question .rating-4,
.mobile-client-body .surveys-list .survey-question .rating-4 {
    left: calc(50% - 1rem);
}
/*
#survey-content .question .question-content .rating-label-4::before {
    border-left: 1px solid black;
    content: '';
    position: relative;
    top: 2.6rem;
}
*/
#survey-content .question .rating-5,
#surveyContent .question .rating-5,
.mobile-client-body .surveys-list .survey-question .rating-5 {
    font-size: 0.4rem;
    left: calc(66.7% - 0.5rem);
}
#survey-content .question .rating-6,
#surveyContent .question .rating-6,
.mobile-client-body .surveys-list .survey-question .rating-6 {
    font-size: 0.4rem;
    left: calc(83.3% - 0.5rem);
}
#survey-content .question .rating-7,
#surveyContent .question .rating-7,
.mobile-client-body .surveys-list .survey-question .rating-7 {
    right: 0;
}
#survey-content input[type="range"],
#surveyContent input[type="range"],
.mobile-client-body .surveys-list .survey-question input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    cursor: pointer;
    width: 100%;
}
#survey-content input[type="range"]::-webkit-slider-runnable-track,
#surveyContent input[type="range"]::-webkit-slider-runnable-track,
.mobile-client-body .surveys-list .survey-question input[type="range"]::-webkit-slider-runnable-track {
    background-color: #222;
    height: 1px;
}
#survey-content input[type="range"]::-webkit-slider-thumb,
#surveyContent input[type="range"]::-webkit-slider-thumb,
.mobile-client-body .surveys-list .survey-question input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: #222;
    border-radius: 2rem;
    color: white;
    height: 2rem;
    margin-top: -1rem;
    width: 2rem;
}
.survey-modal .modal-body {
    display: flex;
    flex-direction: row;
    padding: 0;
}
.survey-modal .modal-body .modal-actions {
    background-color: #272727;
    color: #fff;
    flex: 0 0 2rem;
    padding: 1rem;
}
.survey-modal .modal-body .modal-body-content {
    flex: 1 1 auto;
    padding: 1rem;
}
.survey-modal .modal-body .input-group-text {
    background-color: #272727;
    border: 1px solid #272727;
    color: #fff;
}
.survey-modal .modal-body .custom-select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url(../images/angle-down.svg);
    background-position: center right 1rem;
    background-repeat: no-repeat;
    background-size: .8rem;
    height: 4rem;
}
.survey-modal .modal-body .custom-checkbox-inline {
    display: inline-block;
    margin-right: 2rem;
}
.survey-modal .modal-body .custom-checkbox-inline .custom-checkbox-input:checked ~ .custom-checkbox-span {
    background-color: #272727;
}
.survey-modal .modal-body .date-time-row {
    display: flex;
    visibility: hidden;
}
.survey-modal .modal-body .monthly-row {
    display: none;
}
.survey-modal .modal-body .hide {
    display: none;
}
.mobile-client-body .surveys-list .survey-question {
    color: #272727;
    padding: 1.6rem 1rem;
}
.mobile-client-body .surveys-list .survey-question h5,
.adminstats-action #survey-content .question h5 {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.6rem;
    margin-top: 0;
    padding-bottom: 1.1rem;
    text-transform: none;
    width: 100%;
}
.mobile-client-body .surveys-list .survey-question .sender {
    color: #272727;
    font-size: 0.8rem;
    font-style: italic;
}
.mobile-client-body .surveys-list .survey-question textarea {
    border: 1px solid #ccc;

}
/*#endregion */

#todays-meals .existing-meal-button-lower i.fal:not(.fa-camera, .fa-barcode-read),
#replaced-meals .existing-meal-button-lower i.fal:not(.fa-camera, .fa-barcode-read) {
    position: absolute;
    right: 0.25rem;
    top: 1rem;
}
#right-grid #main-as-client-grid .as-client-diagram-area #meal-contents .row.footer {
    margin-bottom: 2rem;
}
#right-grid #main-as-client-grid .as-client-diagram-area #meal-contents .row-header-subtitle .action-col,
.editfoodsasclient-action #main-as-client-grid .as-client-diagram-area #meal-contents .row-header-subtitle .action-col {
    text-align: right;
}
#close-edit-foods-section,
#close-edit-activities-section {
    cursor: pointer;
    left: 2rem;
    position: absolute;
    top: 1rem;
}
#search-section {
    max-height: 50vh;
    overflow-y: scroll;
}
#search-section .search-form {
    background-color: transparent;
}
#search-section + #main-as-client-grid {
    border-top: 1px solid #e8e8e8;
    margin-top: 2rem;
    padding-top: 0rem;
}

/*#region Photo scanning of meals */
.photoscanning-icon {
    margin-left: 0.25rem;
}
.photoscanning-icon img {
    height: 1rem;
    vertical-align: super;
}
#photoscan-image {
    display: none;
}
body:not(.mealschedule-controller) .editfoods-action .search-form {
    display: flex;
    gap: 1rem;
}
body:not(.mealschedule-controller) .editfoods-action .search-form {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    justify-content: space-between;
}
.search-form input.new-search-form-input {
    background: transparent;
    border-bottom: 1px dotted #fff;
    border-radius: 0;
    color: #fff;
    display: none;
    font-size: 18px;
    padding: 0;
}
.search-form-button {
    align-items: center;
    background-color: rgba(82, 134, 83, 0.3);
    border-radius: 7px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-self: flex-start;
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    width: 6rem;
}
.search-form-button.expanded {
    display: flex;
    flex-direction: row;
    width: 100%;
}
.search-form-button.expanded input {
    display: block;
    margin-right: 1rem;
    width: 100%;
}
.search-form-button i {
    font-size: 2.8rem;
}
.search-form-button img {
    height: 2.8rem;
}
.search-form-button.search-button {
    position: relative;
}
.search-form-button.search-button .fa-times {
    font-size: 1rem;
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
}
.search-form-button.mini {
    background-color: var(--nd-dark-green);
    border-radius: 1rem;
    justify-content: center;
    margin-right: 1rem;
    padding: 0.5rem;
    width: 3rem;
}
.search-form-button.mini img {
    height: 1rem;
}
.editfoods-action .search-form .search-results {
    box-shadow: 0 0 40px -10px rgba(0, 0, 0, 0.4);
}
.search-form-button div {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 51px;
}
.search-form-button span {
    font-family: HKGrotesk;
    font-size: 56%;
    font-weight: 700;
    line-height: 12px;
    margin-top: 0.5rem;
    text-transform: uppercase;
    text-wrap: nowrap;
}
.new-search-form-input::placeholder {
    color: #cecece;
    opacity: 1; /* Firefox */
}
.new-search-form-input::-ms-input-placeholder {
    color: #cecece;
}
/*#endregion */

#showErrorMessageModal ol {
    text-align: left;
}

/*#region Diet4PainRelief */
.d4pf-question h6 {
    font-weight: 700;
}
.d4pf-question .custom-checkbox-span {
    top: -8%;
}
/*#endregion */

body.trainingprogram-controller.edit-action .desktop-left-menu,
body.trainingprogram-controller.edit-action #main-grid,
body.trainingprogram-controller.edit-action .desktop-left-menu,
body.trainingprogram-controller.edit-action #main-grid {
    max-height: 100vh;
    overflow-y: scroll;
}

/*#region SwapFood */
body.swapfood-action .title-area {
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 2rem;
}
.help-guide::before {
    align-items: center;
    box-shadow: 0 0 0 2px white;
    background: var(--nd-dark-green);
    border-radius: 50%;
    color: white;
    content: attr(data-badge);
    display: flex;
    font-size: 0.7em;
    font-weight: 700;
    height: 1.2em;
    justify-content: center;
    left: -0.6em;
    position: absolute;
    top: -0.6em;
    width: 1.2em;
}
/*#endregion */

/*#region Manual */
.manual-action-buttons {
    display: flex;
}
.manual-action-buttons .action-button {
    background-color: transparent;
    border-radius: 16px;
    color: #222;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
    text-transform: none;
}
.visibility-button-group button {
    font-size: 0.9rem;
}
.list-group-item.manual-section {
    background-color: inherit;
    border: 0;
    display: flex;
    flex-wrap: wrap;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 24px;
    margin: 12px 0;
    padding: 0 8px;
}
.manual-section-name {
    align-content: center;
    flex: 1 0 auto;
}
.manual-sections .sub-section-name {
    flex: 1 0 auto;
    font-weight: 400;
}
.list-group-item.manual-section .toggler {
    align-content: center;
}
.list-group-item.manual-section .list-group-items {
    flex: 1 0 100%;
}
.list-group-item.manual-section .list-group-items .list-group-item {
    background-color: transparent;
    border: 0;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 24px;
    padding: 0.5rem 0;
}
.manual-section > .list-group-items > .list-group-item {
    align-items: center;
    display: flex;
}
.manual-section > .list-group-items > .list-group-item.active .fal,
.manual-section > .list-group-items > .list-group-item.active .sub-section-name {
    color: #272727;
    font-weight: 900;
}
.manual-section > .list-group-items > .list-group-item .fa-dot-circle {
    font-size: 12px;
}
.expanding-button {
    align-items: center;
    background-color: transparent;
    display: flex;
    margin-right: 3px;
    max-width: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
    white-space: nowrap;
}
.expanding-button:hover {
    background-color: var(--nd-dark-green)1a;
    max-width: 20rem;
}
.expanding-button span {
    font-weight: 600;
    margin-left: 0.5rem;
    opacity: 0;
    transition: opacity 0.1s ease;
}
.expanding-button:hover span {
    opacity: 1;
}
.visibility-button-group {
    background-color: #fff;
    border-radius: 22px;
    display: inline-flex;
    height: 44px;
    position: relative;
}
.visibility-button-group .tab {
    background: none;
    border: none;
    border-radius: 22px;
    color: #528653;
    cursor: pointer;
    flex: 1 1 auto;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    padding: 16px 8px;
    position: relative;
    text-transform: uppercase;
    transition: color 0.25s;
    z-index: 2;
}
.visibility-button-group .tab.active {
    background-color: var(--nd-dark-green);
    color: #fff;
}
.visibility-button-group .pill {
    background: var(--nd-dark-green);
    border-radius: 22px;
    height: 44px;
    left: 6px;
    position: absolute;
    top: 0;
    transition: transform 0.30s ease;
    width: calc((100% - 6px) / 3);
    z-index: 1;
}
/*#endregion */

.row.bg-dark-green.drop-shadow {
    box-shadow: 0px 3rem 40px -10px #0000004D;
}
.manual-sections.grouped-list-main-container {
    background-color: #fff;
    margin-left: 9px;
    margin-right: 9px;
}
.filter-manual-container.tab-bar-container {
    padding-left: 20px;
    padding-right: 20px;
}
/*#region Generic Grouped List Container */
.grouped-list-main-container {
    padding: 29px 20px 0 20px;
}
.grouped-list-main-container .grouped-list-group {
    border-bottom: 1px solid var(--nd-light-grey-1);
    margin-bottom: 20px;
    min-height: 66px;
    position: relative;
}
.grouped-list-main-container.client .grouped-list-group {
    border-bottom: 0;
    margin-bottom: 0;
}
.grouped-list-main-container:not(.client) .grouped-list-group .grouped-list-group-items {
    margin-top: 21px;
}
.grouped-list-main-container.client .grouped-list-group:last-child .grouped-list-group-items .grouped-list-group-item:last-child {
    padding-bottom: 21px;
}
.grouped-list-main-container .grouped-list-group .grouped-list-group-items .grouped-list-group-item {
    background-color: var(--nd-light-grey-2);
    padding-left: 17px;
    padding-right: 1px;
    padding-top: 10px;
}
.grouped-list-main-container:not(.client) .grouped-list-group .grouped-list-group-items .grouped-list-group-item[data-included="true"]:first-child {
    padding-top: 25px;
}
.grouped-list-main-container:not(.client) .grouped-list-group .grouped-list-group-items .grouped-list-group-item[data-included="true"]:last-of-type{
    padding-bottom: 31px;
}
.grouped-list-main-container .grouped-list-group .grouped-list-group-name {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 24px;
}
.grouped-list-main-container .grouped-list-group .grouped-list-group-description {
    color: #666;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 22px;
}
.grouped-list-main-container .grouped-list-group .toggler {
    font-size: 30px;
    font-weight: 300;
    line-height: 22px;
    position: absolute;
    right: 1rem;
    top: 8px;
    vertical-align: middle;
}
.grouped-list-main-container .grouped-list-group .grouped-list-group-item .fal {
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 24px;
}
.grouped-list-main-container .grouped-list-group .grouped-list-group-item .sub-section-name {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 24px;
}
.grouped-list-main-container .grouped-list-group .grouped-list-group-item .sub-section-name a {
    color: #272727;
}
.showsubsection-action .manual-sections.grouped-list-main-container img,
.showsubsection-action .manual-sections.grouped-list-main-container iframe {
    height: auto;
    width: 100%
}
/*#endregion */