body {
    height: 100vh;
    /* TODO Zasim: The variable '--mud-palette-primary' is populated with a delay, causing the background to initially display the wrong color on iPad */
    background-color: #43b2f0;
    /*background-color: var(--mud-palette-primary); */
    background-image: url(../images/background/bg3.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}

.clickable-paper:hover {
    border: dashed;
    border-width: 1px;
    cursor: pointer;
}

.text-single-line {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    /* number of lines to show */
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "1%");
    display: flex;
}

.font-small {
    font-weight: 300;
}

.font-regular {
    font-weight: 400;
}

.font-medium {
    font-weight: 500;
}

.font-bold {
    font-weight: 700;
}

.font-size-regular {
    font-size: 1.125rem;
}

.mobile .font-size-regular {
    font-size: 1rem;
}

.font-size-medium {
    font-size: 2.375rem;
}

.line-height-small {
    line-height: 1.4375rem;
}

.line-height-regular {
    line-height: 1.5625rem;
}

.line-height-medium {
    line-height: 1.625rem;
}

.line-height-high {
    line-height: 1.8125rem;
}

.border-radius-medium {
    border-radius: 2.5rem;
}

.overflow-wrapper {
    overflow: auto;
    height: 100%;
}

.no-wrap {
    white-space: nowrap;
}

.page-title {
    font-size: 2.375rem;
}

.contrast-color {
    color: var(--mud-palette-tertiary-text);
}

.margin-bottom-05 {
    margin-bottom: .5rem;
}

.app-version {
    position: absolute;
    bottom: 1rem;
    font-weight: 400;
    font-size: .7rem;
    opacity: .8;
}

/*#region Update version button*/
.floating-update-button {
    padding: .3rem 1.5rem .5rem;
    position: absolute;
    z-index: 10001;
    top: 0.1rem;
    left: 50%;
    transform: translate(-50%, 0);
    animation: fadein 1s ease-out;
}

@keyframes fadein {
    from {
        opacity: 0;
        top: -10rem;
    }

    to {
        opacity: 1;
        top: 0.1rem;
    }
}
/*#endregion Update version button*/

/*#region Appbar*/
.mobile {
    --mud-appbar-height: 9rem;
}

.mud-appbar .mud-toolbar-appbar {
    min-height: var(--mud-appbar-height);
    padding-right: 1.87rem;
    padding-left: 2.5rem;
}

.mobile .mud-appbar .mud-toolbar-appbar {
    display: flex;
    flex-direction: column;
    min-height: unset;
    padding: .62rem .69rem 1.07rem 1.5rem;
    color: #F3FAFF;
}

.mud-appbar .mud-toolbar-appbar > div {
    width: 100%;
}

@media (min-width: 960px) {
    .collapsed-menu-bt {
        display: none;
    }
}

div[class^="background-titlebar_"] {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.background-titlebar_default {
    background: var(--mud-palette-secondary);
    border-radius: 0rem 0rem 2.5rem 2.5rem;
}
.mud-drawer.mud-drawer-persistent.mud-drawer-pos-left.mud-drawer--open {
    left: auto;
}
/*#endregion Appbar*/

/*#region No Data*/
.weeks.contact.no-data,
.assessments.contact.no-data {
    margin-right: .63rem;
    padding: 2.5rem;
    border-radius: 2.5rem;
    background-color: #F3FAFF;
}

.contact.no-data .contact-wrapper {
    margin-right: 1.5rem;
    border-radius: 1.25rem;
    background: rgba(243, 250, 255, 0.30);
}

.contact.no-data img {
    width: 38%;
    height: 16.5rem;
    border-radius: 1.875rem;
    margin-right: 3rem;
}

.no-data .next-class-name {
    margin-bottom: 1.5rem;
    -webkit-line-clamp: 3;
}

.mobile .no-data .next-class-name {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.contact.no-data .mud-button {
    width: fit-content;
    width: -moz-fit-content;
    height: 3.75rem;
    margin-top: 1.5rem;
}
/*#endregion No Data*/

/*#region Nav Menu*/
.left-nav-menu {
    margin-top: 1.44rem;
}

.left-nav-menu .mud-nav-link {
    margin-right: .9rem;
    margin-left: .9rem;
    padding: .75rem .9rem;
    border: none;
    border-radius: .5rem;
}

.left-nav-menu .mud-nav-link-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: unset;
}

.left-nav-menu.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: white;
    background-color: rgba(255, 255, 255, 0.20);
    border: none;
    outline: unset;
    text-decoration: none;
}

.left-nav-menu.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled):hover:not(.mud-nav-link-disabled),
.left-nav-menu.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled):focus-visible:not(.mud-nav-link-disabled) {
    border-radius: .5rem;
    color: white;
}

.mud-nav-link:hover:not(.mud-nav-link-disabled) {
    color: white;
}

.mud-ripple:after {
    width: unset;
    height: unset;
}

.left-nav-menu .menu-img,
.left-nav-menu .mud-badge-root {
    width: 2rem;
    height: 2rem;
    margin-bottom: .4rem;
}

.left-nav-menu .mud-badge-root .menu-img-badge {
    clip-path: polygon( 100% 62.169%,100% 62.169%,99.488% 62.232%,98.973% 62.288%,98.457% 62.337%,97.939% 62.38%,97.419% 62.416%,96.897% 62.446%,96.373% 62.47%,95.848% 62.487%,95.321% 62.497%,94.792% 62.5%,94.792% 62.5%,88.202% 61.968%,81.951% 60.429%,76.122% 57.965%,70.799% 54.662%,66.065% 50.601%,62.005% 45.868%,58.701% 40.544%,56.238% 34.716%,54.698% 28.465%,54.167% 21.875%,54.167% 21.875%,54.236% 19.476%,54.443% 17.113%,54.782% 14.792%,55.251% 12.514%,55.844% 10.285%,56.559% 8.108%,57.391% 5.988%,58.337% 3.927%,59.393% 1.929%,60.555% 0%,0% 0%,0% 100%,100% 100%,100% 62.169% );
}

.left-nav-menu .mud-badge.mud-badge-default {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.4rem;
    min-width: unset;
    height: 1.4rem;
    padding: 0;
    border-radius: 50%;
    font-size: .75rem;
    font-weight: bold;
    background: var(--mud-palette-tertiary);
    color: white;
    line-height: .75rem;
}

.mud-badge.mud-badge-top.right.mud-badge-overlap {
    inset: auto auto calc(100% - 1.2rem) calc(100% - .7rem);
}
/*#endregion Nav Menu*/

.dialog-modified {
    max-width: unset;
    border-radius: 1.875rem;
    background-color: #FAFEFF;
    /*background: url("../images/background/bg1.png"), #FAFEFF; TODO Zasim: for dark theme #0f0e19*/
    background-size: cover;
}

.dialog-modified .mud-dialog-title {
    padding: unset;
}

.dialog-modified .mud-dialog-content {
    padding: unset;
}

/*#region Modification of external styles */
.mud-dialog-container {
    left: 0;
}

.mud-button {
    min-width: unset;
    border-radius: 3.75rem;
}

.mud-button-filled,
.mud-button-filled:hover,
.mud-button-filled:focus-visible {
    box-shadow: unset;
}

.mud-typography {
    user-select: none;
}

.mud-radio-top-aligned.mud-radio > span.mud-button-root {
    padding-top: 1px;
    top: 0px;
    margin-bottom: auto;
}

#app .mud-layout:not(.mobile) .mud-main-content {
    touch-action: none;
    /*pointer-events: none;*/
}

#app .mud-main-content {
    padding-top: var(--mud-appbar-height);
    max-height: 100vh; /* .mobile */
}

.mud-appbar.mud-appbar-fixed-top {
    position: absolute;
}

.mud-skeleton-text {
    transform: unset;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition: background-color 0s 600000s, color 0s 600000s !important;
}

input[type=text]:focus {
    outline: unset !important;
    outline-offset: 0px !important;
}

.mud-input.mud-input-underline.mud-input-error:after {
    display: none;
}

.mud-input.mud-input-underline:after {
    display: none;
}

.mud-input > textarea.mud-input-root {
    height: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    box-sizing: border-box;
}

img {
    box-shadow: unset;
}

.mud-avatar-filled {
    background-color: transparent;
}

.mud-dialog {
    max-height: 99vh;
}

.settings .mud-fab,
.add-groupchat-edit-info .mud-fab {
    height: 3.6875rem;
    margin-top: .9rem;
    margin-right: 0.62rem;
    padding: .9rem 2.5rem 1.0625rem 2.5rem;
    border-radius: 3.75rem;
    box-shadow: unset;
}

label.mud-checkbox {
    transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

label.mud-checkbox:hover {
    color: #0069B6;
}

input[type=radio], input[type=checkbox] {
    margin: unset;
}

@media (hover: none) {
    button:hover, .mud-button-root:hover, .mud-primary-hover:hover, .mud-button-root.mud-icon-button:hover {
        background-color: var(--mud-palette-action-default-hover) !important;
        transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms !important;
    }

    .circle-button:hover {
        background-color: #030724c2 !important;
    }

    .mud-button-filled.mud-button-filled-success:hover, .mud-button-filled.mud-button-filled-success:focus-visible {
        background-color: var(--mud-palette-success-darken) !important;
    }

    .mud-button-filled.mud-button-filled-primary:hover, .mud-button-filled.mud-button-filled-primary:focus-visible, .mud-button-root.mud-fab-primary:hover, .search-container .search-button:hover {
        background-color: var(--mud-palette-primary-darken) !important;
    }
}
/*#endregion Modification of external styles */

/*#region DialogService.ShowMessageBox (Logout popup)*/
.mud-dialog:not(.customized) {
    max-width: 90vw;
    padding: 2rem;
    background-color: #F3FAFF;
    border-radius: 1.875rem;
}

.mud-dialog:not(.customized) .mud-button-root {
    height: 3.6875rem;
    margin-top: .9rem;
    margin-right: 0.62rem;
    padding: .9rem 2.5rem 1.0625rem 2.5rem;
    border-radius: 3.75rem;
    color: var(--mud-palette-error-text);
}

@media (max-width: 500px) {
    /* .mobile */
    .mud-dialog:not(.customized) .mud-button-root {
        padding-left: 1.8rem;
        padding-right: 1.8rem;
    }
}

.mud-dialog:not(.customized) .mud-dialog-actions .mud-button-text-default {
    background-color: var(--mud-palette-error);
    float: right;
}

.mud-dialog:not(.customized) .mud-button-text-primary {
    background-color: var(--mud-palette-primary);
}

.mud-dialog:not(.customized) .mud-dialog-content,
.mud-dialog:not(.customized) .mud-dialog-actions,
.mud-dialog:not(.customized) .mud-dialog-title {
    padding: unset;
}

.mud-dialog:not(.customized) .mud-dialog-content {
    margin-bottom: 1.2rem;
}
/*#endregion DialogService.ShowMessageBox (Logout popup)*/
.dialog-block {
    padding: 2rem 2rem 2rem 2.94rem;
}

.circle-button {
    border-radius: 50%;
    background-color: #030724;
    width: 4.3125rem;
    height: 4.3125rem;
    min-width: 4.3125rem;
}

.circle-button:hover {
    background-color: #030724c2;
}

.vivo-skeletonable-image {
    width: 100%;
    height: 100%;
}

.cancel-button,
.mud-fab-extended.mud-fab-size-large.cancel-button {
    width: 9.5rem;
    height: 4.3125rem;
}

.close-btn {
    width: 3.625rem;
    min-width: 3.625rem;
    height: 3.625rem;
    border: 0.08rem solid var(--mud-palette-text-primary);
    border-radius: 100%;
}

.close-btn svg {
    width: 1.125rem;
    height: 1.125rem;
    fill: #030724;
}

.margin-title-regular {
    margin-top: -.51rem;
    margin-bottom: 1.25rem;
}

.mobile .home .margin-title-regular {
    margin-top: unset;
    padding-top: 0.87rem;
    margin-bottom: 0.87rem;
}

.margin-title-medium {
    margin-bottom: 1.8rem;
}

.home-logo-wrapper {
    width: 4.5rem;
    height: 4.5rem;
    padding: 1.125rem 1.3125rem;
    border-radius: 1.5625rem;
    background-color: #F3FAFF;
}

.home-logo-wrapper:hover {
    background-color: #fff;
}

.home-logo {
    width: 1.8125rem;
    height: 2.25rem;
}

.mud-menu .mud-avatar.mud-avatar-medium, .avatar-skeleton {
    position: unset;
    width: 3.625rem;
    height: 3.625rem;
    border: unset;
}

.mud-menu .mud-avatar.mud-avatar-medium img {
    clip-path: polygon( 98.184% 63.4%,98.184% 63.4%,98.523% 62.114%,98.827% 60.814%,99.098% 59.502%,99.335% 58.178%,99.536% 56.841%,99.702% 55.494%,99.831% 54.135%,99.925% 52.767%,99.981% 51.388%,100% 50%,100% 50%,99.346% 41.89%,97.451% 34.196%,94.419% 27.022%,90.353% 20.471%,85.355% 14.645%,79.529% 9.647%,72.978% 5.581%,65.804% 2.549%,58.11% 0.654%,50% 0%,50% 0%,41.89% 0.654%,34.196% 2.549%,27.022% 5.581%,20.471% 9.647%,14.645% 14.645%,9.647% 20.471%,5.581% 27.022%,2.549% 34.196%,0.654% 41.89%,0% 50%,0% 50%,0.654% 58.11%,2.549% 65.804%,5.581% 72.978%,9.647% 79.529%,14.645% 85.355%,20.471% 90.353%,27.022% 94.419%,34.196% 97.451%,41.89% 99.346%,50% 100%,50% 100%,51.107% 99.988%,52.208% 99.952%,53.303% 99.893%,54.392% 99.81%,55.474% 99.704%,56.549% 99.575%,57.617% 99.424%,58.677% 99.25%,59.73% 99.054%,60.776% 98.836%,60.776% 98.836%,59.766% 97.477%,58.846% 96.052%,58.018% 94.565%,57.288% 93.02%,56.659% 91.421%,56.135% 89.772%,55.72% 88.077%,55.418% 86.34%,55.235% 84.566%,55.172% 82.759%,55.172% 82.759%,55.511% 78.564%,56.491% 74.584%,58.059% 70.873%,60.162% 67.485%,62.747% 64.471%,65.761% 61.886%,69.149% 59.783%,72.86% 58.215%,76.84% 57.235%,81.034% 56.897%,81.034% 56.897%,82.99% 56.969%,84.906% 57.184%,86.778% 57.536%,88.599% 58.02%,90.365% 58.631%,92.071% 59.363%,93.71% 60.211%,95.279% 61.17%,96.772% 62.235%,98.184% 63.4% );
}

.avatar-menu {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 1.375rem;
    height: 1.375rem;
    margin-bottom: -0.1rem;
    margin-right: -0.04rem;
    border-radius: 50%;
    background-color: #0069B6;
}

.mud-popover-overflow-flip-onopen.mud-popover-top-right.mud-popover-anchor-bottom-right {
    margin-top: .69rem;
    border-radius: 1.875rem;
    box-shadow: 10px 10px 44px 0px rgba(3, 7, 36, 0.20);
    background-color: #F3FAFF;
    background-position-x: 60%;
    background-position-y: 25%;
    background-size: 550%;
}

header .mud-overlay {
    position: fixed;
    content: "";
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    opacity: 0.8;
    background: #030724;
    z-index: -1;
}

.mud-popover-overflow-flip-onopen.mud-popover-top-right.mud-popover-anchor-bottom-right .mud-list-padding {
    padding: 1.405rem 0;
}

/*#region MudMenu: Avatar menu & Chat custom button*/
.avatar-menu-item,
.chat-custom-button-item {
    min-width: 17rem;
    padding: 0.595rem 2rem 0.595rem 2rem;
}

.avatar-menu-item .mud-list-item-icon,
.chat-custom-button-item .mud-list-item-icon {
    width: 3.4375rem;
    height: 3.375rem;
    min-width: unset;
    margin-right: 1.06rem;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    border-radius: 50%;
    background-color: var(--mud-palette-primary);
}

.avatar-menu-item.warning-color .mud-list-item-icon,
.chat-custom-button-item.warning-color .mud-list-item-icon {
    background-color: var(--mud-palette-tertiary);
}

.avatar-menu-item .mud-list-item-icon svg,
.chat-custom-button-item .mud-list-item-icon svg {
    fill: var(--mud-palette-white);
}
/*#endregion MudMenu*/

/*#region Sign In*/
.mud-layout:not(.mobile) {
    height: calc(100vh - (.63rem * 2));
}

.signin {
    position: relative;
    margin-top: calc((var(--mud-appbar-height) * -1) + 0.63rem);
    margin-right: .63rem;
    margin-bottom: .63rem;
    margin-left: .63rem;
}

.mobile .signin {
    /*margin-top: unset;
    top: calc(50vh - var(--mud-appbar-height));
    transform: translateY(-50%);*/
    margin: unset;
    margin-top: calc(var(--mud-appbar-height) * -1);
    top: 0;
}

.signin .vivo-logo {
    position: absolute;
    top: 2.5rem;
    left: 2.5rem;
    width: 5.5625rem;
    height: 5.5625rem;
    padding: 1.5rem 1.63rem 1.25rem 1.56rem;
    border-radius: 50%;
    background-color: #F3FAFF;
}

.mobile .vivo-logo {

}

.signin .vivo-logo img {
    width: 2.375rem;
    height: 2.8125rem;
}

.login-img {
    width: 34.4375rem;
    height: 33.5rem;
    border-radius: 2.5rem 0rem 0rem 0rem;
}

.mobile .login-img {
    display: block;
    width: 100%;
    height: 50vh;
    margin: 0 auto;
    border-radius: unset;
    object-fit: cover;
}

.left-text-wrapper {
    width: 34.4375rem;
    margin-top: -3.375rem;
    padding: 2.75rem 8rem 3.1rem 3.1rem;
    border-radius: 2.5rem 2.5rem 0rem 2.5rem;
    background: #8FDDFF;
}

.left-text {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 2.3rem;
}

.explore-btn {
    height: 3.75rem;
    margin-top: 1.94rem;
    padding: 0.75rem 2.5rem;
    border-radius: 3.75rem;
    background: var(--mud-palette-secondary);
}

.signin-wrapper {
    width: 42.75rem;
    height: 50.875rem;
    padding: 3.4375rem 10.5625rem 0 10.3125rem;
    border-radius: 2.5rem;
    background: var(--mud-palette-secondary);
}

.mud-layout:not(.mobile) .signin .signin-wrapper {
    position: absolute;
    top: 0;
    right: 0;
}

.mobile .signin .login-form.signin-wrapper {
    position: relative;
    width: 100%;
    height: 50vh;
    padding-right: 3.9rem;
    padding-left: 3.9rem;
    border-radius: unset;
    z-index: 1;
}

.signin-wrapper .form-control-wrapper {
    margin-top: 6.69rem;
}

.mobile .signin-wrapper .form-control-wrapper {
    margin-top: unset;
}

.checkbox-overload .mud-icon-button {
    margin-top: .03rem;
    padding: .5rem;
    border-radius: .1rem;
}

.checkbox-overload .mud-icon-button:hover {
    background-color: transparent;
}

.pre-register .page-title,
.reset-password .page-title,
.register .page-title {
    margin-bottom: 1.25rem;
}

.register a {
    display: inline-block;
    margin-top: .2rem;
    padding: .15rem .6rem .3rem;
    border-radius: 1.25rem;
    background-color: rgb(143 221 255 / 50%);
}

.register .edit-btn {
    height: 3.75rem;
}

.login-form .register .mud-input-control {
    margin-top: 1.87rem;
}

/*#region Login and Progress pages*/
.login-form .mud-tabs-toolbar-wrapper,
.progress-view .mud-tabs-toolbar-wrapper {
    width: 100%;
    border-radius: 1.84375rem;
    border: 0.0625rem solid var(--mud-palette-text-primary);
}

.login-form .mud-tabs-toolbar-wrapper:hover,
.progress-view .mud-tabs-toolbar-wrapper:hover {
    background-color: var(--mud-palette-action-default-hover)
}

.login-form .mud-tooltip-root,
.progress-view .mud-tooltip-root {
    width: 50%;
    z-index: 1;
}

.login-form .mud-tab,
.progress-view .mud-tab {
    min-width: unset !important;
    height: 3.6875rem;
    min-height: unset;
    font-size: 1.25rem;
    font-weight: 500;
    text-transform: capitalize;
    transition: all 150ms cubic-bezier(.4,0,.2,1) 0ms;
}

.login-form .mud-tab.mud-tab-active,
.progress-view .mud-tab.mud-tab-active {
    color: var(--mud-palette-secondary);
}

.login-form .mud-tab-slider.mud-tab-slider-horizontal,
.progress-view .mud-tab-slider.mud-tab-slider-horizontal {
    height: 3.6875rem;
    min-height: unset;
    border-radius: 1.8rem;
    z-index: 0;
}

.login-form .mud-tab:hover,
.progress-view .mud-tab:hover {
    background-color: transparent;
}

.login-form .mud-tab-slider,
.progress-view .mud-tab-slider {
    background: #030724;
}
/*#endregion Login and Progress pages*/

/*#region Login*/
.login-form .mud-tabs {
    border: unset;
}

.mud-tabs-toolbar .mud-tabs-toolbar-inner {
    min-height: unset;
}

.login-form .mud-tabs-toolbar {
    background-color: transparent;
}

.login-form .mud-input-control {
    margin-top: 1.25rem;
}

.login-form .mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 500;
}

.login-form .mud-input-control:not(.mud-code) .mud-input {
    height: 3.75rem;
    padding: .375rem 1.41rem .375rem 1.88rem;
    border-radius: 3.75rem;
    border: 0.0625rem solid var(--mud-palette-text-primary);
    background-color: transparent;
}

.login-form .mud-input input {
    font-size: 1.0625rem;
    font-weight: 400;
    color: var(--mud-palette-text-primary);
    box-shadow: none !important;
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol.mud-input-error {
    color: var(--mud-palette-text-primary) !important;
}

.input-form .mud-input-control-helper-container {
    width: 18.1875rem;
}

.mud-input-control-helper-container {
    margin-top: unset;
}

.mud-input-helper-text .me-auto {
    padding: 0 1.6rem;
}

.input-helper-right .mud-input-helper-text .me-auto {
    width: 100%;
    text-align: end;
}

.login-form .mud-input-adornment {
    width: 1.375rem;
    margin: 0;
    padding: 0;
    border: unset;
    background-color: transparent;
    cursor: pointer;
}

.login-form .mud-input-adornment svg {
    fill: #0069B6;
}

.login-form .mud-input.mud-input-underline:after {
    display: none;
}

.login-form .mud-input.mud-input-underline:before {
    display: none;
}

.forgot-pass {
    margin-top: .94rem;
}

.button-container {
    position: relative;
    margin-top: 1.88rem;
}

.login-submit {
    height: 3.75rem;
    padding: 0.5rem 2.5rem;
    box-shadow: unset;
}

.button-container .time-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-inline-start: 10.5rem;
}

.button-container .time-icon .mud-progress-circular.mud-progress-medium {
    height: 1.45rem;
    width: 1.45rem;
}
/*#endregion Login*/

/*#region Reset password*/
.back-to-login {
    position: absolute;
    bottom: 2.59rem;
    padding-top: 2.59rem;
}

.back-to-login:before {
    position: absolute;
    content: "";
    top: 0;
    right: 2.9rem;
    left: -10.3rem;
    width: 150%;
    height: 1px;
    background: linear-gradient(90deg, #8098AE 53.31%, rgba(255, 255, 255, 0.00) 93.25%);
    opacity: 0.5;
}

.mud-input-control.mud-code .mud-input {
    width: 3.75rem !important;
    padding: 0;
}

.mud-input-control.mud-code .mud-input input {
    width: 100%;
}

.mud-input-control.mud-code .mud-input .mud-input-outlined-border {
    border: 0.0625rem solid var(--mud-palette-text-primary);
}

.reset-password .mud-input-control {
    margin-top: 1.87rem;
}

button-container .reset-pass-submit {
    height: 3.75rem;
}

.button-container .time-icon.reset-time-icon {
    margin-inline-start: 13.5rem;
}

.reset-pass-closebtn {
    position: absolute;
    top: 2.5rem;
    right: 2.5rem;
    z-index: 1;
}
/*#endregion Reset password*/

/*#region Registration*/
.signin .mud-radio-group {
    margin-top: .56rem;
    margin-bottom: 1.88rem;
}

.signin .mud-radio-group > label {
    margin-top: 1.31rem;
    margin-right: unset;
    margin-left: unset;
}

.signin .mud-icon-button {
    margin-right: .94rem;
    padding: unset;
}

.signin .checkbox-overload .mud-icon-button {
    margin-top: unset;
}

.signin .mud-radio-content-placement-end {
    align-items: flex-start;
}

.signin .mud-radio-icons {
    width: 3.375rem;
    height: 3.375rem;
    border: .064rem solid #030724;
    border-radius: 50%;
}

.signin .mud-radio-icons.mud-checked {
    border-color: var(--mud-palette-success);
}

.signin .mud-radio-icons svg:first-child {
    display: none;
}

.signin .mud-radio-icons.mud-checked:before {
    content: "";
    position: absolute;
    left: 0;
    width: 1.625rem;
    height: 1.125rem;
    margin-top: 1.1rem;
    margin-left: 0.86rem;
    background: url("../images/icon-mark-white.svg");
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 1;
}

.signin .mud-radio-icons.mud-checked .mud-radio-icon-checked {
    font-size: 3.375rem;
    transform: scale(2.5);
}

.registration-form {
    position: absolute;
    top: 0;
    width: 100%;
    height: 50.875rem;
    padding: 2.5rem;
    border-radius: 2.5rem;
    background-color: var(--mud-palette-secondary);
    z-index: 1;
}

.registration-form .vivo-logo {
    background-color: #8FDDFF;
}

.registration-wrapper {
    width: 38.9375rem;
    margin-top: 1.06rem;
}

.registration-wrapper > div> div:first-child  > div {
    justify-content: space-between;
}

.registration-wrapper > div > div:first-child > div > div {
    width: 2.1875rem !important;
}

.registration-form .mud-stepper-header {
    position: unset;
    height: 2.1875rem;
    min-height: unset;
    padding: unset !important;
    border-radius: 50%;
}

.registration-form .mud-avatar {
    width: 2.1875rem;
    height: 2.1875rem;
    background-color: #8FDDFF;
}

.registration-form .mud-avatar.mud-avatar-text-primary {
    background-color: #0069B6;
}

.registration-form .mud-badge-root {
    position: absolute;
}

.registration-form .mud-badge-root .mud-avatar.mud-avatar-text-primary {
    background-color: #00B272;
}

.registration-form .mud-badge-root::before {
    content: "";
    position: absolute;
    top: 1.06rem;
    left: 0;
    width: 7rem;
    height: 0.1875rem;
    background-color: #00B272;
    z-index: 11;
}

.registration-form .mud-badge-root .mud-badge-wrapper .mud-badge-icon {
    display: none;
}

.registration-form .mud-badge-root .mud-badge-wrapper:before {
    content: "";
    position: absolute;
    left: 0;
    width: 1.25rem;
    height: 0.875rem;
    margin-top: .625rem;
    margin-left: 0.44rem;
    background: url("../images/icon-mark-white.svg");
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 20;
}

.registration-form .mud-avatar.mud-avatar-text-primary .mud-icon-root {
    width: 0.8125rem;
    height: 0.8125rem;
    background-color: #F3FAFF;
    border-radius: 50%;
}

.registration-form .mud-progress-linear {
    top: 1.06rem !important;
    height: 0.1875rem !important;
    grid-column-start: 1 !important;
    grid-column-end: 17 !important;
}

.registration-form .mud-progress-linear.mud-progress-linear-color-primary:not(.mud-progress-linear-buffer):before {
    background-color: #8FDDFF;
    opacity: 1;
}

.registration-form .input-form {
    display: grid;
    max-height: 20.85rem;
    margin-top: 1.88rem;
    grid-gap: 1.25rem;
    grid-template-columns: 18.8125rem 18.8125rem;
    overflow-y: auto;
    overflow-x: hidden;
}

.registration-form .input-form-column {
    grid-gap: 1.25rem;
    grid-template-columns: 1fr;
}

.registration-form .page-title {
    margin-bottom: 1.25rem;
}

.registration-form .form-wrapper {
    margin-top: 3.87rem;
}

.registration-form .mud-button:not(.close-btn) {
    height: 3.75rem;
    padding: .9rem 2.5rem 1.0625rem 2.5rem;
    border-radius: 3.75rem;
    color: var(--white, #F3FAFF);
    background-color: #43B2F0;
}

.registration-form .mud-button:not(.close-btn):hover, 
.registration-form .mud-button:not(.close-btn):focus-visible {
    background-color: var(--mud-palette-primary-darken);
}

.registration-form .health .mud-input-control {
    margin-top: 1.88rem;
}

.registration-form .health .mud-input {
    width: 100%;
    height: 11.6875rem;
    border-radius: 1.875rem;
}

.registration-form .mud-input-control-boolean-input .mud-checkbox {
    margin-top: 1.31rem;
    align-items: flex-start;
}

.registration-form button[disabled] {
    display: none;
}

.registration-wrapper .gap-3 {
    gap: 0 !important;
}

.registration-wrapper .d-flex.gap-4 {
    gap: 0 !important;
}

.registration-wrapper .d-flex.gap-4 .flex-grow-1 {
    flex-grow: 0 !important;
}

.registration-wrapper .d-flex.gap-4 button:not(:last-child) {
    margin-right: .62rem;
}

.registration-wrapper .d-flex.gap-4 button:first-child {
    border: 0.0625rem solid rgb(3 7 36 / 50%);
    background-color: transparent;
    color: #030724;
}

.registration-wrapper .d-flex.gap-4 button:first-child:hover,
.registration-wrapper .d-flex.gap-4 button:first-child:focus-visible {
    background-color: var(--mud-palette-action-default-hover);
}

.registration-form .registration-step {
    margin-bottom: 2.5rem;
}

.registration-form .mud-select .mud-icon-default {
    padding: .2rem;
    color: #F3FAFF;
    background-color: #0069B6;
    border-radius: 50%;
}

.registration-form .mud-select .mud-icon-root {
    width: 2rem;
    height: 2rem;
}

.registration-form label.mud-checkbox .mud-icon-button > svg {
    display: none;
}

.registration-form label.mud-checkbox .mud-icon-button {
    width: 3.375rem;
    height: 3.375rem;
    border: 0.0625rem solid #00B272;
    border-radius: 1.25rem;
}

.registration-form .mud-input-control:not(.mud-input-error) label.mud-checkbox .mud-icon-button[style]:before {
    content: "";
    position: absolute;
    left: 0;
    width: 1.625rem;
    height: 1.125rem;
    margin-left: 0.89rem;
    background: url("../images/icon-mark-green.svg");
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 1;
}

.registration-form .mud-picker button {
    margin-right: .5rem;
    border-radius: unset;
}

.registration-form .mud-picker button .mud-icon-root.mud-svg-icon {
    fill: #0069B6;
}

.registration-form .icon-done {
    width: 6.4375rem;
    height: 6.4375rem;
    margin-bottom: 1.87rem;
    border-radius: 50%;
    background-color: #00B272;
}

.registration-form .icon-done:before {
    content: "";
    position: absolute;
    width: 3.09956rem;
    height: 2.14581rem;
    margin-top: 2.2rem;
    margin-left: 1.69rem;
    background: url("../images/icon-mark-white.svg");
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 1;
}

.registration-form .email {
    width: 14.5625rem;
    height: 2.8125rem;
    margin: 1rem 0;
    padding: 0 1.375rem;
    border-radius: 1.25rem;
    background-color: rgb(143 221 255 / 50%); /*TODO Zasim: #8FDDFF*/
}
/*#endregion Registration*/
/*#endregion Sign In*/

.mobile .home {
    margin: 0 .62rem;
}

.mud-layout:not(.mobile) .home .widget {
    padding: 1.2rem 1.06rem 1.186rem;
    background-color: #F3FAFF;
    /*background-image: url("../images/background/bg1.png");*/ /*TODO Zasim: for dark theme #0f0e19*/
    /*background-size: cover;*/
}

.mobile .home .widget:not(:first-child) {
    margin-top: .62rem;
}

.mud-layout:not(.mobile) .home .widget.class {
    min-width: 28.875rem;
    margin-top: calc(var(--mud-appbar-height) * -1);
    margin-bottom: .56rem;
    padding-top: var(--mud-appbar-height);
    border-radius: 0 0 2.5rem 2.5rem;
    background-position: bottom;
}

.mobile .home .widget .next-class-info {
    flex-direction: column;
    min-height: 33.5rem;
    height: calc(100vh - 9.5rem);
    padding: .44rem .44rem 1.87rem;
    border-radius: 1.875rem;
    background-color: #F3FAFF;
}

.widget .trainer-class img {
    min-width: 19.625rem;
    min-height: 21.125rem;
    width: 19.625rem;
    height: 21.125rem;
}

.mobile .home .widget .trainer-class img {
    width: 100%;
    min-height: 14.8125rem;
    height: calc(100vh - 29rem);
    max-height: 24rem;
    object-position: 0 -3rem;
}

.mobile .home .widget .next-class-info.no-data .trainer-class img {
    height: calc(100vh - 31rem);
    min-height: 11.8125rem;
}

.trainer-class {
    position: relative;
}

.trainer-class img {
    border-radius: 1.875rem;
    box-shadow: unset;
}

.trainer-info {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
}

.mobile .home .trainer-info {
    bottom: 1.43rem;
    left: 1.43rem;
}

.trainer-info .name,
.trainer-info .surname,
.trainer-info .position,
.trainer-info .name-surname {
    background-color: var(--mud-palette-secondary);
    width: max-content;
}

.trainer-info .name {
    position: relative;
    padding: .7rem .93rem .95rem 1.06rem;
    border-top-left-radius: 1.0625rem;
    border-top-right-radius: 1.0625rem;
    border-bottom-right-radius: 1.0625rem;
    z-index: 2;
}

.trainer-info .set-surname:before {
    position: absolute;
    content: attr(surname);
    margin-top: 1.9rem;
    white-space: nowrap;
    color: var(--mud-palette-text-primary);
}

.trainer-info .surname {
    position: relative;
    margin-top: -1.3rem;
    padding: .4rem .93rem .75rem 1.06rem;
    border-top-right-radius: 1.0625rem;
    border-bottom-left-radius: 1.0625rem;
    border-bottom-right-radius: 1.0625rem;
    color: transparent;
    z-index: 1;
}

.trainer-info .name-surname {
    position: relative;
    padding: .5rem 1rem .75rem 1.06rem;
    border-radius: 1.0625rem;
}

.trainer-info .position {
    width: max-content;
    margin-top: -1.2rem;
    padding: 1.5rem .93rem .75rem 1.06rem;
    border-bottom-left-radius: 1.0625rem;
    border-bottom-right-radius: 1.0625rem;
    background-color: #0069B6;
    color: var(--mud-palette-tertiary-text);
}

.next-class {
    position: relative;
    width: 19rem;
    margin-right: 2rem;
    margin-left: 2.12rem;
}

.mobile .home .next-class {
    width: 19.375rem;
    margin-right: 1.43rem;
    margin-left: 1.43rem;
}

.mud-layout:not(.mobile) .home .next-class:after {
    content: "";
    position: absolute;
    right: -2rem;
    bottom: -1.17rem;
    width: 1px;
    height: 110%;
    background: linear-gradient(0deg, #8098AE 53.31%, rgba(255, 255, 255, 0.00) 93.25%);
    opacity: 0.5;
}

.next-class-name {
    width: 20rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mobile .next-class-info:not(.no-data) .next-class-name {
    -webkit-line-clamp: 1;
}

.next-class-info.no-data .subtitle {
    margin-right: .95rem;
}

.next-class-info.no-data .edit-btn {
    height: 3.75rem;
}

.mobile .next-class-info.no-data .edit-btn {
    margin-top: 1rem;
}

.next-class-data {
    margin-top: .8rem;
    margin-bottom: 1.4rem;
}

.next-class-text {
    color: #0069B6;
}

.mud-layout:not(.mobile) .home .next-class .button-panel {
    position: absolute;
    bottom: 1.63rem;
}

.remaining-time {
    width: 13.81rem;
    height: 4.3125rem;
    margin-right: .5rem;
    padding: .44rem;
    border-radius: 3.75rem;
    background-color: var(--mud-palette-background);
}

.remaining-time .time-icon {
    width: 3.4375rem;
    height: 3.4375rem;
    border-radius: 100%;
    background-color: #0073C6;
}

.remaining-time .time-icon.join-allowed {
    background-color: var(--mud-palette-secondary);
}

.remaining-time .time-icon img {
    width: 1.6875rem;
    height: 1.6875rem;
}

.remaining-time .time {
    flex: 1;
    text-align: center;
}

.mobile button.doc-icon {
    display: none; 
}

.upcoming-class {
    max-width: 16.9375rem;
    margin-left: 2rem;
}

.mobile .home .upcoming-class {
    width: 100%;
    max-width: unset;
    margin-bottom: .62rem;
    margin-left: unset;
    padding-right: 1.43rem;
    padding-bottom: 3.12rem;
    padding-left: 1.43rem;
    border-radius: 1.875rem;
    background-color: #F3FAFF;
}

.upcoming-class.no-data .upcoming-classes {
    width: 16.6875rem;
    height: 17.125rem;
    border-radius: 1.25rem;
    border: 1px dashed #0069B6;
    background: rgba(243, 250, 255, 0.30);
    color: #0069B6;
}

.upcoming-class.no-data .upcoming-classes img {
    width: 5.3125rem;
    height: 5.25rem;
    margin-bottom: .86rem;
}

.upcoming-title {
    margin-bottom: 1.6rem;
}

.mobile .home .upcoming-title {
    margin-bottom: 1.6rem;
    font-weight: 500;
}

.upcoming-image {
    width: 3.75rem;
    min-width: 3.75rem;
    height: 3.75rem;
    margin-right: .87rem;
    border-radius: 100%;
}

.home .upcoming-image:not(:empty) {
    background-color: var(--mud-palette-background);
}

.home .upcoming-classes-data {
    position: relative;
}

.home .upcoming-block .mud-button-label {
    padding-right: 1rem;
}

.home .upcoming-block {
    padding: .44rem;
}

.home .upcoming-classes-data .upcoming-block {
    width: calc(100% + .88rem);
    margin-top: -.44rem;
    margin-left: -.44rem;
}

.home .upcoming-classes-data:not(:last-child) .upcoming-block {
    margin-bottom: 1.43rem;
}

.home .upcoming-class:not(.loading-animation) .upcoming-classes-data:not(:last-child):before {
    content: "";
    position: absolute;
    top: 4.2rem;
    left: 1.86rem;
    height: 1.87rem;
    border-left: 0.0625rem dashed;
    border-color: var(--mud-palette-text-primary);
}

.home .upcoming-block.mud-button:hover {
    background-color: #0073c617;
}

.mobile .home .upcoming-block:not(:last-child) {
    margin-bottom: 1.25rem;
}

.mobile .home .upcoming-block:not(:last-child) .upcoming-image:not(.placeholder):before {
    height: 1.25rem;
    margin-bottom: calc(1.25rem * -4);
}

.upcoming-image img {
    width: 1.375rem;
    height: 1.5rem;
}

.achievements {
    width: 20.75rem;
    margin-right: .5rem;
    border-radius: 2.5rem;
}

.achievements .widget-header,
.challenges .widget-header {
    margin-bottom: 1.25rem;
    margin-left: 0.81rem;
}

.challenges .widget-header {
    height: 3.375rem;
}

.achievements .circle-button,
.challenges .circle-button {
    width: 3.375rem;
    height: 3.375rem;
    min-width: 3.375rem;
    margin-right: 0.81rem;
}

.achievement {
    width: 18.625rem;
    height: 7.3125rem;
    padding: 1.72rem 1.75rem;
    border-radius: 1.875rem;
}

.achievement img {
    width: 3.875rem;
    height: 3.875rem;
    margin-right: 1.12rem;
    border-radius: 50%;
}

.achievement:not(:last-child) {
    margin-bottom: 0.62rem;
}

.achievement-info {
    line-height: 1.5625rem;
}

.mvp {
    background: #8CD6FF;
}

.popup-upcoming {
    width: 61.75rem;
    max-width: 61.75rem;
    height: 28.125rem;
}

.popup-upcoming .trainer-class img {
    width: 25.75rem;
    height: 28.125rem;
}

.popup-upcoming .view-workout {
    width: 16.1875rem;
    height: 4.3125rem;
    padding: .44rem;
}

.popup-upcoming .doc-icon {
    width: 3.4375rem;
    height: 3.4375rem;
    margin-right: 1.06rem;
    border-radius: 100%;
    background-color: #0073C6;
}

.doc-icon img {
    width: 1.6875rem;
    height: 1.6875rem;
}

.popup-upcoming .button-panel {
    position: absolute;
    bottom: 2rem;
    width: 31.0625rem;
}

.popup-upcoming hr {
    width: calc(100% + 4.94rem);
    height: 1px;
    margin: 0.63rem 0 1.93rem -2.94rem;
    background: linear-gradient(90deg, rgba(128, 152, 174, 1), rgba(255, 255, 255, 0));
    opacity: 0.5;
}

/*#region Achievments back color*/
div[class^=".achievement-"] {
    background-color: #8FDDFF;
}

.achievement-milestones {
    background-color: #8FDDFF;
}

.achievement-streaks {
    background-color: #FFE5A1;
}

.achievement-awards {
    background-color: #51dcb0;
}
/*#endregion Achievments back color*/

/*#region PDF popup*/
.popup-pdf-workout.edit-popup {
    overflow: hidden;
}

.content-pdf {
    width: 98vw;
    height: 80vh;
}

.content-pdf:not(.web) {
    overflow-y: auto;
}

@media (min-aspect-ratio: 8 / 5.5) {
    .content-pdf {
        max-width: 146vh;
        margin: 0 auto;
    }
}

.content-pdf > iframe {
    width: 100%;
    height: 100%;
}

.content-pdf > embed,
.content-pdf > object {
    width: 100%;
}

.content-pdf.web > embed,
.content-pdf.web > object {
    height: 100%;
}

.popup-pdf-workout.edit-popup .mud-dialog-content {
    padding: 0;
}

.popup-pdf-workout iframe {
    border-radius: 2.5rem;
}
/*#endregion PDF popup*/

/*#region Challenges Home page*/
.challenges {
    width: 100%;
    border-radius: 2.5rem 2.5rem 0rem 2.5rem;
}

.mud-layout:not(.mobile) .home .widget.challenges {
    position: relative;
    width: calc(100% - 21.255rem);
    padding-right: unset;
    background-size: 188%;
    background-position: 4% bottom;
}

@media (any-hover: hover) {
    .mud-layout:not(.mobile) .home .widget.challenges {
        padding-bottom: .8rem;
    }
}

.challenges .overflow-wrapper::-webkit-scrollbar {
    display: none;
}

.challenges .overflow-wrapper {
    scrollbar-width: none;
}

.challenges-list {
    min-height: 15.5rem;
}

@media (any-hover: hover) {
    .web-scroll {
        overflow-x: scroll;
        scrollbar-width: thin;
        scrollbar-color: transparent transparent;
        transition: scrollbar-color .4s;
    }

    .web-scroll::-webkit-scrollbar {
        width: 8px;
    }

    .web-scroll::-webkit-scrollbar-thumb {
        background: transparent;
    }

    .web-scroll:hover {
        scrollbar-color: #c4c4c4 transparent;
    }

    .web-scroll:hover::-webkit-scrollbar-thumb {
        background: #c4c4c4;
    }
}

.challenges-list .separator {
    min-width: 1rem;
    background-color: transparent;
}

.challenge-container {
    min-width: 17.8125rem;
    height: 15.5rem;
    margin-right: .5rem;
    border-radius: 1.875rem;
}

.challenge-container:not(.placeholder) {
    background-size: 117%;
    background-position: center;
    transition: all 0.5s cubic-bezier(.4,0,.2,1) 0ms;
}

.challenge-container:not(.placeholder):hover {
    background-size: 130%;
}

.mud-button.challenge-container:hover, .mud-button.challenge-container:focus-visible {
    background-color: var(--mud-palette-action-default-hover);
}

.challenges .circle-button {
    margin-right: 1.875rem;
}

.challenge-info {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
}

.challenge-info .type,
.challenge-info .date {
    width: max-content;
}

.challenge-info .type {
    position: relative;
    padding: .7rem .93rem .95rem 1.06rem;
    border-radius: 1.0625rem;
    z-index: 2;
}

.challenge-info .date {
    width: max-content;
    margin-top: -1.2rem;
    padding: 1.5rem .93rem .75rem 1.06rem;
    border-bottom-left-radius: 1.0625rem;
    border-bottom-right-radius: 1.0625rem;
    background-color: #649CCA;
    color: var(--mud-palette-tertiary-text);
}

.challenge-info .date.challenge-description {
    margin-top: -.4rem;
    padding: .75rem .93rem .75rem 1.06rem;
    border-top-right-radius: 1.0625rem;
}

.challenge-info .date.challenge-description:before {
    content: "";
    position: absolute;
    top: 1.8rem;
    left: 0;
    width: 2rem;
    height: 2rem;
    background-color: #17A2B8;
}

.category-type .type:not(.placeholder) {
    background-color: #8FDDFF;
}

.category-type .date {
    background-color: #0069B6;
}

.category-type.daily-vivo-session-dailystretch .type:not(.placeholder) {
    background-color: #b2f2e9;
}

.category-type.daily-vivo-session-dailystretch .date {
    background-color: #17A2B8;
}

.category-type.cognitive .type:not(.placeholder) {
    background-color: #8FDDFF;
}

.category-type.cognitive .date {
    background-color: #0069B6;
}

.category-type.fun .type:not(.placeholder) {
    background-color: #FFE5A1;
}

.category-type.fun .date {
    background-color: #E3951F;
}

.category-type.wellness .type:not(.placeholder) {
    background-color: #E9ACFF;
}

.category-type.wellness .date {
    background-color: #700A9F;
}

.category-type.nutrition .type:not(.placeholder) {
    background-color: #04CA83;
}

.category-type.nutrition .date {
    background-color: #278462;
}

.category-type.exercise .type:not(.placeholder) {
    background-color: #FFA1A1;
}

.category-type.exercise .date {
    background-color: #D43800;
}

.category-type.mindfulness .type:not(.placeholder) {
    background-color: #bad074;
}

.category-type.mindfulness .date {
    background-color: #347a00;
}

.category-type.recipe .type:not(.placeholder) {
    background-color: #FFC97C;
}

.category-type.recipe .date {
    background-color: #A05A2C;
}

.category-type.sundaysurprise .type:not(.placeholder) {
    background-color: #d8d8ff;
}

.category-type.sundaysurprise .date {
    background-color: #9370DB;
}

/*#region Popup*/
.edit-popup {
    max-width: unset;
    border-radius: 2.5rem;
    background-color: var(--mud-palette-primary);
}

.edit-popup:before {
    content: ' ';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/background/bg3.png);
    background-size: 170%;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: center;
    transform: scaleX(-1);
    mix-blend-mode: hard-light;
    margin-top: -41%;
}

.edit-popup .mud-dialog-title {
    padding: unset;
}

.edit-popup .popup-title {
    height: 6.375rem;
    padding: 0 2rem;
}

.edit-popup .popup-title h5 {
    color: white;
}

.edit-popup .close-btn {
    border-color: var(--mud-palette-secondary);
}

.edit-popup .close-btn svg {
    fill: var(--mud-palette-secondary);
}

.edit-popup .mud-dialog-content {
    padding: 2.5rem 1.87rem 3.12rem;
    border-radius: 2.5rem;
    background-color: var(--mud-palette-secondary);
}

.challenge-popup.edit-popup .mud-dialog-content {
    padding: 2rem 1.94rem;
}

.challenge-popup .challenge-name {
    max-width: 22rem;
    line-height: 1.7125rem;
}

.daily-challenge img {
    width: 5.75rem;
    height: inherit;
    margin-right: 1.38rem;
    border-radius: 1.25rem;
    background-color: #8FDDFF;
    object-fit: cover;
}

.challenge-popup .daily-challenge-level .mud-tabs,
.challenge-popup .daily-challenge-level .vivo-mud-tabs {
    border: unset;
    margin-top: 2rem;
    padding: 0.3125rem;
    border-radius: 2.5rem;
    background-color: #8FDDFF;
    flex-grow: 1;
}

.challenge-popup .daily-challenge-level.completed .mud-tabs,
.challenge-popup .daily-challenge-level.completed .vivo-mud-tabs {
    background-color: var(--mud-palette-success);
}

.challenge-popup .daily-challenge-level .mud-tabs-toolbar,
.challenge-popup .daily-challenge-level .vivo-mud-tabs-toolbar {
    background-color: transparent;
    margin-right: 1.05rem;
    margin-bottom: .3125rem;
    margin-left: 1.05rem;
    padding: .5rem 0;
}

.challenge-popup .daily-challenge-level .mud-tabs-toolbar-wrapper,
.challenge-popup .daily-challenge-level .vivo-mud-tabs-toolbar-wrapper {
    border-radius: 1.84375rem;
    height: var(--toggle-filter_height);
    border: 0.0625rem solid #43B2F0;
    background-color: #43B2F0;
    /*grid-template-columns: 7.375rem 10rem 12.1rem !important;*/
}

.challenge-popup .daily-challenge-level .vivo-mud-tabs-toolbar-wrapper {
    width: max-content;
}

.challenge-popup .daily-challenge-level .mud-tab,
.challenge-popup .daily-challenge-level .vivo-mud-tab {
    min-width: 7.4rem !important;
    min-height: 2.6rem;
    padding: .4rem 1rem;
    color: #f3faff;
    text-transform: unset;
    font-size: var(--mud-typography-body1-size);
    /*transition: .3s cubic-bezier(0.25, 0.8, 0.5, 1);*/
}

.challenge-popup .daily-challenge-level .vivo-mud-tab {
    width: 100%;
    height: 100%;
    border-radius: 1.84375rem;
    background-color: #f3faff;
    color: var(--mud-palette-text-primary);
}

.challenge-popup .daily-challenge-level .vivo-mud-tab p {
    line-height: 1.75;
}

.challenge-popup .daily-challenge-level .mud-tab:hover {
    background-color: unset;
}

.challenge-popup .daily-challenge-level .mud-tabs-toolbar-wrapper:hover .mud-tab {
    /* background-color: var(--mud-palette-action-default-hover);*/
    backdrop-filter: saturate(0.8);
}

.challenge-popup .daily-challenge-level .mud-tab.mud-tab-active {
    color: var(--mud-palette-text-primary);
}

.challenge-popup .daily-challenge-level .mud-tab-slider.mud-tab-slider-horizontal {
    height: 100%;
    border-radius: 1.84375rem;
    background: #f3faff;
    z-index: -1;
}

.challenge-popup .challenge-item {
    width: 47rem;
    height: 20.7rem;
    padding: 1.875rem 1.875rem 1.675rem;
    border-radius: 2.2rem;
    background-color: var(--mud-palette-secondary);
}

.challenge-popup .challenge-item.long-text {
    width: 47rem;
}

.challenge-popup .challenge-item:not(:last-child) {
    margin-right: 1.25rem;
}

.challenge-popup .item-info {
    padding-top: .5rem;
}

.challenge-popup .item-tag {
    height: 1.81rem;
    margin-right: .25rem;
    padding: .04rem .62rem;
    border-radius: 0.625rem;
    color: var(--mud-palette-secondary);
    background-color: rgb(0 105 182 / 80%);
}

.challenge-popup .challenge-item.completed .item-tag {
    background-color: rgb(3 7 36 / 40%);
}

.challenge-popup .scroll-for-more {
    visibility: hidden;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: .9rem;
}

.challenge-popup .scroll-for-more-chevron {
    margin: 0 .4rem;
    color: #3a94dd;
    -webkit-animation: pulse 2s infinite;
    animation: pulse 2s infinite;
}

.challenge-popup .scroll-for-more-chevron:before {
    content: '';
    display: inline-block;
    width: .4rem;
    height: .4rem;
    margin-bottom: .21rem;
    position: relative;
    border-style: solid;
    border-width: 0.1rem 0.1rem 0 0;
    transform: rotate(135deg);
}

@keyframes pulse {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    50% {
        -webkit-transform: translate(0, 0.15rem);
        transform: translate(0, 0.15rem);
    }

    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

.challenge-popup .item-description {
    overflow-y: auto;
}

.challenge-popup .item-description-text {
    /*margin-bottom: 1.875rem;*/
    font-size: 1.25rem;
    line-height: 1.5625rem;
}

.challenge-popup .item-description-text p {
    margin-bottom: 1rem;
}

.challenge-popup .item-description-text p:last-child {
    margin-bottom: unset;
}

.challenge-popup .item-description a {
    color: #0069B6;
    font-weight: 500;
    text-decoration: underline dotted;
    transition: color .4s ease;
}

.challenge-popup .item-description a:hover {
    color: #8FDDFF;
}

.challenge-popup .item-description ol {
    margin: unset;
}

.challenge-popup .item-description ul,
.question-list ul {
    text-indent: -1rem;
    padding-left: 1rem;
    margin-bottom: .5rem;
}

.challenge-popup .item-description ul li:before,
.question-list ul li:before {
    content: "-";
    margin-right: .45rem;
}

.challenge-popup .item-description li {
    margin-top: .6rem;
}

.challenge-popup .complete-btn {
    height: 3.75rem;
    border-radius: 3.75rem;
    border: 0.125rem solid var(--mud-palette-primary);
}

.challenge-popup .button-challenge.button-challenge-completed .complete-btn {
    border: none;
    background-color: var(--mud-palette-success);
}

.challenge-popup .button-challenge.button-challenge-completed .complete-btn h6 {
    color: var(--mud-palette-secondary);
}

.challenge-popup .button-challenge:not(.button-challenge-completed) .complete-icon,
.challenge-popup .button-challenge:not(.button-challenge-completed) .complete-icon svg {
    display: none;
}

.challenge-popup .button-challenge .mud-button-label {
    margin: 0 2rem;
}

.challenge-popup .button-challenge.button-challenge-completed .mud-button-label {
    margin-left: 4rem;
}

.challenge-popup .button-challenge.button-challenge-completed .complete-icon {
    display: block;
    position: absolute;
    left: 0;
    width: 3.125rem;
    height: 3.125rem;
    margin-left: .31rem;
    background-color: #27D093;
    border-radius: 50%;
}

.daily-video-popup .daily-video-popup-content {
    width: 70rem;
    padding: 0 0 2rem;
}

.daily-video {
    padding: 56.25% 0 0 0;
    position: relative;
}

.daily-video iframe {
    position: absolute;
    top: 0;
    left: 0;
}

.daily-video-description {
    margin: 1rem 2rem 0 2rem;
}

.daily-video-description button {
    margin-top: 1rem;
    height: 3.6875rem;
}
/*#endregion Popup*/
/*#endregion Challenges*/

/*#region Calendar & Support pages*/
.count {
    width: 3.625rem;
    height: 3.625rem;
    margin-right: .94rem;
    border-radius: 3.125rem;
}
/*#endregion Calendar & Support pages*/

/*#region Calendar*/
.background-titlebar_calendar {
    background: var(--mud-palette-secondary);
}

.calendar-navigation {
    position: relative;
    margin-bottom: .63rem;
    padding: 1.91rem 1.88rem 1.87rem;
    border-radius: 0rem 0rem 2.5rem 2.5rem;
    background: var(--mud-palette-secondary);
}

.calendar-navigation:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 90%;
    height: 1px;
    background: linear-gradient(90deg, #8098AE 53.31%, rgba(255, 255, 255, 0.00) 93.25%);
    opacity: 0.5;
}

.calendar-navigation .prev-month {
    margin-right: .62rem;
}

.calendar-navigation .next-month {
    margin-right: 1.56rem;
}

.calendar-navigation .month {
    margin-right: .5rem;
}

.calendar-navigation .nav-icon {
    font-size: 2.2rem;
}

.weeks {
    overflow: auto;
}

.weeks.contact.no-data img {
    height: 19.5rem;
}

.week-block {
    margin-right: .63rem;
    padding: 1.31rem 1.19rem 1.25rem 1.25rem;
    border-radius: 2.5rem;
    background-color: rgba(255, 255, 255, 0.20);
}

.week-block:not(:last-child) {
    margin-bottom: .63rem;
}

.week-info {
    margin-bottom: 1.5rem;
    margin-left: .56rem;
}

.week-info .count {
    background: #FFE5A1;
}

.calendar-class {
    width: calc((100% - .94rem * 2) / 3);
    padding: unset;
    border-radius: 2.5rem;
    background: #8FDDFF;
}

.calendar-class > span {
    display: unset;
}

.calendar-class:not(:nth-child(3n+3)) {
    margin-right: .94rem;
}

.calendar-class .upcoming-block {
    padding: 1.19rem;
}

.calendar-class .upcoming-image {
    background-color: var(--mud-palette-white);
}

.calendar-class .trainer-class {
    height: 8.4375rem;
    padding: 2.25rem 2.75rem 2.31rem;
    border-radius: 2.5rem;
    background: var(--mud-palette-secondary);
}

.calendar-class .trainer-class hr {
    width: 0.625rem;
    height: 100%;
    margin: 0 2.5rem 0 0;
    border-radius: 1.0625rem;
    background: var(--mud-palette-primary);
    opacity: unset;
}

.calendar-class .trainer-class .app-name {
    font-size: 1.875rem;
    line-height: 1.9375rem;
}

.calendar-class .trainer-class .trainer-name {
    line-height: 1.4375rem;
}

.calendar-class .trainer-class-info {
    align-items: flex-start;
}
/*#endregion Calendar*/

.user-avatar.mud-avatar {
    width: 2em;
    height: 2em;
}

/*#region Conversation*/
.chat-conversations-wrapper {
    width: 20.75rem;
    height: 100%;
    margin-right: 1.25rem;
    border-radius: 2.5rem;
    background-color: #8FDDFF;
    overflow: hidden;
}

.chat-wrapper {
    height: calc(100vh - var(--mud-appbar-height));
    padding-top: 1.25rem;
    padding-right: .62rem;
    padding-bottom: .7rem;
}

.chat-conversations-top-wrapper {
    background-color: #8FDDFF;
    padding: 1.19rem 1.25rem;
}

.chat-search {
    position: relative;
    width: 100%;
    height: 3.75rem;
}

.chat-search .mud-input-control {
    margin-top: unset;
}

.chat-search .mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text {
    margin-top: unset;
    padding-left: 1.4rem;
    border: unset;
    font-size: var(--mud-typography-body1-size);
}

.chat-search .mud-input > input.mud-input-root {
    width: 67%;
}

.compose-button .new-chat-icon {
    width: 3.4375rem;
    height: 3.4375rem;
    margin-right: 2.06rem;
    border-radius: 100%;
    background-color: #0073C6;
}

.compose-button {
    width: 100%;
    padding: .35rem;
    background-color: #43b2f1;
}

.compose-button img {
    width: 1.8rem;
    height: 2.05rem;
}

.search-container {
    width: 90%;
}

.search-container .search-input {
    background-color: var(--mud-palette-secondary);
    border-radius: 6.875rem;
    max-width: unset;
    transition: width 1s;
}

.search-container .search-input .mud-input {
    padding-right: unset;
}

.search-container .search-button {
    position: absolute;
    top: 0;
    right: 0;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    background-color: #0069B6;
}

.search-button svg {
    width: 1.4375rem;
    height: 1.4375rem;
    color: var(--mud-palette-white);
}

.chat-conversations-list {
    height: calc(100% - 6.13rem);
    border-radius: 2.5rem;
    background-color: var(--mud-palette-secondary);
    overflow-y: auto;
}

.conversation-item-button,
.user-item-button {
    width: 100%;
    padding: 1.19rem 2.5rem 1.19rem 1.25rem;
    border-radius: unset;
}

.conversation-item,
.user-item {
    position: relative;
    width: 100%;
    color: var(--mud-palette-text-primary);
}

.conversation-item-button:before,
.user-item-button:before {
    position: absolute;
    content: "";
    right: 0;
    bottom: 0;
    left: -2rem;
    height: 1px;
    background: linear-gradient(90deg, #8098AE 53.31%, rgba(255, 255, 255, 0.00) 93.25%);
    opacity: 0.5;
}

.conversation-item .mud-avatar.mud-avatar-medium,
.conversation-item .mud-badge-root,
.conversation-item .mud-badge-root .mud-badge-wrapper,
.user-item .mud-avatar.mud-avatar-medium {
    width: 3.75rem;
    height: 3.75rem;
}

.conversation-item .mud-image.conversation-icon {
    width: 3.75rem;
    height: 3.75rem;
    font-size: 5rem;
    border-radius: 50%;
}

.conversation-item-button.unread .conversation-item .mud-image.conversation-icon,
.conversation-item-button.unread .conversation-item .mud-svg-icon,
.conversation-item-button.unread .conversation-item .mud-badge-root.group-chat-image-badge {
    clip-path: polygon( 98.184% 63.4%,98.184% 63.4%,98.523% 62.114%,98.827% 60.814%,99.098% 59.502%,99.335% 58.178%,99.536% 56.841%,99.702% 55.494%,99.831% 54.135%,99.925% 52.767%,99.981% 51.388%,100% 50%,100% 50%,99.346% 41.89%,97.451% 34.196%,94.419% 27.022%,90.353% 20.471%,85.355% 14.645%,79.529% 9.647%,72.978% 5.581%,65.804% 2.549%,58.11% 0.654%,50% 0%,50% 0%,41.89% 0.654%,34.196% 2.549%,27.022% 5.581%,20.471% 9.647%,14.645% 14.645%,9.647% 20.471%,5.581% 27.022%,2.549% 34.196%,0.654% 41.89%,0% 50%,0% 50%,0.654% 58.11%,2.549% 65.804%,5.581% 72.978%,9.647% 79.529%,14.645% 85.355%,20.471% 90.353%,27.022% 94.419%,34.196% 97.451%,41.89% 99.346%,50% 100%,50% 100%,51.107% 99.988%,52.208% 99.952%,53.303% 99.893%,54.392% 99.81%,55.474% 99.704%,56.549% 99.575%,57.617% 99.424%,58.677% 99.25%,59.73% 99.054%,60.776% 98.836%,60.776% 98.836%,59.766% 97.477%,58.846% 96.052%,58.018% 94.565%,57.288% 93.02%,56.659% 91.421%,56.135% 89.772%,55.72% 88.077%,55.418% 86.34%,55.235% 84.566%,55.172% 82.759%,55.172% 82.759%,55.511% 78.564%,56.491% 74.584%,58.059% 70.873%,60.162% 67.485%,62.747% 64.471%,65.761% 61.886%,69.149% 59.783%,72.86% 58.215%,76.84% 57.235%,81.034% 56.897%,81.034% 56.897%,82.99% 56.969%,84.906% 57.184%,86.778% 57.536%,88.599% 58.02%,90.365% 58.631%,92.071% 59.363%,93.71% 60.211%,95.279% 61.17%,96.772% 62.235%,98.184% 63.4% );
}

.conversation-item .mud-badge {
    width: 1.6rem;
    min-width: unset;
    height: 1.6rem;
    padding: .34rem 0 0;
    border-radius: 50%;
    font-size: 0.875rem;
    font-weight: 900;
    background-color: #FE3C3C;
    color: #F3FAFF;
}

.conversation-item .mud-badge.mud-badge-top.right.mud-badge-overlap {
    inset: unset;
    bottom: -.2rem;
    right: -.14rem;
}

.conversation-icon.conversation-icon-generic,
.user-icon.user-icon-generic {
    padding: .8rem;
    width: 3.75rem;
    height: 3.75rem;
    background-color: #d7f2ff;
    border-radius: 50%;
}

.conversation-info {
    width: calc(100% - 3.75rem);
    padding-left: .87rem;
}

.conversation-info-text {
    width: 100%;
    display: block;
    text-overflow: ellipsis;
    word-wrap: break-word;
    white-space: nowrap;
    overflow: hidden;
    line-height: normal;
    text-align: left;
}

.chat-conversations-list .mud-paper {
    position: relative;
    border-radius: unset;
    background: linear-gradient(90deg, #d8eeff 0%, rgba(255, 255, 255, 0.00) 100%);
    box-shadow: unset;
}

.chat-conversations-list .mud-paper:before {
    position: absolute;
    content: "";
    right: 0;
    bottom: 0;
    left: -2rem;
    height: 1px;
    background: linear-gradient(90deg, #8098AE 53.31%, rgba(255, 255, 255, 0.00) 93.25%);
    opacity: 0.5;
}

.chat-conversations-list .mud-card-content {
    padding: .7rem 1.25rem;
}

.user-info {
    width: calc(100% - 3.75rem);
    padding-left: .87rem;
}

.user-info-text {
    width: 100%;
    display: block;
    text-overflow: ellipsis;
    word-wrap: break-word;
    white-space: nowrap;
    overflow: hidden;
    line-height: normal;
    text-align: left;
}

.chatbox-conversations-placeholder {
    position: absolute;
    width: 100%;
    /*width: calc(100% - var(--mud-drawer-width-left) - 20.75rem - 1.25rem - .62rem);*/
    height: calc(100vh - var(--mud-appbar-height) - 1.25rem - .7rem);
    border-radius: 2.5rem;
    background-color: #8FDDFF;
    z-index: -1;
}

.chatbox-conversations-placeholder-header {
    height: calc(100% - 6.125rem);
    margin-top: 6.125rem;
    border-radius: 2.5rem;
    background-color: var(--mud-palette-secondary);
}

.chatbox-conversations-placeholder-no-chat-icon {
    width: 7.062rem;
    height: 6.87rem;
}

.chatbox-conversations-wrapper {
    position: relative;
    flex-grow: 1;
}

.active-chat {
    background: linear-gradient(90deg, #8FDDFF 0%, rgba(255, 255, 255, 0.00) 100%);
}

.chat-custom-button-container {
    position: absolute;
    top: 1.19rem;
    right: 1.25rem;
}

.chat-custom-button {
    width: 3.75rem;
    min-width: unset;
    height: 3.75rem;
    border-radius: 50%;
    background-color: var(--mud-palette-appbar-text);
}

#talkjs-container {
    height: 100%;
    width: 100%;
}

#talkjs-container > iframe {
    min-height: auto !important;
}

/*#region Popup address new chat*/
.add-chat-popup {
    width: 30rem;
}

.add-chat-popup.edit-popup .mud-dialog-content {
    height: 39.3rem;
    padding: 2rem 1.94rem;
}

.add-chat-popup .mud-input-control,
.add-chat-popup .mud-input-control.add-chat-search-input > .mud-input-control-input-container > div.mud-input.mud-input-text {
    margin-top: unset;
}

.add-chat-container {
    height: 35rem;
    flex: 1 1 0;
}

.add-groupchat-edit-info {
    height: 30rem;
}

.add-chat-container .newgroup-btn {
    width: fit-content;
    margin-top: 1rem;
}

.add-chat-search-input .mud-input {
    width: 100%;
}

.add-chat-user-list {
    height: 31.5rem;
    overflow: auto;
}

.add-chat-user-image {
    width: 2.5rem;
    height: 2.5rem;
    margin: .2rem .3rem;
    border-radius: 50%;
}

.add-groupchat-user-list .mud-table-root,
.add-groupchat-user-list .mud-table-body,
.add-groupchat-user-list .mud-table-cell {
    height: 3.4rem;
}

.add-groupchat-user-list.mud-table {
    border: unset;
    border-radius: unset;
    background-color: transparent;
    box-shadow: unset;
    overflow: auto;
}

.add-groupchat-user-list.mud-table > .mud-table-container {
    overflow-y: hidden;
}

.add-groupchat-user-list .mud-table-row {
    cursor: pointer;
}

.add-groupchat-user-list .mud-table-cell {
    padding: unset;
    border-bottom: unset;
}

.add-groupchat-user-list .mud-table-cell:first-child {
    visibility: hidden;
}

.add-groupchat-user-list .mud-icon-button:hover,
.add-groupchat-user-list .mud-icon-button:focus-visible {
    background-color: transparent;
}

.add-chat-popup .buttons {
    margin-top: 1.5rem;
}

.add-chat-popup .edit-btn {
    height: 3.6875rem;
}

.add-chat-container .mud-list-item-gutters {
    height: 3.4rem;
    padding: unset;
}

.add-groupchat-selected-user {
    margin-right: -1.94rem;
    margin-left: -1.94rem;
    width: calc(100% + 1.94rem * 2);
    cursor: pointer;
}

.add-groupchat-selected-user .selected-user-container {
    width: 30rem;
    margin: .9rem 0;
    padding-bottom: unset;
}

.add-groupchat-selected-user .selected-user {
    height: 3.75rem;
    width: max-content;
    padding: .3rem .6rem .3rem .4rem;
    border-radius: 3.75rem;
    transition: background-color .3s cubic-bezier(.64,.09,.08,1);
}

.add-groupchat-selected-user .selected-user:hover {
    background-color: var(--mud-palette-chip-default-hover);
}

.add-groupchat-selected-user .selected-user:not(:last-child) {
    margin-right: .4rem;
}

.add-groupchat-selected-user .selected-user:first-child {
    margin-left: 1.94rem;
}

.add-groupchat-selected-user .selected-user:last-child {
    margin-right: 1.94rem;
}

.add-groupchat-selected-user .selected-user img {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
}

.add-groupchat-selected-user .selected-user-name {
    margin-left: .3rem;
    margin-right: .7rem;
}

.add-groupchat-selected-user .close-icon {
    width: 1rem;
    height: 1rem;
}

.add-groupchat-choose-avatar {
    height: 30rem;
}

.add-groupchat-avatar {
    margin-bottom: 1.4rem;
}

.add-groupchat-edit-info .mud-avatar {
    width: 7.6875rem;
    height: 7.6875rem;
    margin-right: 2.31rem;
    background-color: transparent;
}

.add-groupchat-edit-info .mud-input-control {
    flex: unset;
}

.add-groupchat-edit-info .mud-input {
    width: 100%;
}

.add-groupchat-edit-info .mud-fab {
    margin-top: .5rem;
}

.add-groupchat-edit-info .input-expand {
    margin-top: 1rem;
}

.add-groupchat-edit-info .input-expand .mud-input {
    height: 5.9rem;
    border-radius: 1.875rem;
}

.add-groupchat-edit-info .mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    font-weight: 500;
}

/*#endregion Popup address new chat*/
/*#endregion Conversation*/

/*#region Settings*/
.settings {
    margin-top: 1.25rem;
}

.settings .menu-name {
    position: absolute;
    width: 20.75rem;
    height: 20rem;
    padding-top: 2rem;
    padding-left: 1.8rem;
    border-radius: 2.5rem;
    background-color: #8FDDFF;
}

.settings .mud-tabs-toolbar {
    width: 20.75rem;
    height: 100%;
    margin-top: 6.13rem;
    border-radius: 2.5rem;
    background-color: var(--mud-palette-secondary);
}

.settings .mud-tabs-toolbar-content .mud-tabs-toolbar-wrapper,
.settings .mud-tooltip-root {
    width: 20.75rem;
}

.settings .mud-tabs-toolbar-wrapper.mud-tabs-vertical {
    transform: unset !important;
}

.settings .mud-tabs-scroll-button {
    display: none;
}

.settings .menu-item {
    width: 100%;
    height: 5.8125rem;
}

.settings .mud-tab {
    padding: 0 2rem;
    justify-content: flex-start;
    font-size: 1.25rem;
    font-weight: 500;
    text-transform: unset;
}

.settings .mud-tab.mud-tab-active {
    color: var(--mud-palette-text-primary);
}

.settings .mud-tab-slider.mud-tab-slider-vertical {
    width: 100%;
    transition: top .3s cubic-bezier(.64,.09,.08,1);
    pointer-events: none;
}

.settings .mud-tab-slider {
    background: linear-gradient(90deg, rgba(143,221,255,1) 0%, rgba(241,251,255,1) 68%, rgba(255,255,255,0.16336974242822133) 100%);
    z-index: 0;
}

.settings .mud-tab svg {
    width: 3.4375rem;
    height: 3.4375rem;
    margin-right: 1.06rem;
    padding: .8rem;
    background-color: var(--mud-palette-primary);
    color: white;
    border-radius: 50%;
}

.settings .mud-tooltip-root {
    position: relative;
    z-index: 1;
}

.settings .mud-tooltip-root:not(:nth-last-child(2)):after {
    position: absolute;
    content: "";
    right: 1.5rem;
    bottom: 0;
    left: -2rem;
    height: 1px;
    background: linear-gradient(90deg, #8098AE 53.31%, rgba(255, 255, 255, 0.00) 93.25%);
    opacity: 0.5;
}

.settings .mud-tabs-panels {
    border-radius: 2.5rem;
    background-color: #8FDDFF;
    margin-right: .63rem;
    margin-left: 1.19rem;
}

.settings .mud-tabs-toolbar-content {
    border-radius: 2.5rem;
}

.settings .setting-wrapper {
    width: 100%;
}

.settings .setting-form-name {
    height: 6.13rem;
    padding-top: 2rem;
    padding-left: 1.8rem;
}

.settings form {
    width: 100%;
}

.settings .setting-form {
    height: 37.4rem;
    padding: 2.06rem 1.88rem;
    border-radius: 2.5rem;
    background-color: var(--mud-palette-secondary);
    overflow: auto;
}

.settings .profile-picture-text {
    margin-top: .8rem;
    line-height: 1.5625rem
}

.settings .mud-avatar {
    width: 7.6875rem;
    height: 7.6875rem;
    margin-right: 2.31rem;
    background-color: transparent;
}

.settings .mud-input-control.mud-file-upload {
    margin-top: unset;
}

.settings .details-dense {
    margin-bottom: 1.5rem;
    margin-left: 10rem;
    line-height: 1.5625rem
}

.settings .label-text {
    width: 10rem;
    font-size: 1.125rem;
}

.settings .text {
    font-size: 1.125rem;
}

.settings .details-item {
    position: relative;
}

.settings .details-item:not(.irregular-height) {
    height: 3.872rem;
}

.settings .details-item:not(.first-child):not(.irregular-height):before {
    position: absolute;
    content: "";
    right: 2.9rem;
    top: 0;
    left: -2rem;
    height: 1px;
    background: linear-gradient(90deg, #8098AE 53.31%, rgba(255, 255, 255, 0.00) 93.25%);
    opacity: 0.5;
}

.edit-btn {
    padding: .9rem 2.5rem 1.0625rem 2.5rem;
}

.settings .edit-btn.profile {
    margin-top: 1.87rem;
    margin-left: 10rem;
}

.settings .change-pass-text {
    margin-bottom: .63rem;
    margin-right: 1.93rem;
    font-size: 1.125rem;
    line-height: 1.625rem;
}

.settings .change-pass-form .mud-input-control {
    margin-top: 1.87rem;
}

.change-pass-form .input-form {
    height: 18.4rem;
    margin-bottom: 3.16rem;
    padding-bottom: 3.16rem;
    overflow-y: auto;
}

.change-pass-form .input-form:before {
    position: absolute;
    content: "";
    right: 2.9rem;
    bottom: 11.5rem;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, #8098AE 53.31%, rgba(255, 255, 255, 0.00) 93.25%);
    opacity: 0.5;
}

.settings .subscription-info-wrapper {
    margin-bottom: 1rem;
    padding: 1.94rem;
    border-radius: 2.5rem;
}

.settings .subscription-info-wrapper:not(.mud-skeleton) {
    border: 0.0625rem solid rgb(3 7 36 / 50%);
}

.settings .subscription-info-wrapper:nth-child(2) {
    margin-top: 2.31rem;
}

.settings .subscription-info-wrapper:nth-last-child(2) {
    margin-bottom: 2.31rem;
}

.settings .subscription-plan {
    height: 6.5rem;
}

.settings .subscription-icon {
    width: 5.9375rem;
    height: 5.9375rem;
    background-color: #43B2F0;
    border-radius: 50%;
}

.settings .subscription-icon:before {
    content: "";
    position: absolute;
    width: 2.875rem;
    height: 2.875rem;
    margin-top: 1.5rem;
    margin-left: 1.5rem;
    background: url("../images/icon-repeat-white.svg");
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 1;
}

.settings .subscription-status-label {
    width: 5rem;
    display: inline-block;
    float: left;
    text-align: right;
}

.settings .subscription-plan .subscription-status_active,
.settings .subscription-plan .subscription-status_inactive,
.settings .subscription-plan .subscription-status_renewal {
    display: inline-block;
    height: 1.875rem;
    padding: 0.1rem 0.6875rem 0.5625rem 0.6875rem;
    border-radius: 0.5rem;
    font-size: 1.0625rem;
    color: white;
    float: left;
}

.settings .subscription-plan .subscription-status_active {
    background-color: #00B272;
}

.settings .subscription-plan .subscription-status_inactive {
    background-color: #FE3C3C;
}

.settings .subscription-plan .subscription-status_renewal {
    background-color: #0069B6;
}

.settings .subscription-info-wrapper .mud-fab {
    margin-top: unset;
}

.settings .setting-info {
    position: absolute;
    bottom: 2.06rem;
}

.settings .setting-info a {
    padding: .15rem .6rem .3rem;
    border-radius: 1.25rem;
    background-color: rgb(143 221 255 / 50%); /*TODO Zasim: #8FDDFF*/
}

.settings .subscription-info-wrapper.no-data img {
    height: 20.5rem;
    margin-right: 2rem;
}

.settings .general-app-settings .checkbox-helper-text {
    margin-top: -.7rem;
    margin-left: 1.87rem;
    font-size: 0.9rem;
}

.settings .general-app-settings .mud-disabled .mud-svg-icon,
.settings .general-app-settings .mud-checkbox.mud-disabled * {
    color: inherit;
}

.settings .general-app-settings .checkbox-overload .mud-icon-button {
    margin-left: -.16rem;
    padding-left: unset;
}

.settings .general-app-settings .details-item {
    padding: .1rem 0 .8rem;
}

.settings .general-app-settings .combined-input {
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
}

.settings .general-app-settings .general-chat-settings-title {
    position: relative;
    margin-top: 1rem;
    padding-top: 1.7rem;
}

.settings .general-app-settings .general-chat-settings-title:before {
    position: absolute;
    content: "";
    right: 2.9rem;
    left: -2rem;
    height: 1px;
    margin-top: -1.4rem;
    background: linear-gradient(90deg, #8098AE 53.31%, rgba(255, 255, 255, 0.00) 93.25%);
    opacity: 0.5;
}

.settings .general-app-settings .mud-input-input-control {
    margin-top: .5rem;
}

.settings .general-app-settings .mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text {
    margin-top: .3rem;
}

/* Popup Edit User Info */
.edit-userinfo.edit-popup:before {
    background-position: left 0%; /* background-position-y: 0% - otherwise background will disappear on small devices */
}

.mud-input.mud-input-underline:before {
    display: none;
}

.edit-popup .mud-form.two-columns-grid {
    display: grid;
    grid-gap: 1.38rem 1.25rem;
    grid-template-columns: 18.1875rem 18.1875rem;
    margin-bottom: 2rem;
}

.edit-popup .mud-form.two-columns-grid .mud-input-control > .mud-input-control-input-container {
    flex-direction: row;
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol,
.mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol,
.mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol {
    transform: translate(0,0) scale(1);
    color: var(--mud-palette-text-primary);
}

.mud-input {
    width: 18.1875rem;
    height: 3.75rem;
    padding-right: .88rem;
    padding-left: 1.87rem;
    border-radius: 3.75rem;
    border: 0.0625rem solid rgb(3 7 36 / 50%);
}

.mobile .mud-input {
    width: 22.1875rem;
}

.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text {
    margin-top: 2rem;
}

/*Popup Choose Avatar*/
.choose-avatar-popup.edit-popup .mud-dialog-content {
    padding: .87rem 1.2rem;
}

.default-avatar-picker-dialog-container {
    width: 56rem;
    height: 29rem;
}

.default-avatar-picker-dialog-container img {
    width: 10%;
    margin: .3rem;
    cursor: pointer;
}
/*#endregion Settings*/

/*#region History*/
.history-workout {
    background-color: #8FDDFF;
}

.history-challenge {
    background-color: #0069B6;
}

.history {
    --history_margin: 0.65rem;
    --history-wrapper_padding-top-bottom: 2rem;
    --history-list_margin: 2rem;
    --toggle-filter_height: 3.6875rem;
    --completed-wrapper_margin: 1.25rem;
    --completed-wrapper_padding: 1.69rem;
    --completed-wrapper_height: 5.125rem;
    margin-right: var(--history_margin);
}

.history .completed {
    margin-top: var(--completed-wrapper_margin);
    margin-bottom: var(--completed-wrapper_margin);
}

.history .completed-wrapper {
    padding: var(--completed-wrapper_padding) 2rem;
    border-radius: 2.5rem;
}

.history .completed-wrapper:first-child {
    margin-right: 1.25rem;
}

.history .completed-wrapper .icon {
    width: 5.125rem;
    height: var(--completed-wrapper_height);
    min-width: 5.125rem;
    border-radius: 50%;
    background-color: #030724;
}

.history .completed-wrapper .icon img {
    width: 1.875rem;
    height: fit-content;
}

.history .completed-wrapper .count-completed {
    width: 4.1875rem;
    min-width: 4.1875rem;
    margin-right: 1.73rem;
    margin-left: 1.56rem;
    font-size: 3.75rem;
    text-align: center;
}

.history .completed-wrapper hr {
    width: 0.0625rem;
    height: 3.4375rem;
    margin-right: 1.62rem;
    opacity: 0.4;
}

.history .history-workout hr {
    background-color: #030724;
}

.history .history-challenge hr {
    background-color: var(--mud-palette-secondary);
}

.history .category-point {
    width: min-content;
    height: 1.9375rem;
    margin-top: .3rem;
    padding: .2rem .5rem;
    border-radius: .746rem;
}

.history .history-workout .category-point {
    background-color: var(--mud-palette-primary);
}

.history .history-challenge .category-point {
    background-color: #0069B6;
}

.history .history-challenge .count,
.history .history-challenge .text {
    color: var(--mud-palette-secondary);
}

.history .completed-wrapper .text {
    line-height: 1.875rem;
}

.history-wrapper {
    padding: var(--history-wrapper_padding-top-bottom) 2rem;
    border-radius: 2.5rem;
    background: rgba(255, 255, 255, 0.20);
}

.toggle-filter {
    width: 29.55rem;
    height: var(--toggle-filter_height);
    border: 0.0625rem solid var(--mud-palette-secondary);
    grid-template-columns: 7.375rem 10rem 12.1rem !important;
}

.toggle-filter.toggle-filter-disabled, .toggle-filter.toggle-filter-disabled * {
    pointer-events: none;
}

.toggle-filter .mud-theme-primary:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 1.84375rem;
    background-color: var(--mud-palette-secondary);
}

.history-wrapper .mud-toggle-item.mud-toggle-item-primary {
    padding: 0 !important;
    color: var(--mud-palette-secondary);
    font-size: 1.25rem;
    font-weight: 500;
    z-index: 0;
}

.history-wrapper .mud-toggle-item.mud-toggle-item-primary > div {
    position: relative;
    padding: 0 2.94rem;
    z-index: 1;
}

.history-wrapper .mud-toggle-item.mud-toggle-item-primary.mud-theme-primary {
    color: var(--mud-palette-text-primary) !important;
    background-color: unset !important;
}

.history-wrapper .mud-toggle-item.mud-toggle-item-primary.mud-theme-primary p {
    font-weight: 700;
}

.history-wrapper .mud-select {
    flex-grow: unset;
}

.history-wrapper .mud-input-control {
    margin: unset;
}

.history-wrapper .mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text {
    margin: unset;
    padding-right: unset;
    border-color: var(--mud-palette-secondary);
    color: var(--mud-palette-secondary);
}

.history-wrapper .mud-select .mud-select-input .mud-input-adornment-end {
    width: 5.5625rem;
    height: 3.7rem;
    max-height: unset;
    border-radius: 50%;
    background-color: var(--mud-palette-secondary);
    justify-content: center;
}

.history-wrapper .mud-popover-cascading-value {
    display: none;
}

.history-wrapper .mud-input {
    width: 13.375rem;
    font-size: 1.125rem;
    font-weight: 700;
}

.history-wrapper .mud-input:after {
    display: none;
}

.history-wrapper .rounded {
    border-radius: 1.84375rem !important;
}

.history-wrapper .history-list {
    height: calc(100vh - var(--history-list_margin) - var(--toggle-filter_height) - (var(--history-wrapper_padding-top-bottom) * 2) - (var(--completed-wrapper_margin) * 2) - var(--completed-wrapper_height) - (var(--completed-wrapper_padding) * 2) - var(--mud-appbar-height) - 1.2rem);
    margin-right: -1rem;
    margin-top: var(--history-list_margin);
    padding-right: .5rem;
    overflow: auto;
}

.history-wrapper .history-list-item {
    width: 100%;
    padding: unset;
    border-radius: 2.5rem;
}
.history-wrapper .history-list-item.history-workout {
    cursor: pointer;
}

.history-wrapper .history-list-item:not(:first-child) {
    margin-top: 1.1rem;
}

.history-wrapper .history-info {
    width: 41.3125rem;
    padding: 1.19rem;
    border-radius: 2.5rem;
    background-color: var(--mud-palette-secondary);
}

.history-wrapper .history-challenge .upcoming-block {
    color: var(--mud-palette-secondary);
}

.history-wrapper .history-list-item .upcoming-image {
    margin-left: 1.5rem;
    background-color: var(--mud-palette-secondary);
}

.history-wrapper .history-list-item hr {
    width: 0.4375rem;
    height: 4.375rem;
    margin: 0 2.12rem 0 .93rem;
    border-radius: 1.0625rem;
    background: var(--mud-palette-primary);
    opacity: unset;
}

div[class^="completion-status_"] {
    width: 8.625rem;
    height: 3.125rem;
    margin-right: .62rem;
    padding: 0.7rem 1.375rem 0.75rem 1.375rem;
    border-radius: 1.25rem;
    border-width: 0.0625rem;
    font-size: 1.125rem;
    line-height: 1.4375rem;
    text-align: center;
    cursor: default;
}

.completion-status_completed {
    border-color: var(--mud-palette-success);
    color: var(--mud-palette-success);
}

.completion-status_canceled {
    border-color: var(--mud-palette-error);
    color: var(--mud-palette-error);
}

.history-wrapper .more-button {
    width: 3.125rem;
    height: 3.125rem;
    border: 0.0625rem solid var(--mud-palette-text-primary);
    border-radius: 50%;
}

.popup-upcoming-history div[class^="completion-status_"] {
    margin-top: 1rem;
}

.popup-upcoming-history,
.popup-upcoming-history.popup-upcoming .trainer-class img {
    height: auto;
}
/*#endregion History*/

/*#region Support page*/
.support {
    height: calc(100vh - var(--mud-appbar-height) - 1.25rem);
    margin-top: 1.25rem;
}

.support-info {
    margin: 0 .62rem 1.25rem 0;
    padding: 3.36rem 0 3.5rem 3.69rem;
    border-radius: 2.5rem;
    background-color: #F3FAFF;
}

.support-info-wrapper {
    width: 50%;
    height: 8.75rem;
}

.support-info-wrapper:first-child {
    margin-right: 4rem;
}

.support-info-wrapper:last-child {
    margin-right: 6rem;
    margin-left: 3.78rem;
}

.support-info-wrapper:first-child:after {
    content: "";
    position: absolute;
    right: -2rem;
    bottom: -1.17rem;
    width: 1px;
    height: 110%;
    background: linear-gradient(0deg, #8098AE 53.31%, rgba(255, 255, 255, 0.00) 93.25%);
    opacity: 0.5;
}

.support-info-wrapper .mud-button {
    width: fit-content;
    width: -moz-fit-content;
    height: 3.75rem;
}

.support-info-wrapper .text-color {
    display: block;
    color: #0069B6;
}

.questions-wrapper {
    margin-right: .62rem;
    padding: 1.25rem;
    gap: 0.625rem;
    background-color: rgba(255, 255, 255, 0.20);
}

.questions-wrapper:not(:first-child) {
    margin-top: .62rem;
}

.block-info {
    margin-left: .62rem;
    margin-bottom: 1.25rem;
}

.block-info .count {
    background: #0069B6;
}

.question-list .mud-expansion-panels {
    flex: auto;
    border-radius: unset;
    background-color: unset;
}

.question-list .mud-expand-panel {
    border-radius: 2.5rem !important;
    background-color: #F3FAFF;
    box-shadow: unset;
    transition: all .4s ease;
}

.question-list .mud-expand-panel.mud-panel-expanded {
    background-color: #8FDDFF;
}

.question-list .mud-expand-panel:not(:first-child) {
    margin-top: .62rem;
}

.question-list .mud-expand-panel-header {
    padding: 2rem 1.88rem 2rem 2.5rem;
}

.question-list .mud-expand-panel-icon {
    width: 3.125rem;
    height: 3.125rem;
    padding: .5rem;
    border: .0625rem solid #030724;
    border-radius: 50%;
}

.question-list .mud-expand-panel .mud-expand-panel-content {
    margin: -5rem .62rem .62rem;
    padding: 2rem 3.1875rem 2rem 2.1875rem;
    border-radius: 1.875rem;
    background-color: #F3FAFF;
    opacity: 0;
    transition: all .4s ease;
}

.question-list .mud-expand-panel.mud-panel-expanded .mud-expand-panel-content {
    margin-top: 0;
    opacity: 1;
}

/*#region Support page: send message popup*/
.mobile.send-message-popup .popup-title {
    height: 5.375rem;
}

.send-message-popup .mud-dialog-content {
    width: 41.625rem;
    max-width: 99vw;
}

.mobile.send-message-popup .mud-dialog-content {
    padding: 1.5rem;
}

.send-message-popup .input-form {
    margin-top: 1.87rem;
    margin-bottom: 3.16rem;
}

.mobile.send-message-popup .input-form {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.send-message-popup .input-form .mud-input-control:not(:first-child) {
    margin-top: 1.38rem;
}

.send-message-popup .input-form .mud-input-control label {
    font-weight: 500;
}

.send-message-popup .input-form .mud-input {
    width: 100%;
    border-radius: 1.875rem;
}

.send-message-popup .input-form .input-expand .mud-input {
    height: 10.4375rem;
}

.send-message-popup .buttons-panel {
    padding-top: 3.16rem;
    position: relative;
}

.mobile.send-message-popup .buttons-panel {
    padding-top: 1.5rem;
}

.send-message-popup .buttons-panel:before {
    position: absolute;
    content: "";
    top: 0;
    right: 2.9rem;
    left: -2rem;
    height: 1px;
    background: linear-gradient(90deg, #8098AE 53.31%, rgba(255, 255, 255, 0.00) 93.25%);
    opacity: 0.5;
}
/*#endregion Support page: send message popup*/
/*#endregion Support page*/

/*#region Explore popup*/
.explore-popup {
    width: 46.375rem;
    max-height: unset;
    overflow: hidden;
}

.explore-popup .edit-btn {
    height: 3.75rem;
}

.explore-popup .close-btn {
    border-color: var(--mud-palette-secondary);
}

.explore-popup .close-btn svg {
    fill: var(--mud-palette-secondary);
}

.explore-popup .header-video {
    width: 100%;
    height: 26.1rem;
}

.explore-popup section {
    width: 51.6875rem;
    height: 46.4375rem;
}

.explore-wrapper {
    padding: 3.44rem 3.4rem 3.75rem;
}

.explore-wrapper .text {
    margin-top: 1.25rem;
    margin-bottom: 2rem;
    line-height: 1.5625rem;
}
/*#endregion Explore popup*/

/*#region Progress page*/
.progress-view .mud-tabs {
    border: unset;
}

.progress-view .mud-tabs-toolbar {
    padding: 1.87rem;
    border-radius: 0rem 0rem 2.5rem 2.5rem;
    background-color: #F3FAFF;
}

.progress-view .mud-tabs-toolbar:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 90%;
    height: 1px;
    background: linear-gradient(90deg, #8098AE 53.31%, rgba(255, 255, 255, 0.00) 93.25%);
    opacity: 0.5;
}

.progress-view-pre-panel-content {
    gap: 2rem;
    margin-right: .63rem;
    margin-bottom: 1.25rem;
    padding: 2.5rem;
    border-radius: 2.5rem;
    background-color: #F3FAFF;
}

.progress-view-pre-panel-content-share-button-block .mud-button {
    background: #0069B6;
    padding: 0.5rem 2.25rem 0.7rem 1.8125rem;
}

.progress-view-pre-panel-content-share-button-block svg {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: .88rem;
}

.pre-panel-userinfo .mud-avatar.mud-avatar-medium {
    width: 5.9375rem;
    height: 5.9375rem;
    margin-right: 1.88rem;
}

.progress-view .mud-tabs-panels {
    height: calc(100vh - 14.5rem - 1rem);
    margin-top: 1.25rem;
    overflow: auto;
}

.progress-view .mud-paper {
    margin-right: .63rem;
    padding: 1.3125rem 1.25rem;
    border-radius: 2.5rem;
    background-color: rgba(255, 255, 255, 0.20);
    box-shadow: unset;
}

.progress-view .mud-paper:not(:first-child) {
    margin-top: 1.25rem;
}

.progress-view .mud-card-header {
    padding: .81rem .69rem;
}

.progress-view .mud-card-content {
    padding: unset;
}

/*#region Chart container*/
.charts-container-content {
    display: flex;
    gap: 1.19rem;
    margin-top: 1.5rem;
}

.chart-card.mud-skeleton {
    width: 30.5rem;
    height: 36rem;
}

@media only screen and (max-width : 800px) {
    .charts-container-content {
        flex-direction: column;
    }

    .chart-card.mud-skeleton {
        flex: unset;
        width: unset;
    }
}

.chart-card {
    flex: 1;
    border-radius: 2.5rem;
    background-color: #8FDDFF;
}

.chart-card-title {
    padding: 2.5rem 2.5rem 1.56rem 2.5rem;
}

.chart-card-body {
    padding: 2.5rem 2.5rem 2.38rem;
    border-radius: 2.5rem;
    background-color: #F3FAFF;
}

.chart-card-highlight {
    position: relative;
    margin-top: 2rem; /*2.12rem*/
    padding-top: 2rem; /*2.12rem*/
}

.chart-card-highlight:before {
    content: "";
    position: absolute;
    top: 0;
    left: -2.5rem;
    width: 90%;
    height: 1px;
    background: linear-gradient(90deg, #8098AE 53.31%, rgba(255, 255, 255, 0.00) 93.25%);
    opacity: 0.5;
}

.positive-value {
    color: #00B272;
}

.negative-value {
    color: #FE3C3C;
}
/*#endregion Chart container*/
/*#region Achievement tab*/
.progress-achievements-wrapper {
    margin-top: 1.5rem;
    padding: 2.5rem;
    border-radius: 2.5rem;
    background-color: #F3FAFF;
}

.progress-achievements-container {
    gap: 1rem;
    flex-wrap: wrap;
}

.subcategory-name {
    position: relative;
    margin-bottom: 1.4rem;
}

.subcategory-name:not(:first-child) {
    margin-top: 2.4rem;
    padding-top: 1.3rem;
}

.subcategory-name:not(:first-child):before {
    content: "";
    position: absolute;
    top: 0;
    left: -2.5rem;
    width: 90%;
    height: 1px;
    background: linear-gradient(90deg, #8098AE 53.31%, rgba(255, 255, 255, 0.00) 93.25%);
    opacity: 0.5;
}

.progress-achievement {
    width: 13.75rem;
    height: 15.125rem;
    padding-top: 3.06rem;
    border-radius: 1.25rem;
}

.progress-achievement img {
    width: 5.625rem;
    height: 5.625rem;
    margin-bottom: 1.63rem;
    border-radius: 50%;
}

.progress-achievement .progress-count {
    position: absolute;
    top: -.87rem;
    right: -.87rem;
    width: 3.125rem;
    height: 3.125rem;
    padding-top: .486rem;
    border-radius: 50%;
    background-color: #FE3C3C;
    text-align: center;
}
/*#endregion Achievement tab*/

/*#region Share popup*/
/*cards content popup*/
.exported-card-list.web-scroll {
    width: 54rem;
    margin-bottom: 1.2rem;
}

.exported-card:not(.exported-card-invisible-container) {
    margin-right: 1rem;
    margin-bottom: .4rem;
}

.exported-card:not(.exported-card-invisible-container) .exported-card-meld {
    margin: .1rem;
    border-radius: 1.25rem;
    box-shadow: 0px 0px 5px 0px rgb(11 79 117 / 20%);
    transition: all .3s ease;
}

.exported-card:not(.exported-card-invisible-container) .exported-card-meld:hover {
    box-shadow: 0px 0px 8px 0px rgb(115 119 121 / 45%);
    cursor: pointer;
}

.exported-card-meld {
    border: 3px solid transparent;
    cursor: pointer;
}

.exported-card-meld.exported-card-selected {
    border-color: var(--mud-palette-primary);
}

.exported-card-meld.strength {
    background-color: #f0f8ff;
}

.exported-card-meld.balance {
    background-color: #f8f0ec;
}

.exported-card-meld.agility {
    background-color: #faebf8;
}

.exported-card-meld.endurance {
    background-color: #f1faee;
}

.exported-card-meld.strength:hover {
    background-color: #e2f3ff;
}

.exported-card-meld.balance:hover {
    background-color: #ffe9dd;
}

.exported-card-meld.agility:hover {
    background-color: #f3d5ef;
}

.exported-card-meld.endurance:hover {
    background-color: #e2fce3;
}

.exported-card-meld-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 18.75rem;
    height: 18.75rem;
    padding: .69rem 0 1.06rem;
}

.exported-card-meld-body-info {
    position: relative;
    width: 14.8125rem;
    height: 13.375rem;
}

.exported-card-meld-body-info-img {
    width: 14.8125rem;
    height: 13.375rem;
    margin-left: .8rem;
}

.exported-card-meld.strength .exported-card-meld-body-info-img {
    background: url("../images/share/strength-badge.png");
    background-size: contain;
}

.exported-card-meld.balance .exported-card-meld-body-info-img {
    background: url("../images/share/balance-badge.png");
    background-size: contain;
}

.exported-card-meld.agility .exported-card-meld-body-info-img {
    background: url("../images/share/agility-badge.png");
    background-size: contain;
}

.exported-card-meld.endurance .exported-card-meld-body-info-img {
    background: url("../images/share/endurance-badge.png");
    background-size: contain;
}

.exported-card-meld-body-info-badge {
    position: absolute;
    width: 4.7rem;
    right: 0;
    bottom: 2rem;
    font-size: 2rem;
    text-align: center;
    color: white;
    font-family: Gagalin, Satoshi, Helvetica, Arial, sans-serif;
}

.exported-card-meld-body-text {
    margin-top: .3rem;
    margin-bottom: .1rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #333;
    letter-spacing: -0.00813rem;
    text-shadow: 0px 1px 2px rgb(0 0 0 / 33%);
}

.exported-card-meld-body-text span {
    font-size: .77rem;
    font-weight: 900;
    text-transform: uppercase;
}

.exported-card-meld-body-logo-img {
    width: 3.375rem;
    height: 1.875rem;
}

/*cards for export*/
.exported-card-invisible-container {
    background: white;
}

.exported-card-invisible-container .exported-card-meld-body {
    width: auto;
    height: auto;
    padding: unset;
}

.exported-card-invisible-container .exported-card-meld-body-info {
    width: 440px;
    height: 400px;
}

.exported-card-invisible-container .exported-card-meld-body-info-img {
    width: 440px;
    height: 400px;
    margin-left: 13px;
}

.exported-card-invisible-container .exported-card-meld-body-info-badge {
    width: 143px;
    bottom: 66px;
    right: 7px;
    font-size: 55px;
}

.exported-card-invisible-container .exported-card-meld-body-text {
    font-size: 43px;
    margin-top: 16px;
    margin-bottom: 8px;
}

.exported-card-invisible-container .exported-card-meld-body-text span {
    font-size: 40px;
}

.exported-card-invisible-container .exported-card-meld-body-logo {
    margin-bottom: 10px;
}

.exported-card-invisible-container .exported-card-meld-body-logo-img {
    width: 170px;
    height: 92px;
}

/*export popup styles*/
.share-popup .mud-input-control {
    padding-right: .9rem;
    overflow-y: auto;
}

.share-popup .mud-dialog-content {
    padding: 2.5rem 0 2rem 1.8rem;
}

.share-popup .buttons-panel {
    position: relative;
    padding-top: 2rem;
}

.share-popup .buttons-panel:before {
    position: absolute;
    content: "";
    top: 0;
    right: 2.9rem;
    left: -2rem;
    height: 1px;
    background: linear-gradient(90deg, #8098AE 53.31%, rgba(255, 255, 255, 0.00) 93.25%);
    opacity: 0.5;
}

.share-popup .mud-radio-group > label {
    margin-top: 1.31rem;
    margin-right: unset;
    margin-left: unset;
}

.share-popup .mud-icon-button {
    margin-right: .94rem;
    padding: unset;
}

.share-popup .checkbox-overload .mud-icon-button {
    margin-top: unset;
}

.share-popup .mud-radio-content-placement-end {
    margin: 1rem 0 0;
}

.share-popup .mud-radio-icons {
    width: 3.375rem;
    height: 3.375rem;
    border: .064rem solid #030724;
    border-radius: 50%;
}

.share-popup .mud-radio-icons.mud-checked {
    border-color: var(--mud-palette-success);
}

.share-popup .mud-radio-icons svg:first-child {
    display: none;
}

.share-popup .mud-radio-icons.mud-checked:before {
    content: "";
    position: absolute;
    left: 0;
    width: 1.625rem;
    height: 1.125rem;
    margin-top: 1.1rem;
    margin-left: 0.86rem;
    background: url("../images/icon-mark-white.svg");
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 1;
}

.share-popup .mud-radio-icons.mud-checked .mud-radio-icon-checked {
    font-size: 3.375rem;
    transform: scale(2.5);
}
/*#endregion Share popup*/


/*#endregion Progress page*/