*,
::before,
::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    word-break: break-word;
    word-wrap: break-word;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

body {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    color: #222;
    font-size: 16px;
    line-height: 1.5;
    overflow: hidden;
    background-color: #f6f9f2;
}

#optasy-dashboard #top-nav-fit-messages {
    display: none !important;
}

#fit5405-site-wrapper {
    display: block;
}

#fit5405-header {
    display: block;
}

#fit5405-header nav {
    position: relative;
    width: 1200px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}

#fit5405-header nav>div {
    display: block;
    width: 100px;
    height: 40px;
    background-color: #21759b;
}

#fit5405-header nav>ul {
    display: flex;
    align-items: center;
}

#fit5405-header nav>ul>li,
#fit5405-header nav>ul ul li {
    display: block;
    padding: 10px;
    cursor: pointer;
}

#fit5405-header nav>ul ul li {
    padding: 4px 10px;
}

#fit5405-header nav>ul li:hover>a,
#fit5405-header nav>ul li:focus>a,
#fit5405-header nav>ul li.current-menu-item>a {
    color: #007cba;
}

#fit5405-header nav>ul li>ul {
    opacity: 0;
    position: absolute;
    top: 110%;
    background-color: #f3f3f3;
    padding: 0 10px;
    margin-left: -20px;
    overflow: hidden;
    display: flex;
    flex: 0;
    flex-direction: column;
    -webkit-transition: opacity .3s linear, top .3s linear, flex .3s linear, padding .3s linear;
    -moz-transition: opacity .3s linear, top .3s linear, flex .3s linear, padding .3s linear;
    -ms-transition: opacity .3s linear, top .3s linear, flex .3s linear, padding .3s linear;
    -o-transition: opacity .3s linear, top .3s linear, flex .3s linear, padding .3s linear;
    transition: opacity .3s linear, top .3s linear, flex .3s linear, padding .3s linear;
}

#fit5405-header nav>ul li>ul>li:not(:first-child) {
    margin-top: 0;
}

#fit5405-header nav>ul li:hover ul {
    padding: 10px;
    overflow: auto;
    top: 100%;
    opacity: 1;
    flex: 1;
}

#fit5405-main {
    min-height: 400px;
}

#fit5405-footer {
    width: 100%;
    display: flex;
    height: 200px;
    background-color: #007cba;
}

#fit5405-section {
    width: 100%;
}

.section-wrapper {
    display: flex;
    min-height: 40vh;
    align-items: center;
}

.section-content {
    width: 100%;
}

.section-content.layout-1140 {
    width: 1140px;
    margin: 0 auto;
}

.layout-1140 {
    width: 1140px;
    margin: 0 auto;
}

.section-column {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-basis: 60%;
    max-width: 60%;
    padding-top: 10px;
    padding-bottom: 10px;
}

.fit5405-login-modal-wrapper {
    width: 100%;
    height: 100%;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}

.fit5405-login-modal-wrapper .expired-description {
    padding: 0 20px;
    color: #e8eaf6;
    text-align: center;
    font-size: 14px;
}

body.admin-bar #fit5405-authenticate-wrapper {
    height: calc(100vh - 72px);
}

.fit5405-authenticate-holder {
    display: flex;
    padding: 4px;
    max-width: 100%;
    width: 400px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.fit5405-login-modal-wrapper>div>p {
    margin-bottom: 20px;
}

#fit5405-authenticate-wrapper, .fit5405-login-modal-wrapper {
    &#fit5405-authenticate-wrapper {
        height: calc(100vh);
    }
    .login-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        a, a:visited {
            padding: 10px 20px;
            color: #fff;
            font-size: 12px;
            font-weight: 500;
            border-radius: 14px;
            -webkit-transition: background-color .3s linear, color .3s linear;
            -moz-transition: background-color .3s linear, color .3s linear;
            -ms-transition: background-color .3s linear, color .3s linear;
            -o-transition: background-color .3s linear, color .3s linear;
            transition: background-color .3s linear, color .3s linear;
            cursor: pointer;
        }
        a:hover, a:active {
            background-color: #fff;
            color: #FF9432;
        }
    }
}

.fit5405-login-modal-wrapper>div>form.loginform,
#fit5405-authenticate-wrapper>div>form#loginform,
#fit5405-authenticate-wrapper>div>form#register-form,
#fit5405-authenticate-wrapper>div>form#forgot-password-form,
#fit5405-authenticate-wrapper>div>form#reset-password-form {
    display: block;
    padding: 20px 40px;
}

#fit5405-authenticate-wrapper>div>form#loginform>p,
#fit5405-authenticate-wrapper>div>form#register-form>p,
#fit5405-authenticate-wrapper>div>form#forgot-password-form>p,
#fit5405-authenticate-wrapper>div>form#reset-password-form>p {
    display: block;
    margin-top: 10px;
}

.fit5405-login-modal-wrapper>div>form.loginform>div {
    margin-top: 20px;
}

#fit5405-authenticate-wrapper>div>form#loginform>p label,
#fit5405-authenticate-wrapper>div>form#register-form>p label,
#fit5405-authenticate-wrapper>div>form#forgot-password-form>p label,
#fit5405-authenticate-wrapper>div>form#reset-password-form>p label {
    display: none;
}

.fit5405-login-modal-wrapper>div>form.loginform {
    padding: 20px;
}

.fit5405-login-modal-wrapper>div>form.loginform>div input,
#fit5405-authenticate-wrapper>div>form#loginform>p input,
#fit5405-authenticate-wrapper>div>form#register-form>p input,
#fit5405-authenticate-wrapper>div>form#forgot-password-form>p input,
#fit5405-authenticate-wrapper>div>form#reset-password-form>p input {
    display: block;
    font-size: 14px;
    padding: 18px 31px;
    background: none;
    border: 1px solid #fff;
    color: #fff;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    -webkit-transition: border-color .3s linear;
    -moz-transition: border-color .3s linear;
    -ms-transition: border-color .3s linear;
    -o-transition: border-color .3s linear;
    transition: border-color .3s linear;
}

.fit5405-login-modal-wrapper>div>form.loginform>div input:-webkit-autofill,
#fit5405-authenticate-wrapper>div>form#loginform>p input:-webkit-autofill,
#fit5405-authenticate-wrapper>div>form#register-form>p input:-webkit-autofill,
#fit5405-authenticate-wrapper>div>form#forgot-password-form>p input:-webkit-autofill,
#fit5405-authenticate-wrapper>div>form#reset-password-form>p input:-webkit-autofill {
    -webkit-background-clip: text;
}

.fit5405-login-modal-wrapper>div>form.loginform>div input:-webkit-autofill:first-line,
#fit5405-authenticate-wrapper>div>form#loginform>p input:-webkit-autofill:first-line,
#fit5405-authenticate-wrapper>div>form#register-form>p input:-webkit-autofill:first-line,
#fit5405-authenticate-wrapper>div>form#forgot-password-form>p input:-webkit-autofill:first-line,
#fit5405-authenticate-wrapper>div>form#reset-password-form>p input:-webkit-autofill:first-line {
    color: #fff;
}

.fit5405-login-modal-wrapper>div>form.loginform>div input::placeholder,
#fit5405-authenticate-wrapper>div>form#loginform>p input::placeholder,
#fit5405-authenticate-wrapper>div>form#register-form>p input::placeholder,
#fit5405-authenticate-wrapper>div>form#forgot-password-form>p input::placeholder,
#fit5405-authenticate-wrapper>div>form#reset-password-form>p input::placeholder {
    color: #fff;
    opacity: 1;
}

.fit5405-login-modal-wrapper>div>form.loginform>div input:focus,
#fit5405-authenticate-wrapper>div>form#loginform>p input:focus,
#fit5405-authenticate-wrapper>div>form#register-form>p input:focus,
#fit5405-authenticate-wrapper>div>form#forgot-password-form>p input:focus,
#fit5405-authenticate-wrapper>div>form#reset-password-form>p input:focus {
    border: 1px solid #ff9432;
}

.fit5405-login-modal-wrapper>div>form.loginform div>input#wp-submit,
#fit5405-authenticate-wrapper>div>form#loginform p>input#wp-submit,
#fit5405-authenticate-wrapper>div>form#register-form p>input#wp-submit,
#fit5405-authenticate-wrapper>div>form#forgot-password-form p>input#wp-submit,
#fit5405-authenticate-wrapper>div>form#reset-password-form p>input#wp-submit {
    background-color: #ff9432;
    color: #fff;
    margin: 20px auto 0px auto;
    width: 100%;
    text-transform: uppercase;
}

.fit5405-login-modal-wrapper>div>form.loginform div>input#wp-submit,
.fit5405-login-modal-wrapper>div>form.loginform div>input#wp-submit:visited,
#fit5405-authenticate-wrapper>div>form#loginform p>input#wp-submit,
#fit5405-authenticate-wrapper>div>form#loginform p>input#wp-submit:visited,
#fit5405-authenticate-wrapper>div>form#register-form p>input#wp-submit,
#fit5405-authenticate-wrapper>div>form#register-form p>input#wp-submit:visited,
#fit5405-authenticate-wrapper>div>form#forgot-password-form p>input#wp-submit,
#fit5405-authenticate-wrapper>div>form#forgot-password-form p>input#wp-submit:visited,
#fit5405-authenticate-wrapper>div>form#reset-password-form p>input#wp-submit,
#fit5405-authenticate-wrapper>div>form#reset-password-form p>input#wp-submit:visited {
    border: none;
    background-color: #ff9432;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    -webkit-transition: background-color .3s linear, color .3s linear;
    -moz-transition: background-color .3s linear, color .3s linear;
    -ms-transition: background-color .3s linear, color .3s linear;
    -o-transition: background-color .3s linear, color .3s linear;
    transition: background-color .3s linear, color .3s linear;
}

.fit5405-login-modal-wrapper>div>form.loginform div>input#wp-submit:hover,
.fit5405-login-modal-wrapper>div>form.loginform div>input#wp-submit:active,
#fit5405-authenticate-wrapper>div>form#loginform p>input#wp-submit:hover,
#fit5405-authenticate-wrapper>div>form#loginform p>input#wp-submit:active,
#fit5405-authenticate-wrapper>div>form#register-form p>input#wp-submit:hover,
#fit5405-authenticate-wrapper>div>form#register-form p>input#wp-submit:active,
#fit5405-authenticate-wrapper>div>form#forgot-password-form p>input#wp-submit:hover,
#fit5405-authenticate-wrapper>div>form#forgot-password-form p>input#wp-submit:active,
#fit5405-authenticate-wrapper>div>form#reset-password-form p>input#wp-submit:hover,
#fit5405-authenticate-wrapper>div>form#reset-password-form p>input#wp-submit:active {
    background-color: #fff;
    color: #ff9432;
}

.fit5405-login-modal-wrapper>div>form.loginform>p.login-remember label,
#fit5405-authenticate-wrapper>div>form#loginform>p.login-remember label,
#fit5405-authenticate-wrapper>div>form#register-form>p.login-remember label,
#fit5405-authenticate-wrapper>div>form#forgot-password-form>p.login-remember label,
#fit5405-authenticate-wrapper>div>form#reset-password-form>p.login-remember label {
    display: flex;
}

.fit5405-login-modal-wrapper>div>form.loginform>p.login-remember label>input,
#fit5405-authenticate-wrapper>div>form#loginform>p.login-remember label>input,
#fit5405-authenticate-wrapper>div>form#register-form>p.login-remember label>input,
#fit5405-authenticate-wrapper>div>form#forgot-password-form>p.login-remember label>input,
#fit5405-authenticate-wrapper>div>form#reset-password-form>p.login-remember label>input {
    margin-right: 10px;
}

.fit5405-login-modal-wrapper>div>form.loginform>p.forgetmenot,
#fit5405-authenticate-wrapper>div>form#loginform>p.forgetmenot {
    display: block;
}

.fit5405-login-modal-wrapper>div>form.loginform>p.forgetmenot input#rememberme,
#fit5405-authenticate-wrapper>div>form#loginform>p.forgetmenot input#rememberme {
    display: block;
}

.fit5405-login-modal-wrapper>div>form.loginform>p.login-submit,
#fit5405-authenticate-wrapper>div>form#loginform>p.login-submit {
    display: block;
}

.fit5405-login-modal-wrapper>div>form.loginform>p>input#wp-submit,
#fit5405-authenticate-wrapper>div>form#loginform>p>input#wp-submit {
    display: block;
}

.fit5405-login-modal-wrapper .loginform .login-username .fit-username,
#fit5405-authenticate-wrapper #loginform .login-username #fit-username {
    min-width: 312px;
}
#fit5405-authenticate-wrapper,
.fit5405-login-modal-wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    background-image: url("../../../../../assets/images/fit5-40-5-login-background.png");
    background-size: cover;
    &.fit5405-login-modal-wrapper {
        width: 100%;
        height: 100%;
        .fit-5-40-5-logo {
            width: 250px;
            height: 200px;
        }
    }
    .fit-5-40-5-logo {
        position: relative;
        width: 400px;
        height: 200px;
        background-image: url("../../../../../assets/images/fithub-white.svg");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    .reset-password-form,
    .loginform,
    #loginform {
        .new-password,
        .re-enter-password,
        .login-password {
            display: flex;
            align-items: center;
            .pass1,
            .pass2,
            .fit-password,
            #fit-password {
                min-width: 312px;
            }
            .hs-password {
                height: 30px;
                margin-left: -45px;
                cursor: pointer;
                &[data-visible=true] {
                    .show-pw-eye {
                        display: none;
                    }
                }
                &[data-visible=false] {
                    .hide-pw-eye {
                        display: none;
                    }
                }
                svg {
                    width: 30px;
                    height: 30px;
                    fill: #fff;
                    line {
                        stroke: #fff;
                        stroke-width: 30;
                    }
                }
                &:hover svg {
                    fill: #ff9432;
                    line {
                        stroke: #ff9432;
                    }
                }
            }
        }
    }
    > div > form {
        &#register-form,
        &#forgot-password-form,
        &#reset-password-form {
            p.submit,
            p.submit input#wp-submit,
            p.forgetmenot,
            p.forgetmenot input#rememberme {
                display: block;
            }
            span#password-strength {
                display: block;
                margin-top: 10px;
                margin-bottom: 10px;
                padding: 5px 10px;
                color: #fff;
                &.bad {
                    background-color: #f1adad;
                    border-color: #e35b5b;
                }
                &.short {
                    background-color: #fbc5a9;
                    border-color: #f78b53;
                }
                &.good {
                    background-color: #ffe399;
                    border-color: #ffc733;
                }
                &.strong {
                    background-color: #c1e1b9;
                    border-color: #83c373;
                }
            }
        }
    }
}

.fit-remember {
    display: grid;
    grid-template-columns: min-content auto;
    grid-gap: .5em;
    font-size: 2rem;
    color: #ff9432;
    max-width: 30px;
}

.fit-remember--disabled {
    color: var(--disabled);
}

.fit-remember__control {
    display: inline-grid;
    width: 1em;
    height: 1em;
    border-radius: .25em;
    border: .1em solid currentColor;
}

.fit-remember__control svg {
    transition: transform .1s ease-in 25ms;
    transform: scale(0);
}

.fit-remember__input {
    display: grid;
    grid-template-areas: "checkbox";
}

.fit-remember__input>* {
    grid-area: checkbox;
}

.fit-remember__input input {
    opacity: 0;
    width: 1em;
    height: 1em;
}

.fit-remember__input input:focus+.fit-remember__control {
    box-shadow: 0 0 0 .05em #fff, 0 0 .15em .1em currentColor;
}

.fit-remember__input input:checked+.fit-remember__control svg {
    transform: scale(1);
}

.fit-remember__input input:disabled+.fit-remember__control {
    color: var(--disabled);
}

.fit-checkbox-wrapper {
    max-width: 30px;
    display: grid;
    grid-template-columns: min-content auto;
    align-self: center;
    grid-gap: 5px;
    font-size: 2rem;
    color: var(--fit-blue);
    > .content {
        display: grid;
        grid-template-areas: "checkbox";
        &:has(input:disabled) .fit-checkbox {
            color: var(--disabled);
        }
        &:has(input:focus) .fit-checkbox {
            box-shadow: 0 0 0 .05em var(--fit-white), 0 0 .15em .1em currentColor;
        }
        &:has(input:checked) .fit-checkbox svg {
            transform: scale(1);
        }
        > * {
            grid-area: checkbox;
        }
        input {
            width: 1em;
            height: 1em;
            opacity: 0;
        }
        .fit-checkbox {
            width: 1em;
            height: 1em;
            display: inline-grid;
            border: .1em solid currentColor;
            border-radius: .25em;
            svg {
                transition: transform .1s ease-in 25ms;
                transform: scale(0);
            }
        }
    }
}

.login-remember.fit5405-remember {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    margin-top: 20px !important;
}

.fit5405-login-modal-wrapper .login-remember.fit5405-remember>span {
    margin-left: 10px;
    font-size: 14px;
    color: #e8eaf6;
}

.login-remember.fit5405-remember>span {
    margin-left: 10px;
    font-size: 16px;
    color: #e8eaf6;
}

.pinned-post-checkbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0px !important;
}

.pinned-post-checkbox>span {
    margin-left: 10px;
    font-size: 16px;
    color: #2e358f;
}

#optasy-dashboard-wrapper {
    display: flex;
    justify-content: center;
    width: 100vw;
    height: 88vh;
}

#optasy-dashboard-wrapper {
    height: calc(100vh);
}

body.admin-bar #optasy-dashboard-wrapper {
    height: calc(100vh - 72px);
}

body.admin-bar #optasy-dashboard #dashboard-top-nav {
    top: 32px;
}

body.admin-bar #optasy-dashboard #dashboard-side-menu {
    top: 32px;
}

#optasy-dashboard {
    display: flex;
    width: 100%;
    height: 100vh;
}

#optasy-dashboard #dashboard-top-nav {
    position: fixed;
    display: table;
    top: 0;
    left: 260px;
    width: calc(100vw - 260px);
    height: 92px;
    background-color: #fff;
    border-bottom-color: #a9a9a930;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    z-index: 11;
    -webkit-transition: left .3s linear, width .3s linear;
    -moz-transition: left .3s linear, width .3s linear;
    -ms-transition: left .3s linear, width .3s linear;
    -o-transition: left .3s linear, width .3s linear;
    transition: left .3s linear, width .3s linear;
}

#optasy-dashboard[data-demo-account=true] #dashboard-top-nav {
    top: 15px;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-left {
    position: relative;
    display: table-cell;
    width: 35px;
    vertical-align: middle;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-left>.top-nav-title {
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-left>.top-nav-title>.top-nav-icon {
    position: relative;
    width: 40px;
    height: 40px;
    margin-left: 34px;
    margin-right: 20px;
    cursor: pointer;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-left>.top-nav-title>.top-nav-icon .icon-lines {
    position: absolute;
    display: block;
    top: 50%;
    margin-top: 2px;
    left: 16px;
    width: 20px;
    height: 3px;
    background-color: #1e1e1e;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    transition: all .3s ease-out;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-left>.top-nav-title>.top-nav-icon .icon-lines:before,
#optasy-dashboard #dashboard-top-nav>.top-nav-left>.top-nav-title>.top-nav-icon .icon-lines:after {
    position: absolute;
    content: "";
    width: 16px;
    height: 3px;
    left: -8px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    background-color: #1e1e1e;
    transition: all .3s ease-out;
}

#optasy-dashboard:not(.fit-device) #dashboard-top-nav>.top-nav-left>.top-nav-title>.top-nav-icon:hover .icon-lines,
#optasy-dashboard:not(.fit-device) #dashboard-top-nav>.top-nav-left>.top-nav-title>.top-nav-icon:hover .icon-lines:before,
#optasy-dashboard:not(.fit-device) #dashboard-top-nav>.top-nav-left>.top-nav-title>.top-nav-icon:hover .icon-lines:after,
#optasy-dashboard.fit-device #dashboard-top-nav>.top-nav-left>.top-nav-title>.top-nav-icon:active .icon-lines,
#optasy-dashboard.fit-device #dashboard-top-nav>.top-nav-left>.top-nav-title>.top-nav-icon:active .icon-lines:before,
#optasy-dashboard.fit-device #dashboard-top-nav>.top-nav-left>.top-nav-title>.top-nav-icon:active .icon-lines:after {
    background-color: #ff9432;
}

#optasy-dashboard[data-visible="false"] #dashboard-top-nav>.top-nav-left>.top-nav-title>.top-nav-icon .icon-lines,
#optasy-dashboard:not(.fit-device) #dashboard-top-nav>.top-nav-left>.top-nav-title>.top-nav-icon:hover .icon-lines {
    left: 10px;
}

#optasy-dashboard[data-visible="false"] #dashboard-top-nav>.top-nav-left>.top-nav-title>.top-nav-icon .icon-lines:before,
#optasy-dashboard[data-visible="false"] #dashboard-top-nav>.top-nav-left>.top-nav-title>.top-nav-icon .icon-lines:after,
#optasy-dashboard:not(.fit-device) #dashboard-top-nav>.top-nav-left>.top-nav-title>.top-nav-icon:hover .icon-lines:before,
#optasy-dashboard:not(.fit-device) #dashboard-top-nav>.top-nav-left>.top-nav-title>.top-nav-icon:hover .icon-lines:after {
    left: 0px;
    width: 20px;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-left>.top-nav-title>.top-nav-icon .icon-lines:before {
    top: -8px;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-left>.top-nav-title>.top-nav-icon .icon-lines:after {
    top: 8px;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-search {
    position: relative;
    display: table-cell;
    width: 40%;
    vertical-align: middle;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-search>input#dashboard-search {
    width: 80%;
    height: 40px;
    padding: 10px;
    font-size: 12px;
    font-weight: normal;
    border: none;
    background-color: #f3f3f3;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-search>input#dashboard-search:focus {
    border: 1px solid #ff9432;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-search>input#dashboard-search::placeholder {
    font-size: 12px;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right {
    position: relative;
    display: table-cell;
    width: 35%;
    vertical-align: middle;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options {
    position: relative;
    display: flex;
    justify-content: flex-end;
    height: 100%;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option {
    position: relative;
    display: flex;
    padding: 0px 10px;
    align-items: center;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-messages {
    position: relative;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-messages:hover>.notifications-wrapper {
    display: block;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-messages>.notifications-wrapper {
    position: absolute;
    display: none;
    width: 300px;
    max-height: 500px;
    top: 42px;
    padding: 0px;
    border-radius: 14px;
    left: -10px;
    overflow: hidden;
    z-index: 10;
    max-width: 280px;
    background-color: #fff;
    -webkit-box-shadow: 0px 0px 12px 0px rgba(22, 22, 22, .2);
    -moz-box-shadow: 0px 0px 12px 0px rgba(22, 22, 22, .2);
    box-shadow: 0px 0px 12px 0px rgba(22, 22, 22, .2);
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-messages>.notifications-wrapper:hover {
    display: block;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-messages>.notifications-wrapper .notifications-list {
    position: relative;
    display: flex;
    flex-direction: column;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-messages>.notifications-wrapper .notifications-list .notification-item-wrapper:hover {
    background-color: #dbe0ff;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-messages>.notifications-wrapper .notifications-list .notification-item {
    position: relative;
    display: flex;
    padding: 10px 20px;
    -webkit-transition: background-color .15s linear;
    -moz-transition: background-color .15s linear;
    -ms-transition: background-color .15s linear;
    -o-transition: background-color .15s linear;
    transition: background-color .15s linear;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-messages>.notifications-wrapper .notifications-list .notification-item .notif-thumb {
    position: relative;
    display: table;
    width: 45px;
    min-width: 45px;
    height: 45px;
    object-fit: cover;
    object-position: center;
    border: 1px solid #6e6e6e;
    border-radius: 50%;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-messages>.notifications-wrapper .notifications-list .notification-item>.notif-details {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-left: 10px;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-messages>.notifications-wrapper .notifications-list .notification-item>.notif-details .notif-user {
    position: relative;
    font-size: 14px;
    font-weight: 600;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-messages>.notifications-wrapper .notifications-list .notification-item>.notif-details .notif-message {
    position: relative;
    font-size: 12px;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-messages>.notifications-wrapper .notifications-list .notification-item>.notif-details .notif-reply {
    position: relative;
    font-size: 11px;
    color: #2e358f;
    -webkit-transition: color .15s linear;
    -moz-transition: color .15s linear;
    -ms-transition: color .15s linear;
    -o-transition: color .15s linear;
    transition: color .15s linear;
    margin-top: 10px;
    cursor: pointer;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-messages>.notifications-wrapper .notifications-list .notification-item>.notif-details .notif-reply:hover {
    color: #ff9432;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-messages>.notifications-wrapper .notifications-list .notification-empty {
    position: relative;
    display: flex;
    padding: 10px 20px;
    background-color: #fff;
    -webkit-transition: background-color .15s linear;
    -moz-transition: background-color .15s linear;
    -ms-transition: background-color .15s linear;
    -o-transition: background-color .15s linear;
    transition: background-color .15s linear;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-messages>.notifications-wrapper .notifications-list .notification-empty:hover {
    background-color: #e8eaf6;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-messages>.notifications-wrapper .notifications-list .notification-empty>.notif-details {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-left: 10px;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-messages>.notifications-wrapper .notifications-list .notification-empty>.notif-details .notif-user {
    position: relative;
    font-size: 14px;
    font-weight: 600;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-messages>.notifications-wrapper .notifications-list .notification-empty>.notif-details .notif-reply {
    position: relative;
    font-size: 11px;
    color: #2e358f;
    -webkit-transition: color .15s linear;
    -moz-transition: color .15s linear;
    -ms-transition: color .15s linear;
    -o-transition: color .15s linear;
    transition: color .15s linear;
    margin-top: 10px;
    cursor: pointer;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-messages>.notifications-wrapper .notifications-list .notification-empty>.notif-details .notif-reply:hover {
    color: #ff9432;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-messages.new .notification-empty {
    display: none !important;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-notifications:hover>.notifications-wrapper {
    display: block;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-notifications>.notifications-wrapper {
    position: absolute;
    display: none;
    width: 280px;
    max-height: 500px;
    top: 80px;
    padding: 0px;
    border-radius: 14px;
    left: -70px;
    overflow: hidden;
    z-index: 10;
    max-width: 280px;
    background-color: #fff;
    -webkit-box-shadow: 0px 0px 12px 0px rgba(22, 22, 22, .2);
    -moz-box-shadow: 0px 0px 12px 0px rgba(22, 22, 22, .2);
    box-shadow: 0px 0px 12px 0px rgba(22, 22, 22, .2);
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-notifications>.notifications-wrapper:hover {
    display: block;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-notifications>.notifications-wrapper .notifications-list {
    position: relative;
    display: flex;
    flex-direction: column;
}

#optasy-dashboard #dashboard-top-nav .fit-notifications .notification-item-wrapper {
    cursor: pointer;
    background-color: #e8eaf6;
    border-bottom: 1px solid lightgrey;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-notifications>.notifications-wrapper .notifications-list .notification-item-wrapper:hover {
    background-color: #dbe0ff;
}
#optasy-dashboard #dashboard-top-nav .fit-notifications .notification-item-wrapper.read {
    background-color: #fff;
}

#optasy-dashboard #dashboard-top-nav .fit-notifications .notification-item-wrapper .notification-close {
    position: relative;
    float: right;
    width: 20px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    line-height: 20px;
    margin: 10px 10px 0px 0px;
    background-color: #d9d9d9;
    font-weight: 500;
    cursor: pointer;
    border-radius: 50%;
    -webkit-transition: color .15s linear,background-color .15s linear;
    -moz-transition: color .15s linear,background-color .15s linear;
    -ms-transition: color .15s linear,background-color .15s linear;
    -o-transition: color .15s linear,background-color .15s linear;
    transition: color .15s linear,background-color .15s linear;
}
#optasy-dashboard #dashboard-top-nav .fit-notifications .notification-item-wrapper .notification-close:hover {
    background-color: #ff9432;
    color: #fff;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-notifications>.notifications-wrapper .notifications-list .notification-item {
    position: relative;
    display: flex;
    padding: 10px 20px;
    -webkit-transition: background-color .15s linear;
    -moz-transition: background-color .15s linear;
    -ms-transition: background-color .15s linear;
    -o-transition: background-color .15s linear;
    transition: background-color .15s linear;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-notifications>.notifications-wrapper .notifications-list .notification-item .notif-thumb {
    position: relative;
    display: table;
    width: 45px;
    min-width: 45px;
    height: 45px;
    object-fit: cover;
    object-position: center;
    border: 1px solid #6e6e6e;
    border-radius: 50%;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-notifications>.notifications-wrapper .notifications-list .notification-item>.notif-details {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-left: 10px;
}

#optasy-dashboard #dashboard-top-nav .fit-notifications .notification-item-wrapper .notif-details .notif-date {
    font-size: 10px;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-notifications>.notifications-wrapper .notifications-list .notification-item>.notif-details .notif-user {
    position: relative;
    font-size: 14px;
    font-weight: 600;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-notifications>.notifications-wrapper .notifications-list .notification-item>.notif-details .notif-message {
    position: relative;
    font-size: 12px;
}
#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-notifications>.notifications-wrapper .notifications-list .notification-item>.notif-details .notif-message .msg {
    font-style: italic;
}
#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-notifications>.notifications-wrapper .notifications-list .notification-item>.notif-details .notif-message .snippet {
    padding: 10px 0px;
}
#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-notifications>.notifications-wrapper .notifications-list .notification-item>.notif-details .notif-message .more {
    color: #2e358f;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-notifications>.notifications-wrapper .notifications-list .notification-item>.notif-details .notif-reply {
    position: relative;
    font-size: 11px;
    color: #2e358f;
    -webkit-transition: color .15s linear;
    -moz-transition: color .15s linear;
    -ms-transition: color .15s linear;
    -o-transition: color .15s linear;
    transition: color .15s linear;
    margin-top: 10px;
    cursor: pointer;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-notifications>.notifications-wrapper .notifications-list .notification-item>.notif-details .notif-reply:hover {
    color: #ff9432;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-notifications>.notifications-wrapper .notifications-list .notification-empty {
    position: relative;
    display: flex;
    padding: 10px 20px;
    background-color: #fff;
    -webkit-transition: background-color .15s linear;
    -moz-transition: background-color .15s linear;
    -ms-transition: background-color .15s linear;
    -o-transition: background-color .15s linear;
    transition: background-color .15s linear;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-notifications>.notifications-wrapper .notifications-list .notification-empty:hover {
    background-color: #e8eaf6;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-notifications>.notifications-wrapper .notifications-list .notification-empty>.notif-details {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-left: 10px;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-notifications>.notifications-wrapper .notifications-list .notification-empty>.notif-details .notif-user {
    position: relative;
    font-size: 14px;
    font-weight: 600;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-notifications>.notifications-wrapper .notifications-list .notification-empty>.notif-details .notif-reply {
    position: relative;
    font-size: 11px;
    color: #2e358f;
    -webkit-transition: color .15s linear;
    -moz-transition: color .15s linear;
    -ms-transition: color .15s linear;
    -o-transition: color .15s linear;
    transition: color .15s linear;
    margin-top: 10px;
    cursor: pointer;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-notifications>.notifications-wrapper .notifications-list .notification-empty>.notif-details .notif-reply:hover {
    color: #ff9432;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.fit-notifications.new .notification-empty {
    display: none !important;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option>.option-button {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #e8eefe;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    cursor: pointer;
    -webkit-transition: background-color .15s linear, color .15s linear;
    -moz-transition: background-color .15s linear, color .15s linear;
    -ms-transition: background-color .15s linear, color .15s linear;
    -o-transition: background-color .15s linear, color .15s linear;
    transition: background-color .15s linear, color .15s linear;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option>.option-button>svg path {
    -webkit-transition: stroke .15s linear;
    -moz-transition: stroke .15s linear;
    -ms-transition: stroke .15s linear;
    -o-transition: stroke .15s linear;
    transition: stroke .15s linear;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option>.option-button .icon-side-option {
    color: #2e358f;
    line-height: 16px;
    -webkit-transition: color .15s linear, color .15s linear;
    -moz-transition: color .15s linear, color .15s linear;
    -ms-transition: color .15s linear, color .15s linear;
    -o-transition: color .15s linear, color .15s linear;
    transition: color .15s linear, color .15s linear;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option>.option-button:hover .icon-side-option {
    color: #fff;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option>.option-button:hover {
    background-color: #2e358f;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option>.option-button:hover>svg path {
    stroke: #fff;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option>.option-button>svg {
    display: flex;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.new .option-button:after {
    position: absolute;
    right: -2px;
    top: -2px;
    display: block;
    content: "";
    width: 10px;
    height: 10px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: #ff9432;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option .profile-picture {
    position: relative;
    display: table-cell;
    width: 45px;
    height: 45px;
    object-fit: cover;
    object-position: center;
    border: 1px solid #6e6e6e;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option>.profile-options {
    position: relative;
    display: table-cell;
    padding: 0px 20px;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option>.profile-options>span {
    display: block;
    font-size: 14px;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option>.profile-options>span.profile-name {
    font-weight: 600;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option>.profile-options>span.profile-user {
    font-weight: 300;
    font-size: 13px;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option>.profile-user-more {
    position: absolute;
    display: none;
    top: 0;
    right: 0px;
    width: 160px;
    z-index: 2;
    flex-direction: column;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option>.profile-user-more>span.user-more-holder {
    position: relative;
    background-color: #fff;
    margin-top: 50px;
    display: flex;
    cursor: pointer;
    flex-direction: column;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, .25);
    color: #222;
    -webkit-transition: color .15s linear;
    -moz-transition: color .15s linear;
    -ms-transition: color .15s linear;
    -o-transition: color .15s linear;
    transition: color .15s linear;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option>.profile-user-more>span.user-more-holder .user-more-option {
    position: relative;
    display: flex;
    padding: 8px 20px 8px 20px;
    font-size: 14px;
    -webkit-transition: background-color .15s linear;
    -moz-transition: background-color .15s linear;
    -ms-transition: background-color .15s linear;
    -o-transition: background-color .15s linear;
    transition: background-color .15s linear;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option>.profile-user-more>span.user-more-holder .user-more-option:hover {
    background-color: #e8eaf6;
    color: #ff9432;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option>.profile-user-more>span.user-more-holder a {
    color: #2e358f;
    -webkit-transition: color .15s linear, background-color .15s linear;
    -moz-transition: color .15s linear, background-color .15s linear;
    -ms-transition: color .15s linear, background-color .15s linear;
    -o-transition: color .15s linear, background-color .15s linear;
    transition: color .15s linear, background-color .15s linear;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option>.profile-user-more>span.user-more-holder a:hover {
    color: #ff9432;
}

#optasy-dashboard #dashboard-top-nav>.top-nav-right>.top-nav-right-options>.top-nav-option.list:hover .profile-user-more {
    display: flex;
}

#optasy-dashboard .custom_fit_button.transition {
    transition: all 5s ease-in-out;
}
#optasy-dashboard .custom_fit_button.transition.success {
    color: #fff;
    background-color: #08a702;
}
#optasy-dashboard .custom_fit_button.transition.failed {
    color: #fff;
    background-color: #ff2e2e;
}

#optasy-dashboard .section-options :where(.select-wellness, .select2-wellness:not(select)) {
    padding: 16px 20px;
}
#optasy-dashboard .section-options :where(.select-wellness, .select2-wellness:not(select)):where(.country, .state, .ambassador) {
    height: 47px;
}
#optasy-dashboard button, input, optgroup, select, textarea {
    font-family: "Poppins", sans-serif;
}
#optasy-dashboard .main-content:is([data-content-type="edit_profile"], [data-content-type="edit_settings"]) .section-options :is(.select-wellness, .select2-wellness:not(select))>.search {
    position: absolute;
}
#optasy-dashboard .main-content:where([data-content-type="edit_profile"], [data-content-type="edit_settings"]) .section-options :where(.select-wellness, .select2-wellness:not(select))>.text {
    font-size: 12px;
}
#optasy-dashboard .main-content[data-content-type="edit_profile"] .section-options :where(.select-wellness, .select2-wellness:not(select)).country {
    width: 300px;
}
#optasy-dashboard .section-options .states-initial {
    display: none;
}
#optasy-dashboard .section-options .state.disabled {
    background-color: lightgray;
}
#optasy-dashboard .section-options .state.hide, #optasy-dashboard .section-options .ambassador.hide {
    display: none;
}
#optasy-dashboard .section-options :where(.select-wellness, .select2-wellness:not(select)) .country-flag {
    width: 20px;
    height: 15px;
    vertical-align: super;
}
#optasy-dashboard .section-options .default.ambassador-icon {
    border-color: lightgray;
    margin-bottom: 0px;
}
#optasy-dashboard [data-user-type="ambassadors"] .ambassador-icon-wrapper {
    display: flex;
}
#optasy-dashboard [data-user-type="ambassadors"] .ambassador-icon {
    width: 45px;
    height: 45px;
    margin-bottom: 2px;
    object-fit: cover;
    object-position: center;
    border: 1px #000 solid;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
#optasy-dashboard [data-user-type="ambassadors"] :where(.select-wellness, .select2-wellness:not(select)) .ambassador-icon-wrapper {
    display: inline-block;
    vertical-align: middle;
    padding-right: 5px;
}
#optasy-dashboard [data-user-type="ambassadors"] :where(.select-wellness, .select2-wellness:not(select)) .ambassador-icon {
    width: 25px;
    height: 25px;
}
#optasy-dashboard .section-options .custom_fit_button[data-id="add_ambassador"] {
    min-width: unset;
    min-height: unset;
    height: fit-content;
    padding: 13px 13px;
    fill: #fff;
}
#optasy-dashboard .section-options .custom_fit_button[data-id="add_ambassador"].hide {
    display: none;
}
#optasy-dashboard .section-options .custom_fit_button[data-id="add_ambassador"] svg {
    display: block;
    margin: auto;
}

#optasy-dashboard .user-list-holder .user-list-item.custom_fit_button {
    cursor: pointer;
}
#optasy-dashboard [data-user-type="ambassadors"] .user-list-holder {
    margin-top: 20px;
}
#optasy-dashboard [data-user-type="ambassadors"] .user-list-holder .user-list-item .list-col-info {
    gap: 5px;
    flex-basis: 90%;
}
#optasy-dashboard [data-user-type="ambassadors"] .user-list-holder .user-list-item .list-col-info .col0,
#optasy-dashboard [data-user-type="ambassadors"] .user-list-holder .user-list-item .list-col-info .col1 {
    flex-basis: 6%;
}
#optasy-dashboard [data-user-type="ambassadors"] .user-list-holder .user-list-item .list-col-info .list-col.country {
    flex-basis: 50%;
}
#optasy-dashboard [data-user-type="ambassadors"] .user-list-holder .user-list-item .list-col-info .list-col .ambassador {
    display: block;
}
#optasy-dashboard [data-user-type="ambassadors"] .user-list-holder .user-list-item .list-col-info .list-col .country-flag {
    width: 25px;
    height: 25px;
    display: inline-block;
    vertical-align: middle;
}
#optasy-dashboard [data-user-type="ambassadors"] .user-list-holder .user-list-item .list-col-info .list-col .state {
    display: inline-block;
    vertical-align: sub;
}
#optasy-dashboard [data-user-type="ambassadors"] .user-list-holder .user-list-item .list-col-info .list-col .separator {
    margin: 0px 5px;
}
#optasy-dashboard [data-user-type="ambassadors"] .user-list-holder .user-list-item .list-col-controls {
    flex-basis: 10%;
}

#optasy-dashboard .main-content .type-content .content-section .section-options .opt-option-wrapper.error .opt-option-label {
    color: red;
}
#optasy-dashboard .main-content .type-content .content-section .section-options .opt-option-wrapper.error label,
#optasy-dashboard .main-content .type-content .content-section .section-options .opt-option-wrapper.error input,
#optasy-dashboard .main-content .type-content .content-section .section-options .opt-option-wrapper.error [contenteditable=true] {
    border-color: red;
}

#optasy-dashboard #dashboard-side-menu {
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    width: 260px;
    height: 100vh;
    background-color: #fff;
    border-right-color: #a9a9a930;
    border-right-width: 1px;
    border-right-style: solid;
    z-index: 3;
    -webkit-transition: left .3s linear, width .3s linear;
    -moz-transition: left .3s linear, width .3s linear;
    -ms-transition: left .3s linear, width .3s linear;
    -o-transition: left .3s linear, width .3s linear;
    transition: left .3s linear, width .3s linear;
}

#optasy-dashboard #dashboard-side-menu .dashboard-logo {
    position: relative;
    margin-top: 15px;
    margin-bottom: 46px;
}

.dashboard-logo {
    display: table-cell;
    vertical-align: middle;
}
.dashboard-logo>a {
    position: relative;
    display: block;
    background-image: url("../../../../../assets/images/fitLogo_beta.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 110px;
    height: 64px;
}

#optasy-dashboard #dashboard-side-menu #side-menu-list {
    position: relative;
}

#optasy-dashboard #dashboard-side-menu #side-menu-list .sub-menu {
    position: relative;
}

#optasy-dashboard #dashboard-side-menu #side-menu-list > li {
    height: 50px;
    overflow: hidden;
}
#optasy-dashboard #dashboard-side-menu #side-menu-list > li li {
    height: 35px;
    overflow: hidden;
}

#optasy-dashboard #dashboard-side-menu #side-menu-list > li,
#optasy-dashboard #dashboard-side-menu #side-menu-list .sub-menu > li {
    position: relative;
    margin-bottom: 4px;
    background-color: #fff;
    line-height: 30px;
    color: #757575;
    font-size: 13px;
    font-weight: 600;
    -webkit-transition: background-color .18s linear;
    -moz-transition: background-color .18s linear;
    -ms-transition: background-color .18s linear;
    -o-transition: background-color .18s linear;
    transition: background-color .18s linear;
}
#optasy-dashboard #dashboard-side-menu #side-menu-list .sub-menu > li {
    line-height: 15px;
    font-weight: 400;
}

#optasy-dashboard #dashboard-side-menu #side-menu-list>li>a>.icon-side-option.dashboard svg,
#optasy-dashboard #dashboard-side-menu #side-menu-list>li>a>.icon-side-option.dashboard svg rect,
#optasy-dashboard #dashboard-side-menu #side-menu-list>li>a>.icon-side-option.dashboard svg line,
#optasy-dashboard #dashboard-side-menu #side-menu-list>li>a>.icon-side-option.dashboard svg path,
#optasy-dashboard #dashboard-side-menu #side-menu-list>li>a>.icon-side-option.dashboard svg circle {
    -webkit-transition: stroke .15s linear, fill .15s linear;
    -moz-transition: stroke .15s linear, fill .15s linear;
    -ms-transition: stroke .15s linear, fill .15s linear;
    -o-transition: stroke .15s linear, fill .15s linear;
    transition: stroke .15s linear, fill .15s linear;
}

#optasy-dashboard #dashboard-side-menu #side-menu-list > li:hover > a,
#optasy-dashboard #dashboard-side-menu #side-menu-list > li.active > a,
#optasy-dashboard #dashboard-side-menu #side-menu-list .sub-menu > li:hover > a,
#optasy-dashboard #dashboard-side-menu #side-menu-list .sub-menu > li.active > a {
    background-color: #e8eaf6;
    color: #2e358f;
}
#optasy-dashboard #dashboard-side-menu #side-menu-list :is(li[data-open=true]:hover, li.active[data-open=true]) > a {
    background-color: unset;
}

#optasy-dashboard #dashboard-side-menu #side-menu-list > li:hover > a> .icon-side-option,
#optasy-dashboard #dashboard-side-menu #side-menu-list > li.active > a >.icon-side-option,
#optasy-dashboard #dashboard-side-menu #side-menu-list .sub-menu > li:hover > a> .icon-side-option,
#optasy-dashboard #dashboard-side-menu #side-menu-list .sub-menu > li.active > a >.icon-side-option {
    color: #757575;
}

#optasy-dashboard #dashboard-side-menu #side-menu-list > li > a,
#optasy-dashboard #dashboard-side-menu #side-menu-list .sub-menu > li > a {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px 20px 10px 40px;
    background-color: #fff;
    color: #757575;
    cursor: pointer;
    -webkit-transition: background-color .15s linear, color .15s linear;
    -moz-transition: background-color .15s linear, color .15s linear;
    -ms-transition: background-color .15s linear, color .15s linear;
    -o-transition: background-color .15s linear, color .15s linear;
    transition: background-color .15s linear, color .15s linear;
}
/* 2-level deep */
#optasy-dashboard #dashboard-side-menu #side-menu-list .sub-menu > li > a {
    padding: 10px 30px 10px 55px;
}
/* 3-level deep */
#optasy-dashboard #dashboard-side-menu #side-menu-list .sub-menu .sub-menu > li > a {
    padding: 10px 40px 10px 70px;
}
/* 4-level deep */
#optasy-dashboard #dashboard-side-menu #side-menu-list .sub-menu .sub-menu .sub-menu > li > a {
    padding: 10px 50px 10px 85px;
}
/* 5-level deep */
#optasy-dashboard #dashboard-side-menu #side-menu-list .sub-menu .sub-menu .sub-menu .sub-menu > li > a {
    padding: 10px 60px 10px 100px;
}

#optasy-dashboard #dashboard-side-menu #side-menu-list>li > a .icon-side-option {
    position: relative;
    display: flex;
    width: 24px;
    height: 24px;
    stroke: #757575;
    fill: #757575;
}
/* Needed for Safari */
#optasy-dashboard #dashboard-side-menu #side-menu-list>li>a > .icon-side-option svg {
    width: 24px;
    height: 24px;
}
/*********************/

#optasy-dashboard #dashboard-side-menu #side-menu-list>li[data-panel=report-problems]>a > .icon-side-option {
    fill: #fff;
}
#optasy-dashboard #dashboard-side-menu #side-menu-list>li[data-panel=report-problems]:hover a > .icon-side-option,
#optasy-dashboard #dashboard-side-menu #side-menu-list>li[data-panel=report-problems].active a > .icon-side-option {
    fill: #e8eaf6;
}

#optasy-dashboard #dashboard-side-menu #side-menu-list>li>a > .side-menu-item-label {
    position: relative;
    display: flex;
    margin-left: 20px;
}

#optasy-dashboard #dashboard-side-menu #side-menu-list li > a .arrow {
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
}
#optasy-dashboard #dashboard-side-menu #side-menu-list li > a .arrow > i {
    font-size: 13px;
    font-weight: 600;
}
/* 2-level deep */
#optasy-dashboard #dashboard-side-menu #side-menu-list li li > a .arrow > i {
    font-size: 10px;
    font-weight: unset;
}

#optasy-dashboard #dashboard-holder {
    position: relative;
    display: block;
    left: 260px;
    top: 92px;
    width: calc(100vw - 260px);
    height: calc(100vh - 92px);
    background-color: #f6f9f2;
    -webkit-transition: left .3s linear, width .3s linear;
    -moz-transition: left .3s linear, width .3s linear;
    -ms-transition: left .3s linear, width .3s linear;
    -o-transition: left .3s linear, width .3s linear;
    transition: left .3s linear, width .3s linear;
    z-index: 1;
}

#optasy-dashboard[data-demo-account=true] #dashboard-holder {
    top: 107px;
}

#optasy-dashboard #dashboard-holder #dashboard-content {
    position: relative;
    display: flex;
    width: 100%;
    justify-content: space-between;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper {
    position: relative;
    display: flex;
    width: 86%;
    padding: 17px;
    vertical-align: top;
    justify-content: center;
}
#optasy-dashboard[data-role=administrator] #dashboard-holder #dashboard-content #dashboard-main-content-wrapper {
    width: 100%;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content {
    position: relative;
    display: flex;
    width: 880px;
    height: 100%;
    flex-direction: column;
    justify-content: space-around;
    z-index: 1;
}
#optasy-dashboard[data-role=administrator] #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content {
    width: 1200px;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content[data-content-type=challenges] [data-content-type=challenges] {
    display: flex;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content[data-content-type=edit_profile] [data-content-type=edit_profile] {
    display: flex;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content[data-content-type=edit_settings] [data-content-type=edit_settings] {
    display: flex;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content[data-content-type=splash_screen] [data-content-type=splash_screen] {
    display: flex;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content[data-content-type=loaded-content] [data-content-type=loaded-content] {
    display: flex;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content[data-content-type=steps] [data-content-type=steps] {
    display: flex;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content[data-content-type=pre-challenge-questionnaire] [data-content-type=pre-challenge-questionnaire] {
    display: flex;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content[data-content-type=post-challenge-questionnaire] [data-content-type=post-challenge-questionnaire] {
    display: flex;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content[data-content-type=invite-member] [data-content-type=invite-member] {
    display: flex;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content[data-content-type=register-member] [data-content-type=register-member] {
    display: flex;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content[data-content-type=landing-page] [data-content-type=landing-page] {
    display: flex;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content[data-content-type=register-user] [data-content-type=register-user] {
    display: flex;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content[data-content-type=emails-notifications] [data-content-type=emails-notifications] {
    display: flex !important;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content {
    position: relative;
    display: none;
    flex-basis: 90%;
    flex-direction: column;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .rest-day-overlay {
    position: absolute;
    display: none;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    background-color: rgba(46, 53, 143, .27);
    z-index: 3;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content[data-rest=true] .rest-day-overlay {
    display: block;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper {
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: 16px 0px;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .breaker-accordions {
    display: flex;
    margin: 20px 20px;
    border: 2px solid #e8eaf6;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 20px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type[data-status=opened] {
    background-color: #edf0ff;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type:first-child {
    margin-top: 0;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type[data-status=closed] .accordion-wellness>.opened,
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type[data-status=closed] .accordion-wellness2>.opened {
    display: none;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type[data-status=opened] .accordion-wellness>.closed,
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type[data-status=opened] .accordion-wellness2>.closed {
    display: none;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type[data-status=closed] .fit-button[data-id=update_day] {
    display: none;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type[data-status=opened] .fit-button[data-id=edit_day]:not(.accordion-wellness2) {
    display: none;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type[data-status=closed] .fit-button[data-id=update_program] {
    display: none;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type[data-status=opened] .fit-button[data-id=edit_program]:not(.accordion-wellness2) {
    display: none;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type[data-status=closed] .fit-button[data-id=update_question] {
    display: none;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type[data-status=opened] .fit-button[data-id=edit_question]:not(.accordion-wellness2) {
    display: none;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type.static[data-status=opened]>.type-header {
    background-color: #0b2997;
    color: #fff;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type[data-status=closed] > .type-content {
    height: 0;
    padding: 0 20px;
    background-color: #edf0ff;
    -webkit-border-radius: 0 0 14px 14px;
    -moz-border-radius: 0 0 14px 14px;
    border-radius: 0 0 14px 14px;
    overflow: hidden;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type>.type-header {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type>.type-header .type-header-status {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type .accordion-wellness,
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type .accordion-wellness2 {
    font-size: 12px;
    display: flex;
    line-height: 22px;
    align-items: center;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type>.type-header .type-header-status>.accordion-wellness>span.opened,
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type>.type-header .type-header-status>.accordion-wellness2>span.opened {
    line-height: 38px;
    height: 30px;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type>.type-header .type-header-status>.accordion-wellness>span.closed,
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type>.type-header .type-header-status>.accordion-wellness2>span.closed {
    line-height: 24px;
    height: 16px;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type>.type-header .type-header-status>.accordion-wellness>span>i,
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type>.type-header .type-header-status>.accordion-wellness2>span>i {
    font-size: 16px;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type>.type-header .type-header-status>.title-status {
    position: relative;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type>.type-header .type-header-status>.title-status>.title {
    position: relative;
    font-weight: 500;
    font-size: 15px;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type>.type-header .type-header-status>.title-status>.status {
    position: relative;
    font-size: 12px;
    color: #db3b3b;
    margin-top: 10px;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type>.type-header>.type-header-options {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type>.type-header>.type-header-options>.level {
    position: relative;
    color: #ff9432;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    flex-direction: row;
    align-items: center;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type>.type-header>.type-header-options>.level>.level-icon {
    position: relative;
    display: flex;
    margin-left: 5px;
    transform: scale(1.1, 1.1);
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type>.type-header>.type-header-options>.level>.level-icon>svg path {
    fill: #757575;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type>.type-header>.type-header-options>.level>.level-icon.v2 {
    margin-left: 6px;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type>.type-header>.type-header-options>.level>.level-name {
    position: relative;
    display: flex;
    margin-left: 10px;
    min-width: 120px;
    justify-content: center;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type>.type-header>.type-header-options>.level:hover>.challenge_level_list,
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type>.type-header>.type-header-options>.level:active>.challenge_level_list {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    pointer-events: auto;
    cursor: pointer;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type>.type-header>.type-header-options>.level .challenge_level_list {
    position: absolute;
    z-index: 900;
    background-color: #e8eaf6;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, .45);
    opacity: 0;
    transform: translate(0, 15px) scale(0.95);
    transition: transform .1s ease-out, opacity .1s ease-out;
    pointer-events: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 130px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type>.type-header>.type-header-options>.level .challenge_level_list .list-item-level {
    position: relative;
    padding: 8px 8px;
    font-size: 14px;
    color: #2e358f;
    background-color: #e8eaf6;
    -webkit-transition: background-color .3s linear, color .3s linear;
    -moz-transition: background-color .3s linear, color .3s linear;
    -ms-transition: background-color .3s linear, color .3s linear;
    -o-transition: background-color .3s linear, color .3s linear;
    transition: background-color .3s linear, color .3s linear;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type>.type-header>.type-header-options>.level .challenge_level_list .list-item-level:hover,
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type>.type-header>.type-header-options>.level .challenge_level_list .list-item-level.active {
    background-color: #ff9432;
    color: #fff;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type>.type-header>.type-header-options>.level[data-level-index="0"]>span:nth-child(-n+1)>svg path {
    fill: #ff9432;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type>.type-header>.type-header-options>.level[data-level-index="1"]>span:nth-child(-n+2)>svg path {
    fill: #ff9432;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type>.type-header>.type-header-options>.level[data-level-index="2"]>span:nth-child(-n+3)>svg path {
    fill: #ff9432;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type>.type-header>.type-header-options>.level[data-level-index="3"]>span:nth-child(-n+4)>svg path {
    fill: #ff9432;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type>.type-header>.type-header-options>.level[data-level-index="4"]>span:nth-child(-n+5)>svg path {
    fill: #ff9432;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type>.type-header>.type-header-options>.level[data-level-index="5"]>span:nth-child(-n+6)>svg path {
    fill: #ff9432;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type>.type-header>.type-header-options>.options-buttons {
    position: relative;
    display: flex;
    margin-left: 20px;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type>.type-header>.type-header-options>.options-buttons>.more-options {
    position: relative;
    height: 48px;
    line-height: 32px;
    text-align: center;
    margin-left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type>.type-header>.type-header-options>.options-buttons>.more-options>.icon {
    position: relative;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type>.type-header>.type-header-options>.options-buttons>.more-options>.icon>svg {
    display: flex;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type>.type-header>.type-header-options>.options-buttons>.more-options>.icon>svg>circle {
    -webkit-transition: fill .15s linear;
    -moz-transition: fill .15s linear;
    -ms-transition: fill .15s linear;
    -o-transition: fill .15s linear;
    transition: fill .15s linear;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type>.type-header>.type-header-options>.options-buttons>.more-options:hover>.icon>svg>circle {
    fill: #fff;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type[data-status=opened] .type-header .level-name {
    color: #fff;
    min-width: 120px;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type[data-status=opened] .type-header>.type-header-options .level>span>svg path {
    fill: #fff;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type.static {
    background-color: #edf0ff;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type.static .section-title {
    font-size: 16px;
}

#optasy-dashboard .wellness-type-wrapper .wellness-type {
    .description-per-device {
        display: flex;
        flex-direction: row;
        gap: 20px;
        margin: 5px 10px 0 10px;
        font-size: 10px;
        .device {
            display: flex;
            flex-direction: column;
            align-items: center;
            &.mobile, &.tablet, &.laptop, &.pc {
                display: none;
                .active {
                    display: flex;
                    color: red;
                    fill: red;
                }
                .fits {
                    color: green;
                    fill: green;
                }
            }
            .mobile-icon, .tablet-icon, .laptop-icon, .pc-icon {
                svg {
                    width: 20px;
                    height: 20px;
                }
            }
        }
        .chars-left {
            margin-left: auto;
            font-size: 12px;
            color: red;
            &.fits {
                color: green;
            }
        }
    }
}

#optasy-dashboard .wellness-type-wrapper .wellness-type .type-footer .footer-buttons-list {
    margin: 20px;
}
#optasy-dashboard .wellness-type-wrapper .wellness-type.static .type-footer .footer-buttons-list > .fit-button {
    justify-content: center;
}

#optasy-dashboard .main-content[data-content-type="report-problems"] form {
    max-width: 100%;
}

#optasy-dashboard .main-content[data-content-type="pre-challenge-questionnaire"] .content-wellness .type-content.hide {
    display: none;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.fit-button {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-self: end;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.main-content-wrapper {
    position: relative;
    background-color: #fff;
    display: flex;
    padding: 20px;
    flex-direction: column;
    min-height: 480px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    border-color: #a9a9a930;
    border-width: 1px;
    border-style: solid;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.main-content-wrapper>.content-navigation {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 20px;
}

#optasy-dashboard .content-navigation > .content-nav-title {
    position: relative;
    display: flex;
    flex-direction: column;
    &.scheduled {
        flex-direction: row;
        width: 100%;
    }
    > .title {
        position: relative;
        display: flex;
        gap: 10px;
        line-height: 1;
        font-size: clamp(12px, 3vw, 20px);
        font-weight: 700;
        color: #101010;
    }
    > .subtitle {
        position: relative;
        font-size: 12px;
        font-weight: 400;
        color: #757575;
        .hidden {
            display: none;
        }
    }
    .ch-dot {
        display: inline-block;
        min-width: 15px;
        &:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            transform: translateY(-50%);
        }
        &.ch1:before {
            background-color: var(--ch1-color);
        }
        &.ch2:before {
            background-color: var(--ch2-color);
        }
        &.ch3:before {
            background-color: var(--ch3-color);
        }
    }
}
#optasy-dashboard .main-content[data-content-type=splash_screen] .content-navigation > .content-nav-title {
    > .subtitle {
        font-size: 18px;
    }
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.main-content-wrapper>.content-navigation>.content-nav-holder {
    position: relative;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.main-content-wrapper>.content-navigation > .content-nav-holder:has(.content-nav-header[data-visible="1"]) {
    display: none;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.main-content-wrapper>.content-navigation>.content-nav-holder > .content-nav-header {
    position: relative;
    display: flex;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    width: 100%;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.main-content-wrapper>.content-navigation>.content-nav-holder>.content-nav-header > .content-nav-header-option {
    position: relative;
    padding: 11px 14px;
    font-size: 12px;
    min-width: 112px;
    text-align: center;
    line-height: 18px;
    margin-left: 2px;
    background-color: #f5f5f5;
    color: #222;
    cursor: pointer;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    -webkit-transition: background-color .15s linear, color .15s linear;
    -moz-transition: background-color .15s linear, color .15s linear;
    -ms-transition: background-color .15s linear, color .15s linear;
    -o-transition: background-color .15s linear, color .15s linear;
    transition: background-color .15s linear, color .15s linear;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.main-content-wrapper>.content-navigation>.content-nav-holder>.content-nav-header > .content-nav-header-option:first-child {
    margin-left: 0px;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.main-content-wrapper>.content-navigation>.content-nav-holder>.content-nav-header > :where(.content-nav-header-option:hover, .content-nav-header-option.active) {
    color: #222;
    border-style: solid;
    border-width: 1px;
    border-color: #ff9432;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.main-content-wrapper>.content-navigation>.content-nav-holder>.content-nav-header > .content-nav-header-option:not(.visible) {
    display: none;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.main-content-wrapper>.content-wellness {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.main-content-wrapper>.content-wellness>.wellness-settings-wrapper {
    position: relative;
    display: flex;
    flex-direction: row;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.main-content-wrapper>.content-wellness .wellness-tabs-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.main-content-wrapper>.content-wellness .wellness-tabs-wrapper>.wellness-tabs-header-wrapper {
    position: relative;
    display: flex;
    justify-content: flex-end;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.main-content-wrapper>.content-wellness .wellness-tabs-wrapper>.wellness-tabs-header-wrapper>.wellness-tabs {
    position: relative;
    display: flex;
    background-color: #f5f5f5;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.main-content-wrapper>.content-wellness .wellness-tabs-wrapper>.wellness-tabs-header-wrapper>.wellness-tabs>.wellness-tab {
    position: relative;
    padding: 11px 14px;
    font-size: 12px;
    min-width: 112px;
    text-align: center;
    line-height: 18px;
    margin-left: 2px;
    background-color: #f5f5f5;
    color: #222;
    cursor: pointer;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    -webkit-transition: background-color .15s linear, color .15s linear;
    -moz-transition: background-color .15s linear, color .15s linear;
    -ms-transition: background-color .15s linear, color .15s linear;
    -o-transition: background-color .15s linear, color .15s linear;
    transition: background-color .15s linear, color .15s linear;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.main-content-wrapper>.content-wellness .wellness-tabs-wrapper>.wellness-tabs-header-wrapper>.wellness-tabs>.wellness-tab:first-child {
    margin-left: 0px;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.main-content-wrapper>.content-wellness .wellness-tabs-wrapper>.wellness-tabs-header-wrapper>.wellness-tabs>.wellness-tab:hover,
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.main-content-wrapper>.content-wellness .wellness-tabs-wrapper>.wellness-tabs-header-wrapper>.wellness-tabs>.wellness-tab.active {
    background-color: #ff9432;
    color: #fff;
}
#optasy-dashboard #dashboard-holder .wellness-tabs-content-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 10px 0;
}
#optasy-dashboard #dashboard-holder .main-content[data-content-type=manage-media] .wellness-tabs-content-wrapper {
    display: none;
}
#optasy-dashboard #dashboard-holder .main-content[data-content-type=manage-media] .wellness-tabs-content-wrapper[data-active=true] {
    display: flex;
}
#optasy-dashboard #dashboard-holder .wellness-tabs-content-wrapper>.wellness-tabs-content {
    position: relative;
    display: none;
    width: 100%;
    flex-direction: column;
}
#optasy-dashboard #dashboard-holder .wellness-tabs-content-wrapper>.wellness-tabs-content.active {
    display: flex;
}
#optasy-dashboard #dashboard-holder .wellness-tabs-content-wrapper[data-type=programs] .select-box {
    margin-left: 0px !important;
}
#optasy-dashboard #dashboard-holder .wellness-tabs-content-wrapper[data-type=programs] .options-holder>.option:first-child>.fit-button {
    margin-top: 20px !important;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.main-content-wrapper[data-content-type=goals]>.content-wellness {
    margin-top: 30px;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.main-content-wrapper[data-content-type=levels]>.content-wellness {
    margin-top: 30px;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.main-content-wrapper>.main-content.filter {
    background-color: transparent;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.main-content-wrapper>.main-content.filter .content-navigation {
    justify-content: flex-end;
    align-content: flex-end;
    align-items: flex-end;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.post-filter-tabs>.content-navigation {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.post-filter-tabs>.content-navigation>.content-nav-title {
    position: relative;
    display: flex;
    flex-direction: column;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.post-filter-tabs>.content-navigation>.content-nav-title>.title {
    position: relative;
    font-size: 15px;
    font-weight: 700;
    color: #101010;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.post-filter-tabs>.content-navigation>.content-nav-title>.subtitle {
    position: relative;
    font-size: 12px;
    font-weight: 3400;
    color: #757575;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.post-filter-tabs>.content-navigation>.content-nav-holder {
    position: relative;
    display: flex;
    gap: 5px;
    width: 100%;
    max-width: 180px;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.post-filter-tabs>.content-navigation>.content-nav-holder .post-filter-menu {
    position: relative;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.post-filter-tabs>.content-navigation>.content-nav-holder .post-filter-menu[data-open=true] .selected-nav {
    -webkit-border-bottom-left-radius: 0;
    -moz-border-bottom-left-radius: 0;
    border-bottom-left-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -moz-border-bottom-right-radius: 0;
    border-bottom-right-radius: 0;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.post-filter-tabs>.content-navigation>.content-nav-holder .post-filter-menu[data-open=true] .content-nav-header {
    display: block;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.post-filter-tabs>.content-navigation>.content-nav-holder .selected-nav-label {
    align-self: center;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.post-filter-tabs>.content-navigation>.content-nav-holder .selected-nav {
    display: flex;
    gap: 10px;
    padding: 11px 14px;
    font-size: 12px;
    text-align: center;
    line-height: 18px;
    background-color: #f5f5f5;
    color: #222;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, .2);
    cursor: pointer;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    min-width: 112px
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.post-filter-tabs>.content-navigation>.content-nav-holder .post-filter-menu[data-open=true] .selected-nav {
    border: 1px solid #ff9432;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.post-filter-tabs>.content-navigation>.content-nav-holder .selected-nav .arrow {
    display: none;
    align-self: center;
    stroke: #ff9432;
    stroke-width: 3px;
    align-self: center;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.post-filter-tabs>.content-navigation>.content-nav-holder .post-filter-menu[data-open=false] .selected-nav .arrow-up {
    display: flex;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.post-filter-tabs>.content-navigation>.content-nav-holder .post-filter-menu[data-open=true] .selected-nav .arrow-down {
    display: flex;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.post-filter-tabs>.content-navigation>.content-nav-holder .selected-nav .arrow svg {
    width: 12px;
    height: 12px;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.post-filter-tabs>.content-navigation>.content-nav-holder .content-nav-header {
    position: absolute;
    display: none;
    width: 100%;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, .2);
    z-index: 5;
    -webkit-border-bottom-left-radius: 14px;
    -moz-border-bottom-left-radius: 14px;
    border-bottom-left-radius: 14px;
    -webkit-border-bottom-right-radius: 14px;
    -moz-border-bottom-right-radius: 14px;
    border-bottom-right-radius: 14px;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.post-filter-tabs>.content-navigation>.content-nav-holder .content-nav-header>.content-nav-header-option {
    position: relative;
    padding: 11px 14px;
    font-size: 12px;
    min-width: 112px;
    text-align: center;
    line-height: 18px;
    background-color: #f5f5f5;
    color: #222;
    cursor: pointer;
    visibility: visible;
    border-color: #ff943247;
    border-style: solid;
    border-width: 1px;
    -webkit-transition: background-color .15s linear, color .15s linear;
    -moz-transition: background-color .15s linear, color .15s linear;
    -ms-transition: background-color .15s linear, color .15s linear;
    -o-transition: background-color .15s linear, color .15s linear;
    transition: background-color .15s linear, color .15s linear;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.post-filter-tabs>.content-navigation>.content-nav-holder .content-nav-header>.content-nav-header-option:last-child {
    -webkit-border-bottom-left-radius: 14px;
    -moz-border-bottom-left-radius: 14px;
    border-bottom-left-radius: 14px;
    -webkit-border-bottom-right-radius: 14px;
    -moz-border-bottom-right-radius: 14px;
    border-bottom-right-radius: 14px;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.post-filter-tabs>.content-navigation>.content-nav-holder .content-nav-header>.content-nav-header-option:hover {
    color: #222;
    border-style: solid;
    border-width: 1px;
    border-color: #ff9432;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.post-filter-tabs>.content-navigation>.content-nav-holder .content-nav-header>.content-nav-header-option.active {
    display: none;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.post-filter-tabs>.content-navigation>.content-nav-holder .content-nav-header>.content-nav-header-option.hidden {
    display: none;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .discussion-space {
    margin-top: 30px;
    padding: 0;
    background-color: inherit;
    min-height: auto;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .discussion-space>.main-content {
    margin-bottom: 30px;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .discussion-space.pinned .post {
    background-color: #fff;
    border-color: #a9a9a930;
    border-width: 1px;
    border-style: solid;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .discussion-space.member .post,
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .discussion-space.partner .post,
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .discussion-space.user .post {
    background-color: #fff;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content {
    margin-bottom: 30px;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.main-footer {
    position: relative;
    display: flex;
    flex-basis: 12%;
    flex-direction: row;
    justify-content: end;
    align-items: end;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content>.main-footer>.footer-buttons-list {
    position: relative;
    display: flex;
    margin-top: 20px;
}

.social-wrapper .likes {
    position: relative;
    align-self: center;
}
.social-wrapper .fit-like {
    width: 25px;
    height: 25px;
    cursor: pointer;
}
.social-wrapper .fit-like.active {
    -webkit-animation: pulse 1s .1s ease 1;
    animation: pulse 1s .1s ease 1;
}
.social-wrapper .fit-like.active .fill {
    height: 0px;
}
.social-wrapper .fit-like .fill {
    display: block;
    position: absolute;
    left: 1px;
    top: -4px;
    width: 25px;
    height: 25px;
    z-index: 3;
    overflow: hidden;
    -webkit-transition: height .3s ease-in-out;
    -moz-transition: height .3s ease-in-out;
    -o-transition: height .3s ease-in-out;
    -ms-transition: height .3s ease-in-out;
    transition: height .3s ease-in-out;
}
.social-wrapper .fit-like .fill:before, .fit-like .fill:after {
    content:"";
    position: absolute;
    background: #ffe5cc;
    left: 10px;
    top: 6px;
    width: 11px;
    height: 16px;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 85px 60px 0 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}
.social-wrapper .fit-like .fill:after {
    left: 0px;
    -webkit-transform: rotate(45deg);
    border-radius: 45px 60px 0 0;
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}
.social-wrapper .fit-like .outline {
    position: relative;
    margin-left: 1px;
}
.social-wrapper .fit-like .outline:before, .fit-like .outline:after {
    position: absolute;
    content:"";
    left: 10px;
    top: 1px;
    width: 13px;
    height: 18px;
    background: #ff9432;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 85px 60px 0 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}
.social-wrapper .fit-like .outline:after {
    left: -2px;
    -webkit-transform: rotate(45deg);
    border-radius: 45px 60px 0 0;
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}
.social-wrapper .likes:not(.active):hover .fill {
    height:0px;
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content.filter {
    background-color: transparent;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content.filter>.post-filter-tabs>.content-navigation {
    align-content: flex-start;
    align-items: flex-start;
    margin-top: 40px;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content.filter>.post-filter-tabs.new-posts-notif-wrapper {
    display: flex;
    flex-direction: row;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content.filter>.post-filter-tabs .new-posts-notif {
    justify-content: flex-end;
    margin-top: 40px;
    position: relative;
    padding: 11px 14px;
    font-size: 12px;
    min-width: 112px;
    text-align: center;
    line-height: 18px;
    color: #fff;
    background-color: #ff9432;
    cursor: pointer;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    border-color: #ff943247;
    border-style: solid;
    border-width: 1px;
    -webkit-transition: background-color .15s linear, color .15s linear;
    -moz-transition: background-color .15s linear, color .15s linear;
    -ms-transition: background-color .15s linear, color .15s linear;
    -o-transition: background-color .15s linear, color .15s linear;
    transition: background-color .15s linear, color .15s linear;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content.filter>.post-filter-tabs .new-posts-notif:hover {
    background-color: #2e358f;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content.filter>.post-filter-tabs .new-posts-notif[data-count=""],
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content.filter>.post-filter-tabs .new-posts-notif[data-count="0"] {
    display: none;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>#dashboard-scroll-main-content {
    position: relative;
}

#optasy-dashboard #dashboard-holder #dashboard-content #feed-create-wrapper {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    padding: 12px 12px;
    background-color: #e8eaf6;
    -webkit-transition: background-color .15s linear;
    -moz-transition: background-color .15s linear;
    -ms-transition: background-color .15s linear;
    -o-transition: background-color .15s linear;
    transition: background-color .15s linear;
    margin-top: 20px;
    cursor: pointer;
}

#optasy-dashboard #dashboard-holder #dashboard-content #feed-create-wrapper .icon-feed {
    position: relative;
    display: flex;
}

#optasy-dashboard #dashboard-holder #dashboard-content #feed-create-wrapper .title-feed {
    position: relative;
    display: flex;
    margin-left: 10px;
    font-size: 14px;
    -webkit-transition: color .15s linear;
    -moz-transition: color .15s linear;
    -ms-transition: color .15s linear;
    -o-transition: color .15s linear;
    transition: color .15s linear;
}

#optasy-dashboard #dashboard-holder #dashboard-content #feed-create-wrapper:hover {
    background-color: #2e358f;
}

#optasy-dashboard #dashboard-holder #dashboard-content #feed-create-wrapper:hover .title-feed {
    color: #fff;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-sidebar-wrapper {
    position: relative;
    display: flex;
    width: 14%;
    min-width: 420px;
    padding: 17px;
    vertical-align: top;
    justify-content: start;
    min-height: 900px;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-sidebar-wrapper[data-user=administrator] {
    min-height: auto;
    height: 90vh;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-sidebar-wrapper>#dashboard-main-sidebar {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 400px;
    background-color: transparent;
    height: 520px;
    overflow: hidden;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-sidebar-wrapper>#dashboard-main-sidebar #advertise-widget {
    position: relative;
    display: flex;
    background-color: #222;
    background-image: url("../../../../../assets/images/default-ad.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 400px;
    height: 400px;
    -webkit-border-radius: 0 0 14px 14px;
    -moz-border-radius: 0 0 14px 14px;
    border-radius: 0 0 14px 14px;
}

#optasy-dashboard .main-content[data-content-type=discussion] .ad-widget-discussion {
    position: relative;
    display: block;
    margin: 20px 0;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}
#optasy-dashboard .main-content[data-content-type=discussion] .ad-widget-discussion > .ad-widget {
    width: 100%;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    overflow: hidden;
}
#optasy-dashboard .main-content[data-content-type=discussion] .ad-widget-discussion .close-ad {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 25px;
    height: 25px;
    font-size: 16px;
    color: #2e358f;
    text-align: center;
    line-height: 25px;
    background-color: #fff;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, .5);
    font-weight: 700;
    cursor: pointer;
    z-index: 10;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: color .15s linear, background-color .15s linear;
    -moz-transition: color .15s linear, background-color .15s linear;
    -ms-transition: color .15s linear, background-color .15s linear;
    -o-transition: color .15s linear, background-color .15s linear;
    transition: color .15s linear, background-color .15s linear;
}

#optasy-dashboard .main-content[data-content-type=advertise] .section-options {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 20px 0 10px 0;
    gap: 20px;
}
#optasy-dashboard .ad-widget-discussion {
    width: 100%;
}
#optasy-dashboard #advertise-widget-device-preview {
    display: flex;
    height: 178px;
    background-color: #222;
    background-image: url(../fit5-40-5/assets/images/mobileAdDefault.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    -webkit-transition: border-color .15s linear;
    -moz-transition: border-color .15s linear;
    -ms-transition: border-color .15s linear;
    -o-transition: border-color .15s linear;
    transition: border-color .15s linear;
}

#optasy-dashboard .user-settings {
    position: relative;
    display: flex;
    flex-basis: 50%;
    flex-direction: column;
    height: 380px;
}

#optasy-dashboard .user-settings #side-settings-list-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
}

#optasy-dashboard .user-settings[data-user=administrator] {
    height: 100%;
    flex-basis: 100%;
}

#optasy-dashboard .user-settings[data-user=administrator] #side-settings-list-wrapper {
    padding-bottom: 60px;
    height: 100%;
}

#optasy-dashboard .user-settings .mCSB_inside>.mCSB_container {
    margin-left: 0px;
}

#optasy-dashboard .user-settings .user-settings-title {
    position: relative;
    padding: 20px;
    display: flex;
    flex-direction: column;
    background-color: #fff;
}

#optasy-dashboard .user-settings .user-settings-title>.settings-title {
    color: #101010;
    font-size: 15px;
    font-weight: 700;
}

#optasy-dashboard .user-settings .user-settings-title>.settings-subtitle {
    color: #757575;
    font-size: 12px;
    margin-top: 5px;
}

#optasy-dashboard .user-settings .settings-option {
    position: relative;
    font-size: 13px;
    font-weight: 600;
    color: #757575;
    padding: 14px 20px;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    margin-bottom: 1px;
    -webkit-transition: background-color .15s linear, color .15s linear;
    -moz-transition: background-color .15s linear, color .15s linear;
    -ms-transition: background-color .15s linear, color .15s linear;
    -o-transition: background-color .15s linear, color .15s linear;
    transition: background-color .15s linear, color .15s linear;
}

#optasy-dashboard .user-settings .settings-option:last-child {
    margin-bottom: 0;
}

#optasy-dashboard .user-settings .settings-option svg circle,
#optasy-dashboard .user-settings .settings-option svg path {
    -webkit-transition: stroke .15s linear, fill .15s linear;
    -moz-transition: stroke .15s linear, fill .15s linear;
    -ms-transition: stroke .15s linear, fill .15s linear;
    -o-transition: stroke .15s linear, fill .15s linear;
    transition: stroke .15s linear, fill .15s linear;
}

#optasy-dashboard .user-settings .settings-option:hover,
#optasy-dashboard .user-settings .settings-option.active {
    background-color: #e8eaf6;
    color: #2e358f;
}

#optasy-dashboard .user-settings .settings-option:hover svg circle,
#optasy-dashboard .user-settings .settings-option.active svg circle {
    stroke: #2e358f;
    fill: #2e358f;
}

#optasy-dashboard .user-settings .settings-option:hover svg path,
#optasy-dashboard .user-settings .settings-option.active svg path {
    fill: #fff;
}

#optasy-dashboard .user-settings .settings-option .settings-icon {
    position: relative;
    display: flex;
}

#optasy-dashboard .user-settings .settings-option .settings-label {
    position: relative;
    margin-left: 20px;
    display: flex;
}

#optasy-dashboard :is(div:not(.no-hover):hover, [data-open=true]) > .list-more-options {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    pointer-events: auto;
    cursor: pointer;
    right: 0;
}
#optasy-dashboard .list-more-options {
    position: absolute;
    z-index: 900;
    background-color: #e8eaf6;
    border-radius: 4px;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, .45);
    opacity: 0;
    transform: translate(0, 15px) scale(0.95);
    transition: transform .1s ease-out, opacity .1s ease-out;
    pointer-events: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 200px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}
#optasy-dashboard .list-more-options .more-option-button {
    position: relative;
    padding: 8px 8px;
    font-size: 14px;
    color: #2e358f;
    background-color: #e8eaf6;
    -webkit-transition: background-color .3s linear, color .3s linear;
    -moz-transition: background-color .3s linear, color .3s linear;
    -ms-transition: background-color .3s linear, color .3s linear;
    -o-transition: background-color .3s linear, color .3s linear;
    transition: background-color .3s linear, color .3s linear;
}
#optasy-dashboard .list-more-options .more-option-button.disabled {
    opacity: .2;
    cursor: not-allowed;
}
#optasy-dashboard .list-more-options .more-option-button:not(.disabled):hover {
    background-color: #ff9432;
    color: #fff;
}

#optasy-dashboard #fit_notification_system {
    position: fixed;
    top: 0px;
    left: 0;
    width: 100vw;
    height: 0;
    z-index: 230;
}

#optasy-dashboard #fit_notification_system .fit_notification-wrapper {
    position: relative;
    height: 0;
}

#optasy-dashboard #fit_notification_system .fit_notification-wrapper .fit_notification_message {
    font-size: 14px;
    color: #2e358f;
    padding: 24px;
    left: 50%;
    margin-left: -150px;
    display: flex;
    position: relative;
    width: 360px;
    min-height: 100px;
    background-color: #fff;
    box-shadow: 0px 0px 14px rgba(0, 0, 0, .2);
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    top: -400px;
    align-items: center;
}
#optasy-dashboard #fit_notification_system .fit_notification-wrapper .fit_notification_message.custom_fit_button:hover {
    cursor: pointer;
}

#optasy-dashboard #fit_notification_system .fit_notification-wrapper .fit_notification_message .notification-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
}

#optasy-dashboard #fit_notification_system .fit_notification-wrapper .fit_notification_message .notification-wrapper .notification-title {
    position: relative;
    font-size: 16px;
    font-weight: 500;
    display: none;
}

#optasy-dashboard #fit_notification_system .fit_notification-wrapper .fit_notification_message .notification-wrapper .notification-message {
    position: relative;
    font-size: 13px;
    font-weight: 300;
}

#optasy-dashboard #fit_notification_system .fit_notification-wrapper .fit_notification_message .notification-wrapper .notification-message .list {
    margin-top: 20px;
    list-style: unset;
}
#optasy-dashboard #fit_notification_system .fit_notification-wrapper .fit_notification_message .notification-wrapper .notification-message .list > li {
    padding-left: 5px;
    font-size: 12px;
    font-weight: 400;
}
#optasy-dashboard #fit_notification_system .fit_notification-wrapper .fit_notification_message .notification-wrapper .notification-message .list > li:not(:first-child) {
    margin-top: 5px;
}

#optasy-dashboard #fit_notification_system .fit_notification-wrapper .fit_notification_message .notification-dismiss {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    -webkit-transition: color .18s linear;
    -moz-transition: color .18s linear;
    -ms-transition: color .18s linear;
    -o-transition: color .18s linear;
    transition: color .18s linear;
    color: #2e358f;
}

#optasy-dashboard #fit_notification_system .fit_notification-wrapper .fit_notification_message .notification-dismiss:hover {
    color: #ff9432;
}
/* NOTE: Chrome bug - the transform is to force Chrome to repaint the element since display: block wasn't sufficient in certain cases. */
#optasy-dashboard #fit_notification_system .fit_notification-wrapper .fit_notification_message[data-type="error"] .error {
    display: block;
    color: #991818;
    transform: translateZ(0);
}

#optasy-dashboard #fit_notification_system .fit_notification-wrapper .fit_notification_message[data-type="error"] .notification-message {
    color: #991818;
}
/* NOTE: Chrome bug - the transform is to force Chrome to repaint the element since display: block wasn't sufficient in certain cases. */
#optasy-dashboard #fit_notification_system .fit_notification-wrapper .fit_notification_message[data-type="success"] .success {
    display: block;
    color: #389918;
    transform: translateZ(0);
}
/* NOTE: Chrome bug - the transform is to force Chrome to repaint the element since display: block wasn't sufficient in certain cases. */
#optasy-dashboard #fit_notification_system .fit_notification-wrapper .fit_notification_message[data-type="alert"] .alert {
    display: block;
    color: #dbd10a;
    transform: translateZ(0);
}

#optasy-dashboard html,
#optasy-dashboard body {
    height: 100%;
}

#optasy-dashboard .loaded-content-go-back {
    align-self: flex-end;
}

#optasy-dashboard .fit-photo-upload {
    position: relative;
    display: flex;
    flex-direction: column;
}

#optasy-dashboard .fit-photo-upload .photo-thumb {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: #ffa07a;
    border: 4px solid #d3d3d3;
}

#optasy-dashboard .fit-photo-upload .photo-thumb .photo-remove {
    position: absolute;
    top: -12px;
    right: -12px;
    background-color: #fff;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    cursor: pointer;
    -webkit-transition: color .18s linear;
    -moz-transition: color .18s linear;
    -ms-transition: color .18s linear;
    -o-transition: color .18s linear;
    transition: color .18s linear;
    color: #2e358f;
}

#optasy-dashboard .fit-photo-upload .photo-thumb .photo-remove:hover {
    color: #ff9432;
}

#optasy-dashboard .fit-photo-upload .fit-button {
    margin-top: 20px;
    margin-left: 0px;
}

#optasy-dashboard .list-col-all-options {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 200px;
    height: 80px;
    border-radius: 14px;
    background-color: #fff;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, .2);
    padding: 10px 0;
}

#optasy-dashboard .list-col-all-options>div {
    width: 100%;
    height: 30px;
}

#optasy-dashboard .list-col.more-list {
    z-index: 2;
}

#optasy-dashboard body {
    background-color: #f6f9f2;
}

#optasy-dashboard .achievements-wrapper {
    position: relative;
    display: flex;
    margin-top: 20px;
}

#optasy-dashboard .achievements-wrapper .achievement {
    position: relative;
    display: flex;
    align-items: center;
    flex-basis: 33%;
}

#optasy-dashboard .achievements-wrapper .achievement:first-child {
    margin-left: 0;
}

#optasy-dashboard .achievements-wrapper .achievement span.img.active {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

#optasy-dashboard .achievements-wrapper .achievement span.img {
    width: 142px;
    height: 142px;
    background-size: cover;
    display: block;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

#optasy-dashboard .achievements-wrapper .achievement span.the1 {
    background-image: url("../images/achievements/achievement_icon01.png");
}

#optasy-dashboard .achievements-wrapper .achievement span.the2 {
    background-image: url("../images/achievements/achievement_icon02.png");
}

#optasy-dashboard .achievements-wrapper .achievement span.the3 {
    background-image: url("../images/achievements/achievement_icon03.png");
}

#optasy-dashboard .achievements-wrapper .achievement span.label {
    font-size: 13px;
    font-weight: 700;
    color: #2e358f;
}

#optasy-dashboard .partner-info-wrapper {
    position: relative;
    display: flex;
    margin-top: 20px;
    flex-direction: column;
}

#optasy-dashboard .partner-info-wrapper .info {
    position: relative;
    display: flex;
    align-items: center;
    flex-basis: 100%;
}

#optasy-dashboard .partner-info-wrapper .info:first-child {
    margin-left: 0;
}

#optasy-dashboard .partner-info-wrapper .info:not(:first-child) {
    margin-top: 20px;
}

#optasy-dashboard .partner-info-wrapper .info .partner-profile-img {
    width: 200px;
    height: 200px;
    background-color: #fff;
    object-fit: cover;
    object-position: center;
    border: 10px solid #fff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

#optasy-dashboard .partner-info-wrapper .info span.label {
    font-size: 13px;
    font-weight: 700;
}

#optasy-dashboard .partner-info-wrapper .info span.label span {
    color: #2e358f;
}

#optasy-dashboard .feed-add-post {
    position: relative;
    margin-top: 30px;
    display: flex;
    align-items: center;
}
#optasy-dashboard .feed-add-post .add-post-controls {
    position: relative;
    margin-left: 30px;
    display: flex;
}
#optasy-dashboard .feed-add-post>.section-options {
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
}
#optasy-dashboard .feed-add-post>.section-options .section-option {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}
#optasy-dashboard .feed-add-post>.section-options .section-option:first-child {
    margin-top: 0;
}
#optasy-dashboard .feed-add-post>.section-options .options-holder {
    position: relative;
    display: flex;
}
#optasy-dashboard .feed-add-post>.section-options .options-holder .option {
    position: relative;
}
#optasy-dashboard .feed-add-post>.section-options input:not([type=checkbox]) {
    position: relative;
    min-width: 300px;
    border: 1px solid #c4c4c4;
    padding: 16px 20px;
    font-size: 12px;
    font-weight: normal;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}
#optasy-dashboard .feed-add-post>.section-options input:not([type=checkbox]).search {
    position: absolute;
}
#optasy-dashboard .feed-add-post>.section-options textarea {
    position: relative;
    border: 1px solid #c4c4c4;
    padding: 16px 20px;
    font-size: 12px;
    font-weight: normal;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}
#optasy-dashboard .feed-add-post>.section-options select {
    position: relative;
}
#optasy-dashboard .feed-add-post>.section-options .section-option>.option-label {
    position: relative;
}
#optasy-dashboard .feed-add-post>.section-options .section-option>.options-holder {
    position: relative;
    display: flex;
}
#optasy-dashboard .feed-add-post>.section-options .section-option>.options-holder>.option {
    position: relative;
    display: flex;
}

#optasy-dashboard .type-content {
    position: relative;
    padding: 0 20px 20px 20px;
    &.hidden {
        display: none;
    }
}
#optasy-dashboard .type-content>.content-section {
    position: relative;
}

.members-list.hidden {
    display: none;
}

#optasy-dashboard .section-title {
    position: relative;
    margin: 15px 0 0 0;
    padding: 10px;
    color: var(--fit-blue);
    background-color: #edf0ff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 14px;
}
#optasy-dashboard .main-content[data-content-type=members-list] .type-content:first-child {
    padding: 20px;
}

#optasy-dashboard .content-section .section-options {
    position: relative;
    margin-top: 20px;
    padding: 10px 0;
}
#optasy-dashboard .section-options .section-option {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-content: flex-start;
    flex-wrap: wrap;
    margin-top: 20px;
}
#optasy-dashboard .type-content>.content-section>.section-options > .section-option:first-child {
    margin-top: 0;
}
#optasy-dashboard .type-content>.content-section>.section-options .options-holder {
    position: relative;
    display: flex;
    flex-grow: 1;
    width: 100%;
}
#optasy-dashboard .type-content>.content-section>.section-options .options-holder .option {
    margin-left: 20px;
}
#optasy-dashboard .type-content>.content-section>.section-options .options-holder .option:first-child {
    margin-left: 0;
}
#optasy-dashboard .type-content>.content-section>.section-options .options-holder .option.calendar-option {
    margin-top: 20px;
}
#optasy-dashboard .type-content>.content-section>.section-options>.options-level-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
}
#optasy-dashboard .type-content>.content-section>.section-options>.options-level-wrapper>.options-level-header-wrapper>.options-level-header {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(137px, 1fr));
    flex-grow: 1;
    margin-top: 20px;
    padding: 10px;
    &:has(> .options-level:only-child) {
        display: none;
    }
}
#optasy-dashboard .type-content>.content-section>.section-options>.options-level-wrapper>.options-level-header-wrapper>.options-level-header>.options-level {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    text-align: center;
    color: #2e358f;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid #abb8c3;
    -webkit-transition: color .15s linear;
    -moz-transition: color .15s linear;
    -ms-transition: color .15s linear;
    -o-transition: color .15s linear;
    transition: color .15s linear;
    &:first-child {
        border-radius: 8px 0 0 8px;
    }
    &:last-child {
        border-radius: 0 8px 8px 0;
    }
    &.duplicate {
        .copying-indicator {
            display: flex;
        }
    }
    &.active .title {
        color: #FF9432;
    }
    .title {
        display: flex;
        flex-grow: 1;
        font-weight: 700;
        &:hover {
            color: #FF9432;
        }
    }
    .options-level-elipsis {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: 25px;
        min-width: unset;
        padding: 0;
        background-color: unset;
        border-radius: 5px 0 0 5px;
        cursor: pointer;
        span {
            margin-left: 10px;
        }
        &:hover {
            color: #FF9432;
        }
    }
    .copying-indicator {
        position: absolute;
        left: 50%;
        bottom: -2px;
        display: none;
        padding: 3px 8px;
        background-color: #2E358F;
        color: #ffffff;
        font-size: 10px;
        border-radius: 8px;
        transform: translateX(-50%);
    }
}
#optasy-dashboard .type-content>.content-section>.section-options>.options-level-wrapper>.options-level-header-wrapper>.options-level-header>.options-level:first-child {
    margin-left: 0;
}
#optasy-dashboard .type-content>.content-section>.section-options>.options-level-wrapper>.options-level-header-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
#optasy-dashboard .type-content>.content-section>.section-options>.options-level-wrapper>.options-level-content {
    position: relative;
    display: none;
}
#optasy-dashboard .type-content>.content-section>.section-options>.options-level-wrapper>.options-level-content.active {
    display: block;
    margin-top: 10px;
}
#optasy-dashboard .type-content>.content-section .section-options input:not([type=checkbox]) {
    position: relative;
    min-width: 300px;
    border: 1px solid #c4c4c4;
    padding: 16px 20px;
    font-size: 12px;
    font-weight: normal;
    line-height: 12px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}
#optasy-dashboard .type-content>.content-section .section-options .two-column-options input[type=radio],
#optasy-dashboard .type-content>.content-section .section-options input[type=radio] {
    min-width: unset;
    width: unset;
    padding: unset;
}
#optasy-dashboard .section-options input:not([type=checkbox]).search {
    position: absolute;
    padding: inherit;
    font-size: inherit;
    min-width: inherit;
}
#optasy-dashboard .type-content>.content-section .section-options input[type=number] {
    min-width: auto;
    width: 80px;
    appearance: textfield;
    -moz-appearance: textfield;
    padding: 12px 12px;
    font-size: 16px;
}
#optasy-dashboard .type-content>.content-section .section-options input[type=number]::-webkit-inner-spin-button,
#optasy-dashboard .type-content>.content-section .section-options input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

#optasy-dashboard .section-options textarea {
    position: relative;
    border: 1px solid #c4c4c4;
    padding: 16px 20px;
    font-size: 12px;
    font-weight: normal;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}
#optasy-dashboard .type-content>.content-section>.section-options select {
    position: relative;
}
#optasy-dashboard .type-content>.content-section>.section-options .two-column-options.show_hidden_field_parent .section-option:not(.show_hidden_field) {
    gap: 38px;
}
#optasy-dashboard .type-content>.content-section>.section-options .section-option.show_hidden_field {
    gap: 10px;
}
#optasy-dashboard .type-content>.content-section>.section-options .section-option>.option-label {
    position: relative;
    margin-left: 5px;
    font-size: 12px;
    font-weight: 700;
    color: #2e358f;
}
#optasy-dashboard .type-content>.content-section>.section-options .section-option > .options-holder.hidden-fields {
    flex-direction: column;
}
#optasy-dashboard .type-content>.content-section>.section-options .section-option > .options-holder.hidden-fields .option {
    margin-left: 0;
    overflow: hidden;
}
#optasy-dashboard .type-content>.content-section>.section-options .section-option>.options-holder.column {
    flex-direction: column;
}
#optasy-dashboard .type-content>.content-section>.section-options .section-option>.options-holder.column .option {
    margin-left: 0px;
    margin-top: 20px;
}
#optasy-dashboard .type-content>.content-section>.section-options .section-option>.options-holder>.option {
    position: relative;
    display: flex;
    width: 100%;
}
#optasy-dashboard .type-content>.content-section>.section-options .section-option>.options-holder>.option[data-id=radio_selected] {
    gap: 10px;
    align-items: center;
    font-size: 12px;
    cursor: pointer;
}
#optasy-dashboard .type-content>.content-section>.section-options .section-option>.options-holder>.option[data-id=radio_selected] :where(input, label, .label) {
    cursor: pointer;
}
#optasy-dashboard .type-content>.content-section>.section-options .section-option>.options-holder>.option.row {
    display: block;
}
#optasy-dashboard .type-content>.content-section>.section-options .section-option>.options-holder .select-box {
    position: relative;
    display: block;
    width: 100%;
    margin-left: 20px;
    font-size: 14px;
    font-weight: 500;
    color: #2e358f;
    border: 1px solid #2e358f;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    z-index: 4;
    height: 52px;
}
#optasy-dashboard .type-content>.content-section>.section-options .section-option>.options-holder .select-box__current {
    position: relative;
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, .1);
    cursor: pointer;
    outline: none;
    height: 100%;
}
#optasy-dashboard .type-content>.content-section>.section-options .section-option>.options-holder .select-box__current:focus+.select-box__list {
    opacity: 1;
    animation-name: none;
}
#optasy-dashboard .type-content>.content-section>.section-options .section-option>.options-holder .select-box__current:focus+.select-box__list .select-box__option {
    cursor: pointer;
}
#optasy-dashboard .type-content>.content-section>.section-options .section-option>.options-holder .select-box__current:focus .select-box__icon {
    transform: translateY(-50%) rotate(180deg);
}
#optasy-dashboard .type-content>.content-section>.section-options .section-option>.options-holder .select-box__icon {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    transition: .2s ease;
}
#optasy-dashboard .type-content>.content-section>.section-options .section-option>.options-holder .select-box__icon svg {
    position: relative;
    width: 20px;
    height: 20px;
}
#optasy-dashboard .type-content>.content-section>.section-options .section-option>.options-holder .select-box__icon svg path {
    stroke: #2e358f;
    fill: #2e358f;
}
#optasy-dashboard .type-content>.content-section>.section-options .section-option>.options-holder .select-box__value {
    display: flex;
}
#optasy-dashboard .type-content>.content-section>.section-options .section-option>.options-holder .select-box__input {
    display: none;
}
#optasy-dashboard .type-content>.content-section>.section-options .section-option>.options-holder .select-box__input:checked+.select-box__input-text {
    display: block;
}
#optasy-dashboard .type-content>.content-section>.section-options .section-option>.options-holder .select-box__input-text {
    display: none;
    width: 100%;
    margin: 0;
    height: 50px;
    line-height: 50px;
    padding-left: 20px;
}
#optasy-dashboard .type-content>.content-section>.section-options .section-option>.options-holder .select-box__list {
    position: absolute;
    width: 100%;
    padding: 0;
    list-style: none;
    opacity: 0;
    animation-name: HideList;
    animation-duration: .5s;
    animation-delay: .5s;
    animation-fill-mode: forwards;
    animation-timing-function: step-start;
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, .1);
}
#optasy-dashboard .type-content>.content-section>.section-options .section-option>.options-holder .select-box__option {
    display: block;
    padding: 15px;
    background-color: #fff;
}
#optasy-dashboard .type-content>.content-section>.section-options .section-option>.options-holder .select-box__option:hover,
#optasy-dashboard .type-content>.content-section>.section-options .section-option>.options-holder .select-box__option:focus {
    background-color: #edf0ff;
}

@keyframes HideList {
    from {
        transform: scaleY(1);
    }
    to {
        transform: scaleY(0);
    }
}

.fit-upload-wrapper.empty-error .fit-upload {
    color: red;
    border-color: red;
}
.fit-upload-wrapper .fit-upload  .drag-label {
    display: none;
}
.fit-upload-wrapper.dragging .fit-upload,
.fit-upload-wrapper.wait .fit-upload {
    background-color: #f3f3f3;
}
.fit-upload-wrapper.dragging .fit-upload .drag-label,
.fit-upload-wrapper.wait .fit-upload .drag-label {
    display: flex;
    font-size: 40px;
    font-weight: 300;
}
.fit-upload-wrapper.dragging .fit-upload .upload-label,
.fit-upload-wrapper.wait .fit-upload .upload-label {
    display: none;
}
.fit-upload-wrapper .fit-empty-error {
    color: red;
    font-size: 12px;
}
.fit-upload-wrapper .fit-upload-list {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}
.fit-upload-wrapper .fit-upload-list.empty {
    display: none;
    margin-top: 0;
}
.fit-upload-wrapper .fit-upload-list .file {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    flex-grow: 1;
    gap: 5px;
    flex-wrap: wrap;
    min-width: 90px;
}
.fit-upload-wrapper .fit-upload-list .file.error {
    color: red;
}
.fit-upload-wrapper .fit-upload-list .file .tag-thumbnail {
    position: relative;
    width: 80px;
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}
.fit-upload-wrapper .fit-upload-list .file .tag-delete {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 24px;
    height: 24px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    line-height: 24px;
    background-color: #2e358f;
    font-weight: 700;
    cursor: pointer;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: color .15s linear, background-color .15s linear;
    -moz-transition: color .15s linear, background-color .15s linear;
    -ms-transition: color .15s linear, background-color .15s linear;
    -o-transition: color .15s linear, background-color .15s linear;
    transition: color .15s linear, background-color .15s linear;
}

.fit-upload-wrapper .fit-upload-list .file .tag-delete:hover,
.fit-upload-wrapper .fit-upload-list .file .tag-delete.active {
    background-color: #ff9432;
    color: #fff;
}
.fit-upload-wrapper .fit-upload-list .file .tag-thumbnail .tag-size {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 12px;
    background-color: #edf0ffc4;
    padding: 2px 7px;
    -webkit-border-radius: 14px 0 14px 0;
    -moz-border-radius: 14px 0 14px 0;
    border-radius: 14px 0 14px 0;
}
.fit-upload-wrapper .fit-upload-list .file .tag-label {
    position: relative;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    max-width: 85px;
    padding: unset;
    text-align: center;
    background-color: unset;
    color: unset;
    font-size: 12px;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    &.custom_fit_button:hover {
        color: #ff9432;
    }
}
.fit-upload-wrapper .fit-upload-list .file .input-fields {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.fit-upload-wrapper .fit-upload-list .file .input-fields .title {
    background-color: #f3f3f3;
    border: 1px solid #c4c4c4;
}
.fit-upload-wrapper .fit-upload-list .file .input-fields .description {
    width: 100%;
    min-height: 60px;
    margin-top: 5px;
    padding: 20px;
    color: #000;
    background-color: #f3f3f3;
    white-space: pre-wrap;
    border: 1px solid #c4c4c4;
    border-radius: 14px;
    cursor: text;
}
.fit-upload-wrapper .fit-upload-list .file .tag-loader {
    position: relative;
    display: flex;
    justify-content: center;
    height: 20px;
}
.fit-upload-wrapper .fit-upload-list .file .tag-loader .loader {
    position: absolute;
    width: 85px;
    height: 8px;
    background-color: #e8eaf6;
    overflow: hidden;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}
.fit-upload-wrapper .fit-upload-list .file.resume .tag-loader .loader {
    visibility: hidden;
}
.fit-upload-wrapper .fit-upload-list .file .tag-loader .loader > .progress {
    position: absolute;
    width: 10%;
    height: 8px;
    background: repeating-linear-gradient(45deg, #ff9432 50%, #fff 60%, #ff9432 61%);
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    -webkit-transition: width .2s linear;
    -moz-transition: width .2s linear;
    -ms-transition: width .2s linear;
    -o-transition: width .2s linear;
    transition: width .2s linear;
}
.fit-upload-wrapper .fit-upload-list .file.error .tag-loader .loader > .progress {
    background: red;
}
:where(.fit-upload-wrapper, .wellness-viewer-wrapper) :where(.file, .viewer-item) .ft-icons-check-circle {
    position: absolute;
    display: flex;
    top: -6px;
    left: 50%;
    visibility: hidden;
}
:where(.fit-upload-wrapper, .wellness-viewer-wrapper) :where(.file, .viewer-item) .ft-icons-check-circle svg {
    width: 20px;
    height: 20px;
}
:where(.fit-upload-wrapper, .wellness-viewer-wrapper) :where(.file, .viewer-item) .ft-icons-check-circle svg .outer-background {
    fill: #2e358f;
    opacity: .6;
}
:where(.fit-upload-wrapper, .wellness-viewer-wrapper) :where(.file, .viewer-item) .ft-icons-check-circle svg .check {
    fill: #fff;
}
.fit-upload-wrapper .fit-upload-list .file .tag-loader .resume-btn {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 90px;
    font-size: 12px;
    color: #2e358f;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    -webkit-transition: background-color .15s linear, color .15s linear;
    -moz-transition: background-color .15s linear, color .15s linear;
    -ms-transition: background-color .15s linear, color .15s linear;
    -o-transition: background-color .15s linear, color .15s linear;
    transition: background-color .15s linear, color .15s linear;
    visibility: hidden;
}
.fit-upload-wrapper .fit-upload-list .file.resume .tag-loader .resume-btn {
    visibility: visible;
}
.fit-upload-wrapper .fit-upload-list .file .tag-loader .resume-btn:hover {
    color: #fff;
    background-color: #ff9432;
}
.fit-upload-wrapper .fit-upload-errors {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-wrap: wrap;
    margin: 20px 0;
}
.fit-upload-wrapper .fit-upload-errors .file-error {
    font-size: 12px;
    color: red;
}
.fit-upload-wrapper > .extra-html {
    display: none;
}

.fit-upload {
    position: relative;
    min-width: 200px;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px dashed #2e358f;
    color: #2e358f;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    cursor: pointer;
    padding: 12px;
    margin-bottom: 10px;
    -webkit-transition: border-color .15s linear, color .15s linear;
    -moz-transition: border-color .15s linear, color .15s linear;
    -ms-transition: border-color .15s linear, color .15s linear;
    -o-transition: border-color .15s linear, color .15s linear;
    transition: border-color .15s linear, color .15s linear;
}

.fit-upload:hover {
    border: 1px dashed #ff9432;
    color: #ff9432;
}

.fit-upload>span {
    position: relative;
    display: flex;
}

.fit-upload>span.upload-icon {
    align-content: center;
    font-size: 24px;
}

.fit-upload>span.upload-zone {
    position: relative;
}

.fit-upload>span.upload-description {
    font-size: 12px;
    margin-top: 5px;
}

.fit-upload .upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.fit-upload .upload-label .upload-icon {
    font-size: 24px;
}
.fit-upload .upload-label .upload-description {
    font-size: 12px;
    margin-top: 5px;
}

#optasy-dashboard .fit-button[data-id="partner_upload_file"] {
    margin-left: 0;
}

#optasy-dashboard .upload-file-list {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

#optasy-dashboard .upload-file-list>.file:not(:first-child) {
    margin-top: 16px;
}

#optasy-dashboard .upload-file-list>.file>.tag-delete {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 24px;
    height: 24px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    line-height: 24px;
    background-color: #2e358f;
    font-weight: 700;
    cursor: pointer;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: color .15s linear, background-color .15s linear;
    -moz-transition: color .15s linear, background-color .15s linear;
    -ms-transition: color .15s linear, background-color .15s linear;
    -o-transition: color .15s linear, background-color .15s linear;
    transition: color .15s linear, background-color .15s linear;
}

#optasy-dashboard .upload-file-list>.file>.tag-delete:hover,
#optasy-dashboard .upload-file-list>.file>.tag-delete.active {
    background-color: #ff9432;
    color: #fff;
}

.fit-browse {
    display: none;
}
.fit-browse-v2 {
    display: none;
}

#optasy-dashboard #user-all-files-list {
    position: relative;
    display: flex;
    flex-direction: column;
}

#optasy-dashboard #user-all-files-list .file-clone {
    display: none;
}

#optasy-dashboard #user-all-files-list .file {
    position: relative;
    padding: 10px 30px;
    background-color: #e8eaf6;
    max-width: 300px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}

#optasy-dashboard #user-all-files-list .file ~ .file {
    margin-top: 16px;
}

#optasy-dashboard #user-all-files-list .file>.tag-label {
    font-size: 12px;
    font-weight: 700;
    color: #2e358f;
}
#optasy-dashboard .main-content[data-content-type="user-uploads"] #user-all-files-list .file>.tag-label {
    color: #fff;
}

#optasy-dashboard #user-all-files-list .file>.tag-delete {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 24px;
    height: 24px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    line-height: 24px;
    background-color: #2e358f;
    font-weight: 700;
    cursor: pointer;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: color .15s linear, background-color .15s linear;
    -moz-transition: color .15s linear, background-color .15s linear;
    -ms-transition: color .15s linear, background-color .15s linear;
    -o-transition: color .15s linear, background-color .15s linear;
    transition: color .15s linear, background-color .15s linear;
}
#optasy-dashboard #user-all-files-list .file>.tag-delete:hover,
#optasy-dashboard #user-all-files-list .file>.tag-delete.active {
    background-color: #ff9432;
    color: #fff;
}

#optasy-dashboard :where(.select-wellness, .select2-wellness:not(select)) {
    max-width: 330px;
    min-width: 200px;
    border: 1px solid #c4c4c4;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    padding: 11px 14px;
    font-size: 14px;
}
#optasy-dashboard :where(.select-wellness, .select2-wellness:not(select)).dashboard {
    min-width: 200px;
    border-color: #ff9432;
}
#optasy-dashboard :where(.select-wellness, .select2-wellness:not(select)).dashboard.ui.selection.active.dropdown .menu {
    border-color: #ff9432;
}
#optasy-dashboard div:has(> .select2-wellness.full),
#optasy-dashboard .select2:has(.select2-wellness.full) {
    width: 100% !important;
}
#optasy-dashboard .select2.select2-container--open:has(.select2-wellness) .select2-wellness {
    -webkit-border-radius: 14px 14px 0 0;
    -moz-border-radius: 14px 14px 0 0;
    border-radius: 14px 14px 0 0;
}
#optasy-dashboard .select2.select2-container--open.select2-container--above:has(.select2-wellness) .select2-wellness {
    -webkit-border-radius: 0 0 14px 14px;
    -moz-border-radius: 0 0 14px 14px;
    border-radius: 0 0 14px 14px;
}
#optasy-dashboard .select2-wellness {
    display: flex;
    padding: unset;
    flex-wrap: wrap;
    &:before {
        display: none;
        content: "";
        position: absolute;
        top: 48%;
        right: 15px;
        border-top: 5px solid #4d4d4d;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
    }
    &.full {
        max-width: unset;
    }
    &.select2-selection {
        background-color: #f8f8f8;
    }
}

#optasy-dashboard {
    .select2-wellness-wrapper {
        &:has(.select2-container .select2-results__options > .select2-results__message) .select2-container .select-all-clear-btns {
            color: #a3a3a3;
            pointer-events: none;
        }
        &:has(.select2-container .select2-results__options > .select2-results__option) .select2-container .select2-wellness > .total-found {
            display: flex;
        }
        &:has(.select2-container .select2-results__options > .loading-results),
        &:has(.select2-container .select2-results__options > .select2-results__message) {
            .select2-container .select2-wellness > .total-found {
                display: none;
            }
        }
    }
    .select2-container {
        &:not(.select2-container--open) .select2-wellness > .select2-search textarea,
        .select2-wellness:has(> .select2-selection__rendered .select2-selection__choice) > .select2-search textarea {
            border-radius: 14px 0 0 14px;
        }
        .select2-wellness > .select-all-clear-btns {
            display: none;
        }
        &.select2-container--open {
            .select2-wellness {
                &:before {
                    border-top: 0;
                    border-bottom: 5px solid #4d4d4d;
                    border-left: 4px solid transparent;
                    border-right: 4px solid transparent;
                }
                &.single-selection {
                    > .select2-selection__rendered:has(.select2-selection__choice) {
                        width: unset;
                        margin: 0;
                        padding: 0;
                    }
                    > .select2-search textarea {
                        border-radius: 14px 0 0 0;
                    }
                }
                &.select-all {
                    > .select-all-clear-btns {
                        display: flex;
                        padding: 5px 5px 0 5px;
                        flex-basis: 100%;
                    }
                }
            }
        }
    }
    .select2-wellness {
        &:has(.select2-selection__rendered > .select2-selection__choice),
        &:has(.select2-selection__rendered > .selection-group) {
            > .select-all-clear-btns > .clear {
                color: #1e1e1e;
                cursor: pointer;
                &:hover {
                    color: var(--fit-orange);
                }
            }
        }
        &.single-selection {
            > .select2-selection__rendered {
                .select2-selection__choice > .select2-selection__choice__display {
                    cursor: text;
                }
            }
            > .select2-search .search-icon {
                max-height: unset;
            }
        }
        > .select2-selection__arrow {
            display: none;
        }
        > .select2-search {
            min-width: 200px;
            display: flex;
            align-items: center;
            flex-grow: 1;
            textarea {
                width: 100% !important;
                min-height: 37px;
                margin-top: unset;
                margin-left: 10px;
                padding: 10px;
                background-color: #fff;
                font-size: 14px;
                border: 1px solid #c5c5c5;
                border-radius: 14px 0 0 0;
            }
            .search-icon {
                width: 45px;
                height: 100%;
                max-height: 37px;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                margin-right: 10px;
                padding: 3px 10px;
                fill: #a3a3a3;
                background-color: #f3f3f3;
                border: 1px solid #c5c5c5;
                border-width: 1px 1px 1px 0;
                border-radius: 0 14px 14px 0;
            }
        }
        > .select2-selection__rendered {
            &:has(.select2-selection__choice) {
                margin: 5px 15px 5px 5px;
                padding: 0 5px;
            }
            width: unset;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            padding: 0;
            > .selection-group, .item {
                &.selection-group .counter {
                    color: var(--fit-blue);
                    border-color: var(--fit-blue);
                }
                .counter {
                    width: 20px;
                    height: 20px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-shrink: 0;
                    border: 1px solid #a3a3a3;
                    border-radius: 50%;
                }
            }
            .selection-group {
                position: relative;
                width: 100%;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                gap: 10px;
                margin-top: 10px;
                padding: 15px;
                border: 1px solid var(--fit-blue);
                border-radius: 14px;
                > .title {
                    position: absolute;
                    top: -10px;
                    left: 10px;
                    max-width: 100%;
                    display: flex;
                    gap: 5px;
                    padding: 0 5px;
                    font-weight: 700;
                    color: var(--fit-blue);
                    background-color: #f8f8f8;
                    span:not(.counter) {
                        max-width: 100%;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }
            .select2-selection__choice {
                margin: unset;
                padding: 0;
                padding-left: 20px;
                background-color: #e4e8f4;
                border-color: #b3b8c5;
                border-radius: 7px;
            }
        }
    }
}
#optasy-dashboard .select2-wellness.single-selection > .select2-selection__rendered:has(.select2-selection__choice) {
    width: 100%;
    margin-right: 33px;
    padding-right: 20px;
}
#optasy-dashboard .select2-wellness.single-selection > .select2-selection__rendered:has(.select2-selection__choice) .select2-selection__choice {
    width: 100%;
}
#optasy-dashboard .select2-container.select2-container--open .select2-wellness.single-selection > .select2-selection__rendered:has(.select2-selection__choice) .select2-selection__choice {
    display: none;
}
#optasy-dashboard .select2-wellness > .select2-selection__rendered .select2-selection__choice > button {
    width: auto;
    height: 100%;
    padding: 0;
    border-right: none;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}
#optasy-dashboard .select2-wellness.single-selection > .select2-selection__rendered .select2-selection__choice {
    padding-left: 0;
    > button {
        display: none;
    }
}
#optasy-dashboard .select2-wellness > .select2-selection__rendered .select2-selection__choice > button:hover {
    background-color: #d5dcf1;
}
#optasy-dashboard .select2-wellness > .select2-selection__rendered .select2-selection__choice > button > span {
    padding: 0 5px;
}
#optasy-dashboard .select2-wellness > .select2-selection__rendered .select2-selection__choice > .select2-selection__choice__display {
    display: flex;
    padding: 2px 5px 2px 2px;
}
#optasy-dashboard .select2-wellness > .select2-selection__rendered .select2-selection__choice > .select2-selection__choice__display:has(> .item:not([data-type=super]).custom_fit_button):hover {
    background-color: #d5dcf1;
}
#optasy-dashboard .select2-wellness > .select2-selection__rendered .select2-selection__choice > .select2-selection__choice__display .item .list-col-info {
    gap: 5px;
    padding: 0;
}
#optasy-dashboard .select2-wellness > .select2-selection__rendered .select2-selection__choice .item .profile-picture-wrapper > .user-thumb {
    width: 25px;
    height: 25px;
}
#optasy-dashboard :where(.challenge_type, .template_or_new, .wellness-viewer-dropdown, .choose-users) .select2-wellness > .select2-selection__rendered .select2-selection__choice .item .row:not(.title) {
    display: none;
}
#optasy-dashboard .select2.select2-container--open.select2-container--below .select2-wellness.viewer:has(> ul:empty) > .select2-search textarea {
    border-radius: 14px 0 0 0;
}
#optasy-dashboard .select2-wellness.single-selection > .select2-search {
    min-width: unset;
}
#optasy-dashboard .select2-container:not(.select2-container--open) .select2-wellness.single-selection:has(.select2-selection__rendered .select2-selection__choice) > .select2-search {
    textarea {
        display: none;
    }
    .search-icon {
        position: absolute;
        top: 0;
        right: 0;
    }
}
#optasy-dashboard .select2-container .select2-wellness:not(.single-selection):has(> ul:not(:empty)) > .select2-search {
    margin: 5px 0;
}
#optasy-dashboard :is(.select2-wellness:has(> ul:empty), .select2-wellness.single-selection) > .select2-search textarea {
    margin-left: unset; 
    border: unset; 
}
#optasy-dashboard :is(.select2-wellness:has(> ul:empty), .select2-wellness.single-selection) > .select2-search .search-icon {
    margin-right: unset; 
    border: unset; 
    border-width: unset;
}
#optasy-dashboard .select2-container.select2-container--open :is(.select2-wellness:has(> ul:empty), .select2-wellness.single-selection) > .select2-search .search-icon {
    border-radius: 0 14px 0 0;
}
#optasy-dashboard .select2.select2-container--open.select2-container--above:has(.select2-wellness) .select2-wellness > .select2-search textarea {
    -webkit-border-radius: 0 0 14px 14px;
    -moz-border-radius: 0 0 14px 14px;
    border-radius: 0 0 14px 14px;
}
#optasy-dashboard .select2-wellness > .total-selected {
    display: flex;
    flex-basis: 100%;
    margin: 5px;
    &[data-total="0"] {
        display: none;
    }
}
#optasy-dashboard .select2-wellness > .total-found {
    display: none;
    flex-basis: 100%;
    margin: 5px;
}
#optasy-dashboard .select2-container {
    .select2-dropdown {
        border-radius: 0 0 14px 14px;
        z-index: 10;
        overflow-y: hidden;
        &.select2-dropdown--above {
            border-radius: 14px 14px 0 0;
        }
        .select2-search > input {
            border-radius: 7px;
        }
        .select2-results {
            .select2-results__options {
                &:has(> .loading-results) > li:not(.loading-results) {
                    display: none;
                }
                > li {
                    &:not(.select2-results__message) {
                        position: relative;
                        padding: 0;
                    }
                    &.select2-results__option--selected:not(.select2-results__option--highlighted) {
                        background-color: #d5dcf1;
                    }
                    > .select2-results__options--nested {
                        padding-left: 20px;
                        .item {
                            .row.title {
                                font-size: 12px;
                                font-weight: unset;
                            }
                        }
                    }
                }
                .select2-results__group {
                    padding: 0;
                    > .item.group .row {
                        font-weight: 700;
                    }
                }
            }
            .select2-results__message {
                color: #939393;
            }
        }
    }
    .profile-main-loader-btn {
        background-color: rgb(231 232 255 / 61%);
    }
}
#optasy-dashboard .wellness-modules-dropdown {
    .select2-container {
        .select2-dropdown {
            z-index: 2;
        }
        .item {
            .list-col-info {
                .list-col.component {
                    flex-grow: unset;
                }
            }
        }
    }
}
#optasy-dashboard .select2-wellness > .select2-selection__rendered .select2-selection__choice .item,
#optasy-dashboard .select2-container .select2-dropdown .select2-results .item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    > .row.title {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results .item:not(:has(> .list-col-info)) {
    padding: 6px;
}
#optasy-dashboard .select2-wellness > .select2-selection__rendered .select2-selection__choice .item .user-thumb,
#optasy-dashboard .select2-container .select2-dropdown .select2-results .item .user-thumb {
    width: 45px;
    height: 45px;
    object-fit: cover;
    object-position: center;
    background-color: #fff;
    border: 1px solid #6e6e6e;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
#optasy-dashboard .select2-wellness > .select2-selection__rendered .select2-selection__choice .item .profile-picture-wrapper,
#optasy-dashboard .select2-container .select2-dropdown .select2-results .item .profile-picture-wrapper {
    display: flex;
}
#optasy-dashboard .select2-wellness > .select2-selection__rendered .select2-selection__choice .item .list-col-controls {
    display: none;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results ul li.select2-results__option--highlighted .item .user-thumb {
    border-color: #fff;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results .item .list-col-info {
    justify-content: center;
    flex-basis: 93%;
    column-gap: 20px;
    row-gap: 5px;
    flex-wrap: wrap;
    flex-grow: 1;
    padding: 10px;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results .item .list-col {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-basis: 70%;
}
#optasy-dashboard .select2-wellness > .select2-selection__rendered .select2-selection__choice .item .list-col.sort-number,
#optasy-dashboard .select2-container .select2-dropdown .select2-results .item .list-col.sort-number {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: #2e358f;
    border: 1px solid;
    border-radius: 50%;
}
#optasy-dashboard .select2-wellness > .select2-selection__rendered .select2-selection__choice .item .list-col.sort-number .row,
#optasy-dashboard .select2-container .select2-dropdown .select2-results .item .list-col.sort-number .row {
    font-weight: 700;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results .item .list-col.components {
    flex-basis: 20%;
    flex-grow: unset;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results .item .list-col.components > .row {
    display: flex;
    flex-direction: row;
    gap: 5px;
    flex-grow: 1;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results .item .list-col.component {
    flex-direction: unset;
    justify-content: space-between;
    align-items: center;
    flex-basis: unset;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results .item .list-col.component svg {
    width: 30px;
    height: 30px;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results .item .list-col.component svg path {
    fill: #ff9432;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results ul li:where(.select2-results__option--highlighted) .item .list-col.component svg path {
    fill: #fff;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results .item .row {
    font-size: 12px;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results .item .row.counter {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border: 1px solid #a3a3a3;
    border-radius: 50%;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results ul li.select2-results__option--highlighted .item .row.counter {
    border-color: var(--fit-white);
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results .item .row.title {
    font-size: 14px;
    font-weight: 700;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results .item .list-col-controls {
    flex-basis: 6%;
    align-items: flex-start;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results .item .list-col-controls .list-item-more-option {
    min-width: 35px;
    background-color: unset;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results ul li:where(.select2-results__option--highlighted, .select2-results__option--selected) .item .list-col-controls .list-item-more-option {
    color: #fff;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results ul::-webkit-scrollbar {
    background-clip: padding-box;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results ul::-webkit-scrollbar-track {
    margin-bottom: 10px;
    background: transparent;
    border-radius: 0;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results ul::-webkit-scrollbar-thumb {
    cursor: pointer;
    background: rgba(0,0,0,.25);
    border-radius: 5px;
    -webkit-transition: color .2s ease !important;
    transition: color .2 ease !important;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results ul::-webkit-scrollbar-thumb:hover {
    background: #555 !important;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results ul::-webkit-scrollbar-button {
    display: none;
}

#optasy-dashboard .delete-overlay {
    position: absolute;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
    height: 100%;
    background-color: #f5f7ff;
    box-shadow: 0px 0px 3px #2e358f;
    visibility: hidden;
    z-index: 2;
    cursor: default;
}
#optasy-dashboard .delete-overlay .delete-overlay-msg {
    font-size: 14px;
}
#optasy-dashboard .delete-overlay .delete-overlay-btns {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 20px;
    width: 100%;
}
#optasy-dashboard .custom_fit_button {
    cursor: pointer;
}
#optasy-dashboard .delete-overlay .delete-overlay-btns .cancel {
    color: #2e358f;
}
#optasy-dashboard .delete-overlay .delete-overlay-btns .cancel:hover {
    text-decoration: underline;
}

#optasy-dashboard .challenge_type_wrapper .challenge_type {
    overflow: hidden;
}
#optasy-dashboard .template_or_new_wrapper .template_or_new {
    overflow: hidden;
}

#optasy-dashboard .new-challenge-dropdown {
    margin-bottom: 20px;
}

#optasy-dashboard .ui.selection.active.dropdown .menu {
    border-color: #c4c4c4;
}
#optasy-dashboard .ui.selection.dropdown>.dropdown.icon {
    line-height: 1;
    height: fit-content;
    margin: auto;
    top: 0;
    bottom: 0;
    right: .3em;
}
#optasy-dashboard .ui.search.dropdown>.text {
    margin-right: 10px;
    vertical-align: middle;
}

#optasy-dashboard .ui.multiple.dropdown>.label {
    background-color: #e8eaf6;
    padding: 10px 30px;
    border: none;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}

#optasy-dashboard i.icon:before {
    font-family: "Dropdown";
}

#optasy-dashboard #dashboard-main-content:not([data-content-type=goals]) .save[data-content-type=goals] {
    display: none !important;
}

#optasy-dashboard #dashboard-main-content:not([data-content-type=levels]) .save[data-content-type=levels] {
    display: none !important;
}

#optasy-dashboard #dashboard-main-content:not([data-content-type=wellness-days]) .save[data-content-type=wellness-days] {
    display: none !important;
}

#optasy-dashboard #dashboard-main-content:not([data-content-type=wellness-programs]) .save[data-content-type=wellness-programs] {
    display: none !important;
}

#optasy-dashboard .generated-days {
    position: absolute !important;
    left: 340px;
    top: 20px;
}

#optasy-dashboard .two-column-options,
#optasy-dashboard .three-column-options {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}

#optasy-dashboard .two-column-options:not(:first-of-type)>div,
#optasy-dashboard .three-column-options:not(:first-of-type)>div {
    margin-top: 20px;
}

#optasy-dashboard .two-column-options > div,
#optasy-dashboard .type-content>.content-section .section-options .two-column-options > div {
    flex-grow: 1;
    width: 48%;
}

#optasy-dashboard .three-column-options > div,
#optasy-dashboard .type-content>.content-section .section-options .three-column-options > div {
    width: 31%;
}

#optasy-dashboard .two-column-options .opt-option-wrapper,
#optasy-dashboard .three-column-options .opt-option-wrapper {
    min-width: unset;
    width: 100%;
}

#optasy-dashboard .type-content>.content-section .section-options :where(.two-column-options, .three-column-options) :is(input, .select-wellness, .select2-wellness:not(select)) {
    min-width: unset;
    width: 100%;
}

.two-column-options .fit-upload,
.three-column-options .fit-upload {
    width: 100%;
}

#optasy-dashboard .ui.selection.dropdown .menu {
    max-height: 142px;
}
#optasy-dashboard .ui.selection.dropdown .menu>.item {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
#optasy-dashboard .ui.multiple.search.dropdown>input.search {
    margin: auto !important;
    padding: 8px;
    width: 100px;
}

#optasy-dashboard #question-wrapper {
    overflow: hidden;
    -webkit-transition: height .3s linear;
    -moz-transition: height .3s linear;
    -ms-transition: height .3s linear;
    -o-transition: height .3s linear;
    transition: height .3s linear;
}

#optasy-dashboard #question-wrapper[data-show=true] {
    height: 382px;
}

#optasy-dashboard #question-wrapper[data-show=false],
#optasy-dashboard #questionnaire-wrapper[data-show=false] {
    height: 0px;
}

#optasy-dashboard .clone_list_item {
    display: none;
}

#optasy-dashboard #questionnaire-wrapper .ui.selection.dropdown .menu {
    max-height: 160px;
}

#optasy-dashboard #all-questionnaires-wrapper .wellness-type {
    border: 2px solid #e8eaf6;
    -webkit-transition: border-color .18s linear;
    -moz-transition: border-color .18s linear;
    -ms-transition: border-color .18s linear;
    -o-transition: border-color .18s linear;
    transition: border-color .18s linear;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    padding: 0px !important;
}

#optasy-dashboard #all-questionnaires-wrapper .wellness-type[data-status=opened] {
    border: 2px solid #fff;
}

#optasy-dashboard #all-questionnaires-wrapper .wellness-type:hover:not([data-status=opened]) {
    border: 2px solid #2e358f;
}

#optasy-dashboard #questionnaire-wrapper[data-show=false] {
    overflow: hidden;
    -webkit-transition: height .3s linear;
    -moz-transition: height .3s linear;
    -ms-transition: height .3s linear;
    -o-transition: height .3s linear;
    transition: height .3s linear;
}

#optasy-dashboard .opt-option-wrapper {
    position: relative;
    min-width: 33%;
}

#optasy-dashboard .opt-option-wrapper .opt-option-label {
    position: relative;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #757575;
}

#optasy-dashboard .opt-option-wrapper .opt-option-field {
    position: relative;
}

#optasy-dashboard .opt-option-wrapper .opt-option-field > input {
    min-width: 300px;
    border: 1px solid #c4c4c4;
    padding: 16px 20px;
    font-size: 12px;
    font-weight: normal;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}

#optasy-dashboard .opt-option-wrapper .opt-option-field > .description {
    margin-left: 5px;
    font-size: 12px;
    color: #2e358f;
}

#optasy-dashboard .opt-option-wrapper .opt-option-field.two-columns {
    display: flex;
    flex-direction: row;
}

#optasy-dashboard .fit-calendar-widget[data-type=row] .calendar-arrow {
    position: relative;
    font-size: 40px;
    font-weight: 300;
    line-height: 40px;
    padding-left: 10px;
    padding-right: 10px;
    cursor: pointer;
    -webkit-transition: color .18s linear;
    -moz-transition: color .18s linear;
    -ms-transition: color .18s linear;
    -o-transition: color .18s linear;
    transition: color .18s linear;
    color: #1e1e1e;
}

#optasy-dashboard .fit-calendar-widget[data-type=row] .calendar-arrow:hover {
    color: #ff9432;
}

#optasy-dashboard .fit-calendar-widget[data-type=row] .month-and-year .calendar-arrow {
    top: -2px;
}

#optasy-dashboard .fit-calendar-widget[data-type=row] .calendar-header {
    position: relative;
    display: flex;
    flex-direction: row;
}

#optasy-dashboard .fit-calendar-widget[data-type=row] .calendar-header .month-and-year {
    position: relative;
    display: flex;
    align-items: center;
}

#optasy-dashboard .fit-calendar-widget[data-type=row] .calendar-header .month-and-year .month-year-list {
    position: relative;
    display: flex;
    height: 40px;
}

#optasy-dashboard .fit-calendar-widget[data-type=row] .calendar-header .month-and-year .month-year-list .labels-wrapper {
    position: relative;
    overflow: hidden;
    height: 100%;
    font-size: 16px;
}

#optasy-dashboard .fit-calendar-widget[data-type=row] .calendar-header .month-and-year .month-year-list .month-labels {
    position: relative;
    padding: 0;
    display: inline-flex;
    height: 100%;
}

#optasy-dashboard .fit-calendar-widget[data-type=row] .calendar-header .month-and-year .month-year-list .year-labels {
    position: relative;
    height: 100%;
}

#optasy-dashboard .fit-calendar-widget[data-type=row] .calendar-header .month-and-year .month-year-list .year-labels span {
    width: 100%;
    font-weight: 400;
}

#optasy-dashboard .fit-calendar-widget[data-type=row] .calendar-header .month-and-year .month-year-list span {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
}

#optasy-dashboard .fit-calendar-widget[data-type=row] .calendar-header .month-and-year .month-year-list span.flex-item:not(:last-of-type) {
    margin-right: 12px;
}

#optasy-dashboard .fit-calendar-widget[data-type=row] .calendar-header .month-and-year .month-year-list .labels-wrapper.month,
#optasy-dashboard .fit-calendar-widget[data-type=row] .calendar-header .month-and-year .month-year-list span {
    width: 100px;
}

#optasy-dashboard .fit-calendar-widget[data-type=row] .calendar-header .days-controls {
    position: relative;
}

#optasy-dashboard .fit-calendar-widget[data-type=row] .calendar-body {
    position: relative;
    padding: 20px 0px;
    color: #1e1e1e;
    font-size: 16px;
}

#optasy-dashboard .fit-calendar-widget[data-type=row] .calendar-body .days-controls {
    position: absolute;
    right: 0px;
    top: -40px;
    font-weight: 300;
}

#optasy-dashboard .fit-calendar-widget[data-type=row] .calendar-body .month-wrapper {
    position: relative;
    overflow: hidden;
}

#optasy-dashboard .fit-calendar-widget[data-type=row] .calendar-body .month-wrapper span {
    position: relative;
    display: flex;
    justify-content: center;
    width: 53px;
    text-align: center;
    font-weight: 300;
}

#optasy-dashboard .fit-calendar-widget[data-type=row] .calendar-body .month-wrapper .month-header {
    position: relative;
    display: flex;
    color: #757575;
}

#optasy-dashboard .fit-calendar-widget[data-type=row] .calendar-body .month-wrapper .month-days {
    position: relative;
    display: inline-flex;
    margin-top: 20px;
    padding: 8px 0px;
}

#optasy-dashboard .fit-calendar-widget[data-type=row] .calendar-body .month-wrapper .month-days div {
    padding: 4px 0px;
    cursor: pointer;
    font-weight: 400;
    box-shadow: 0px 0px 14px rgba(0, 0, 0, 0);
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    -webkit-transition: border-color .3s linear, box-shadow .3s linear;
    -moz-transition: border-color .3s linear, box-shadow .3s linear;
    -ms-transition: border-color .3s linear, box-shadow .3s linear;
    -o-transition: border-color .3s linear, box-shadow .3s linear;
    transition: border-color .3s linear, box-shadow .3s linear;
}

#optasy-dashboard .fit-calendar-widget[data-type=row] .calendar-body .month-wrapper .month-days div[data-empty=""] {
    color: #c4c4c4;
}

#optasy-dashboard .fit-calendar-widget[data-type=row] .calendar-body .month-wrapper .month-days div:not([data-empty=""]):hover,
#optasy-dashboard .fit-calendar-widget[data-type=row] .calendar-body .month-wrapper .month-days div.active:not([data-empty=""]) {
    box-shadow: 0px 0px 14px rgba(0, 0, 0, .2);
}

#optasy-dashboard .fit-calendar-widget[data-type=row] .calendar-footer {
    position: relative;
    display: none;
    flex-direction: row;
    justify-content: space-between;
    height: 40px;
    align-items: center;
}

#optasy-dashboard .fit-calendar-widget[data-type=row] .calendar-footer .time-label {
    position: relative;
    font-weight: 500
}

#optasy-dashboard .fit-calendar-widget[data-type=row] .calendar-footer .time-wrapper {
    position: relative;
    display: flex;
}

#optasy-dashboard .fit-calendar-widget[data-type=row] .calendar-footer .time-wrapper .the-time {
    position: relative;
    font-size: 22px;
    align-items: center;
    display: flex;
}

#optasy-dashboard .fit-calendar-widget[data-type=row] .calendar-footer .time-wrapper .the-time select {
    max-width: 60px;
    min-width: 60px;
}

#optasy-dashboard .fit-calendar-widget[data-type=row] .calendar-footer .time-wrapper .the-time :where(.select-wellness, .select2-wellness:not(select)) {
    max-width: 80px;
    min-width: 80px;
}

#optasy-dashboard .fit-calendar-widget[data-type=row] .calendar-footer .time-wrapper .the-time .delimiter-time {
    margin-left: 10px;
    margin-right: 10px;
}

#optasy-dashboard .fit-calendar-widget[data-type=row] .calendar-footer .time-wrapper .the-format {
    position: relative;
    margin-left: 20px;
    display: flex;
}

#optasy-dashboard .fit-calendar-widget[data-type=row] .calendar-footer .time-wrapper .the-format span {
    margin-left: 8px;
    padding: 8px 20px;
    position: relative;
    font-weight: 400;
    cursor: pointer;
    background-color: #fff;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    -webkit-transition: box-shadow .1s linear;
    -moz-transition: box-shadow .1s linear;
    -ms-transition: box-shadow .1s linear;
    -o-transition: box-shadow .1s linear;
    transition: box-shadow .1s linear;
    box-shadow: #fff 0px 0px 0px;
}

#optasy-dashboard .fit-calendar-widget[data-type=row] .calendar-footer .time-wrapper .the-format span:hover,
#optasy-dashboard .fit-calendar-widget[data-type=row] .calendar-footer .time-wrapper .the-format[data-type=am] span.am,
#optasy-dashboard .fit-calendar-widget[data-type=row] .calendar-footer .time-wrapper .the-format[data-type=pm] span.pm {
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .15);
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .15);
    box-shadow: 0 0 4px rgba(0, 0, 0, .15);
}

#optasy-dashboard .calendar_widget_selection {
    display: none;
}

.ftScrollbar {
    overflow-y: scroll;
}
.ftScrollbar::-webkit-scrollbar {
    width: 4px;
}
.ftScrollbar::-webkit-scrollbar-track {
    height: 50%;
    background: transparent;
    border-radius: 0;
}
.ftScrollbar::-webkit-scrollbar-thumb {
    cursor: pointer;
    background: #888 !important;
    border-radius: 5px;
    -webkit-transition: color .2s ease !important;
    transition: color .2 ease !important;
}
.ftScrollbar::-webkit-scrollbar-thumb:hover {
    background: #555 !important;
}

.mCustomScrollBox {
    overflow: visible;
}

#optasy-dashboard .mCSB_scrollTools {
    right: -12px;
}

#optasy-dashboard .mCSB_dragger_bar {
    position: absolute;
    width: 10px;
}
#optasy-dashboard #dashboard-side-menu .mCSB_dragger_bar {
    width: 4px;
}
#optasy-dashboard .mCSB_inside > .mCSB_container {
    margin-left: 0px;
    margin-right: 12px;
    overflow: unset;
}
#optasy-dashboard #dashboard-side-menu .mCSB_inside > .mCSB_container {
    margin-right: 0;
}
#optasy-dashboard .mCSB_draggerRail {
    position: absolute;
    width: 10px;
    background-color: rgba(0, 0, 0, 0.2);
}
#optasy-dashboard #dashboard-side-menu .mCSB_draggerRail {
    width: 4px;
}

#optasy-dashboard #profile p {
    display: flex;
    flex-direction: column;
}

#optasy-dashboard #calendar {
    position: relative;
    height: 110px;
    width: 960px;
    display: flex;
    border: none;
    border-bottom: 1px solid #c5c6c7;
}

#optasy-dashboard #calendar>#months-wrapper {
    position: relative;
    display: flex;
    height: 48px;
    width: 100px;
}

#optasy-dashboard #calendar>#months-wrapper>#months-holder {
    height: 100%;
    position: relative;
    width: 100px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    overflow: hidden;
}

#optasy-dashboard #calendar>#months-wrapper>#months-holder>span {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#optasy-dashboard #calendar>#days-wrapper {
    display: flex;
    height: 100%;
    align-self: start;
    width: 960px;
    overflow: hidden;
}

#optasy-dashboard #calendar>#days-wrapper>#days-holder {
    display: flex;
    align-items: center;
}

#optasy-dashboard #calendar>#days-wrapper>#days-holder>span {
    position: relative;
    font-size: 18px;
    display: flex;
    padding: 3px 10px;
    width: 50px;
    height: 100%;
    flex-direction: column;
    text-align: center;
    cursor: pointer;
}

#optasy-dashboard #calendar>#days-wrapper>#days-holder>span>span {
    display: block;
    position: relative;
    pointer-events: none;
}

#optasy-dashboard #calendar>#days-wrapper>#days-holder>span>span.day-name {
    font-size: 12px;
}

#optasy-dashboard #calendar>#days-wrapper>#days-holder>span:before {
    display: block;
    content: "";
    position: absolute;
    bottom: -1px;
    height: 0;
    left: 0;
    width: 100%;
    border-bottom: 0 solid #c5c6c7;
    backface-visibility: hidden;
    -webkit-transition: border-bottom .18s linear;
    -moz-transition: border-bottom .18s linear;
    -ms-transition: border-bottom .18s linear;
    -o-transition: border-bottom .18s linear;
    transition: border-bottom .18s linear;
}

#optasy-dashboard #calendar>#days-wrapper>#days-holder>span.active:before,
#optasy-dashboard #calendar>#days-wrapper>#days-holder>span:hover:before {
    border-bottom: 4px solid #db7093;
}

#optasy-dashboard #calendar>#days-wrapper>#days-holder>span:not(:first-child) {
    margin-left: 20px;
}

#optasy-dashboard #calendar>.days-left,
#optasy-dashboard #calendar>#months-wrapper>.months-left {
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    bottom: 0;
    left: -40px;
    content: "‹";
    font-size: 48px;
    line-height: 40px;
    text-align: center;
}

#optasy-dashboard #calendar>.days-right,
#optasy-dashboard #calendar>#months-wrapper>.months-right {
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    bottom: 0;
    left: 100%;
    font-size: 48px;
    line-height: 40px;
    text-align: center;
}

#optasy-dashboard #calendar>.days-left,
#optasy-dashboard #calendar>.days-right,
#optasy-dashboard #calendar>#months-wrapper>.months-left,
#optasy-dashboard #calendar>#months-wrapper>.months-right {
    cursor: pointer;
    color: rgba(95, 94, 94, .2);
    -webkit-transition: color .18s linear;
    -moz-transition: color .18s linear;
    -ms-transition: color .18s linear;
    -o-transition: color .18s linear;
    transition: color .18s linear;
}

#optasy-dashboard #calendar>.days-left:hover,
#optasy-dashboard #calendar>.days-right:hover,
#optasy-dashboard #calendar>#months-wrapper>.months-left:hover,
#optasy-dashboard #calendar>#months-wrapper>.months-right:hover {
    color: #3fd6c7;
}

#optasy-dashboard #calendar>#months-wrapper>.months-left,
#optasy-dashboard #calendar>#months-wrapper>.months-right {
    bottom: 8px;
}

#optasy-dashboard #calendar:before {
    display: block;
    position: absolute;
    top: 0px;
    left: 50%;
    height: 100%;
    width: 1px;
    content: "";
    background-color: red;
    border-left: 1px solid red;
}

#optasy-dashboard.user-profile {
    position: relative;
    display: block;
}

#optasy-dashboard>#dashboard-header {
    position: relative;
    display: block;
    width: 100%;
}

#optasy-dashboard #user-profile-wrapper {
    position: relative;
    display: block;
    width: 100%;
}

#optasy-dashboard .user-profile-holder {
    display: flex;
    padding: 4px;
    max-width: 100%;
    width: 100%;
    justify-content: center;
    align-items: start;
    flex-direction: row;
}

#optasy-dashboard .user-profile-holder>form#optasy_dashboard_user_profile {
    display: block;
    padding: 40px;
    background-color: #3fd6c7;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}

#optasy-dashboard .user-profile-holder>form#optasy_dashboard_user_profile>p {
    display: block;
    margin-top: 10px;
}

#optasy-dashboard .user-profile-holder>form#optasy_dashboard_user_profile>p label {
    display: block;
}

#optasy-dashboard .user-profile-holder>form#optasy_dashboard_user_profile>p input {
    display: block;
}

#optasy-dashboard .user-profile-holder>form#optasy_dashboard_user_profile>p.login-remember label {
    display: flex;
}

#optasy-dashboard .user-profile-holder>form#optasy_dashboard_user_profile>p.login-remember label>input {
    margin-right: 10px;
}

#optasy-dashboard .user-profile-holder>p>input#wp-submit {
    margin: 20px auto 0px auto;
}

#optasy-dashboard .user-profile-holder>p>input#wp-submit,
#optasy-dashboard .user-profile-holder>p>input#wp-submit:visited {
    border: none;
    background-color: #fff;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    color: #db7093;
    font-weight: 400;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    -webkit-transition: background-color .3s linear, color .3s linear;
    -moz-transition: background-color .3s linear, color .3s linear;
    -ms-transition: background-color .3s linear, color .3s linear;
    -o-transition: background-color .3s linear, color .3s linear;
    transition: background-color .3s linear, color .3s linear;
}

#optasy-dashboard .user-profile-holder>p>input#wp-submit:hover,
#optasy-dashboard .user-profile-holder>p>input#wp-submit:active {
    background-color: #3fd6c7;
    color: #fff;
}

#optasy-dashboard .user-profile-holder>.profile-tabs-wrapper {
    display: flex;
    width: 30%;
    flex-direction: column;
    background-color: #fff;
    padding: 20px;
}

#optasy-dashboard .user-profile-holder>.profile-tabs-wrapper>.profile-tab {
    cursor: pointer;
    border-left: 2px solid #cecece;
    margin-bottom: 10px;
    padding: 4px 10px;
}

#optasy-dashboard .user-profile-holder>.profile-tabs-wrapper>.profile-tab.active {
    border-left: 2px solid #3fd6c7;
}

#optasy-dashboard .user-profile-holder>.profile-tabs-wrapper>.profile-tab:hover:not(.active) {
    border-left: 2px solid rgba(63, 214, 199, .4);
}

#optasy-dashboard .user-profile-holder>.profile-tabs-content-wrapper {
    display: flex;
    width: 70%;
    border: 2px solid #3fd6c7;
    padding: 20px;
    flex-direction: column;
}

#optasy-dashboard .user-profile-holder>.profile-tabs-content-wrapper>.profile-tab-content.active {
    display: block;
}

#optasy-dashboard .user-profile-holder>.profile-tabs-content-wrapper>.profile-tab-content {
    display: none;
}

#optasy-dashboard .user-profile-holder .tag-list {
    padding: 20px 0;
}

#optasy-dashboard .user-profile-holder .tag-list .tag {
    position: relative;
    padding: 10px 20px;
    background-color: #dbdbdb;
    margin-right: 20px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}

#optasy-dashboard .user-profile-holder .tag-list .tag>.tag-delete {
    display: block;
    font-size: 14px;
    width: 22px;
    font-weight: bold;
    position: absolute;
    top: -10px;
    right: -10px;
    height: 22px;
    background-color: #020202;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    text-align: center;
    color: #fff;
    cursor: pointer;
    -webkit-transition: background-color .3s linear, color .3s linear;
    -moz-transition: background-color .3s linear, color .3s linear;
    -ms-transition: background-color .3s linear, color .3s linear;
    -o-transition: background-color .3s linear, color .3s linear;
    transition: background-color .3s linear, color .3s linear;
}

#optasy-dashboard .user-profile-holder .tag-list .tag>.tag-delete:hover {
    background-color: red;
    color: #fff;
}

#optasy-dashboard .user-profile-holder .add-tag-input {
    margin-top: 20px;
}

#optasy-dashboard .user-profile-holder .add-tag-input #add-goal {
    margin-left: 20px;
}

#optasy-dashboard .user-profile-holder .notice-error {
    opacity: 1;
    overflow: hidden;
    height: 34px;
    font-size: 14px;
    color: red;
    margin-top: 10px;
}

#optasy-dashboard .user-profile-holder .notice-error.notice-animation {
    display: block;
    height: 0;
    -webkit-transition: height .3s linear;
    -moz-transition: height .3s linear;
    -ms-transition: height .3s linear;
    -o-transition: height .3s linear;
    transition: height .3s linear;
    transition-delay: 1.5s;
}

#optasy-dashboard .user-profile-holder>.profile-tabs-content-wrapper .wellness-tab-wrapper {
    display: flex;
    flex-direction: row;
}

#optasy-dashboard .user-profile-holder>.profile-tabs-content-wrapper .wellness-tab-wrapper>.wellness-tab {
    padding: 6px 10px;
    margin-right: 10px;
    background-color: #cecece;
    cursor: pointer;
    -webkit-transition: color .3s linear, background-color .3s linear;
    -moz-transition: color .3s linear, background-color .3s linear;
    -ms-transition: color .3s linear, background-color .3s linear;
    -o-transition: color .3s linear, background-color .3s linear;
    transition: color .3s linear, background-color .3s linear;
}

#optasy-dashboard .user-profile-holder>.profile-tabs-content-wrapper .wellness-tab-wrapper>.wellness-tab.active {
    color: #3fd6c7;
    background-color: #fff;
}

#optasy-dashboard .user-profile-holder>.profile-tabs-content-wrapper .wellness-tab-wrapper>.wellness-tab:hover:not(.active) {
    background-color: #e9e8e8;
}

#optasy-dashboard .user-profile-holder>.profile-tabs-content-wrapper .wellness-tab-content-wrapper>.wellness-tab-content {
    display: none;
}

#optasy-dashboard .user-profile-holder>.profile-tabs-content-wrapper .wellness-tab-content-wrapper>.wellness-tab-content>.wellness-tab-content-holder {
    margin-bottom: 20px;
    padding: 20px 10px;
    background-color: #fff;
}

#optasy-dashboard .user-profile-holder>.profile-tabs-content-wrapper .wellness-tab-content-wrapper>.wellness-tab-content.active {
    display: block;
}

#optasy-dashboard .user-profile-holder>.profile-tabs-content-wrapper .wellness-form-add {
    margin-top: 10px;
    padding-top: 20px;
    margin-bottom: 20px;
    border-top: 3px solid #3fd6c7;
}

#optasy-dashboard .user-profile-holder>.profile-tabs-content-wrapper .wellness-form-add .wellness-title {
    margin-bottom: 20px;
}

#optasy-dashboard .user-profile-holder>.profile-tabs-content-wrapper .wellness-form-add .upload-level {
    display: block;
    margin-top: 20px;
    background-color: #f1f1f1;
    padding: 10px;
}

#optasy-dashboard .user-profile-holder>.profile-tabs-content-wrapper .wellness-form-add .title-level {
    display: block;
    margin-top: 10px;
    margin-left: 20px;
    background-color: #f1f1f1;
    margin-bottom: 10px;
}

#optasy-dashboard .user-profile-holder>.profile-tabs-content-wrapper .wellness-form-add .add-p {
    display: block;
    margin-left: 40px;
    margin-top: 10px;
}

#optasy-dashboard .user-profile-holder>.profile-tabs-content-wrapper .accordion {
    display: flex;
    flex-direction: column;
    padding: 10px;
}

#optasy-dashboard .user-profile-holder>.profile-tabs-content-wrapper .accordion>.accordion-title {
    display: block;
    background-color: #db7093;
    color: #fff;
    padding: 10px;
    cursor: pointer;
}

#optasy-dashboard .user-profile-holder>.profile-tabs-content-wrapper .accordion>.accordion-content {
    display: none;
    background-color: #f1f1f1;
    padding: 20px;
}

#optasy-dashboard .user-profile-holder>.profile-tabs-content-wrapper .accordion.active>.accordion-content {
    display: block;
}

#optasy-dashboard .user-profile-holder>.profile-tabs-content-wrapper .hide-day {
    display: none;
}

#optasy-dashboard .question-range {
    width: 100%;
    gap: 10px;
}

.browse-photo-wrapper {
    position: relative;
    display: none;
    width: max-content;
}
.browse-photo-wrapper.active {
    display: flex;
}
.browse-photo {
    position: relative;
    display: none;
    width: 160px;
    height: 160px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    object-fit: cover;
    object-position: center;
    border: 2px solid #e8eaf6;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    -webkit-transition: border-color .15s linear;
    -moz-transition: border-color .15s linear;
    -ms-transition: border-color .15s linear;
    -o-transition: border-color .15s linear;
    transition: border-color .15s linear;
}
.browse-photo.active {
    display: flex;
}
.browse-photo:hover {
    border: 2px solid #2e358f;
}
.browse-photo-wrapper .delete,
.browse-photo .delete {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 24px;
    height: 24px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    line-height: 24px;
    background-color: #2e358f;
    font-weight: 700;
    cursor: pointer;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: color .15s linear, background-color .15s linear;
    -moz-transition: color .15s linear, background-color .15s linear;
    -ms-transition: color .15s linear, background-color .15s linear;
    -o-transition: color .15s linear, background-color .15s linear;
    transition: color .15s linear, background-color .15s linear;
    z-index: 1;
}
.browse-photo-wrapper .delete:hover,
.browse-photo-wrapper .delete.active,
.browse-photo .delete:hover,
.browse-photo .delete.active {
    background-color: #ff9432;
    color: #fff;
}

.fit-button {
    position: relative;
    display: block;
    background-color: #e4e8f4;
    color: #2e358f;
    text-align: center;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 700;
    line-height: 30px;
    text-transform: uppercase;
    min-width: 150px;
    margin-left: 20px;
    min-height: 50px;
    cursor: pointer;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    -webkit-transition: background-color .15s linear, color .15s linear;
    -moz-transition: background-color .15s linear, color .15s linear;
    -ms-transition: background-color .15s linear, color .15s linear;
    -o-transition: background-color .15s linear, color .15s linear;
    transition: background-color .15s linear, color .15s linear;
}

.fit-button.level-name {
    text-transform: none;
}

.fit-button:first-child {
    margin-left: 0px;
}

.fit-button.small {
    min-width: 54px;
}

.fit-button.small_v2 {
    min-width: 54px;
    min-height: auto;
    padding: 6px 10px;
}

.fit-button.normal {
    width: 100px;
}

.fit-button.large {
    max-width: 250px;
}

.fit-button.very-large {
    max-width: 300px;
}

.fit-button.normal_v2 {
    width: 100px;
    min-height: auto;
    padding: 6px 10px;
}

.fit-button.chat_btn {
    width: 64px;
    height: 32px;
    padding: 4px 8px;
    min-width: 54px;
    min-height: 24px;
    line-height: 25px;
    margin-left: 6px;
    text-align: center;
}

.fit-button.hidden {
    display: none;
}

.fit-button.animated {
    -webkit-transition: transform .2s linear, opacity .2s linear;
    -moz-transition: transform .2s linear, opacity .2s linear;
    -ms-transition: transform .2s linear, opacity .2s linear;
    -o-transition: transform .2s linear, opacity .2s linear;
    transition: transform .2s linear, opacity .2s linear;
}

.fit-button.hidden-animated {
    transform: scale(0, 0);
    opacity: 0;
}

.fit-button:visited {
    border: none;
    background-color: #ff9432;
    color: #fff;
}

.fit-button:hover:not(.disabled),
.fit-button.active:not(.disabled) {
    background-color: #ff9432;
    color: #fff;
}

#optasy-dashboard .wellness-type.challenge-program .fit-button:hover:not(.disabled) {
    color: #2e358f;
}

.fit-button.v1 {
    min-width: 130px;
    background-color: #ff9432;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fit-button.v1 i {
    font-size: 20px;
    position: relative;
    margin-right: 10px;
}

.fit-button.v1:hover:not(.disabled),
.fit-button.v1:active:not(.disabled) {
    background-color: #2e358f;
    color: #fff;
}

.fit-button.v2 {
    min-width: 130px;
    background-color: #f6f9f2;
    color: #2e358f;
    display: flex;
    align-items: center;
}

.fit-button.v2 i {
    font-size: 20px;
    position: relative;
    margin-right: 10px;
}

.fit-button.v2:hover:not(.disabled),
.fit-button.v2:active:not(.disabled) {
    background-color: #e4e8f4;
    color: #2e358f;
}

.fit-button.v3 {
    background-color: #ff9432;
    color: #fff;
}

.fit-button.v3:hover:not(.disabled),
.fit-button.v3:active:not(.disabled) {
    background-color: #2e358f;
    color: #fff;
}

.fit-button.v4 {
    background-color: #ff9432;
    color: #fff;
}

.fit-button.v4:hover:not(.disabled),
.fit-button.v4:active:not(.disabled) {
    background-color: #e8eaf6;
    color: #2e358f;
}

.fit-button.v5 {
    min-width: 130px;
    background-color: #e8eaf6;
    color: #2e358f;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: initial;
}

.fit-button.v5 i {
    font-size: 20px;
    position: relative;
    margin-right: 10px;
}

.fit-button.v5:hover:not(.disabled),
.fit-button.v5:active:not(.disabled) {
    background-color: #ff9432;
    color: #fff;
}

.fit-button.v6 {
    min-width: 130px;
    background-color: #ff9432;
    color: #fff;
    display: flex;
    align-items: center;
    text-transform: initial;
    margin-left: 0px;
}

.fit-button.v6 i {
    font-size: 20px;
    position: relative;
    margin-right: 10px;
}

.fit-button.v6:hover:not(.disabled),
.fit-button.v6:active:not(.disabled) {
    background-color: #2e358f;
    color: #fff;
}

.fit-button.disabled {
    border: none;
    background-color: #f1f1f1;
}

.fit-button.pinned,
.fit-button.pinned.disabled {
    background-color: #fff;
    width: 40px;
    min-width: auto;
    display: inline-block;
    min-height: auto;
    padding: 4px 8px;
}

.profile-main-loader {
    left: 50% !important;
    margin-left: -100px;
    position: fixed !important;
    top: 50% !important;
    margin-top: -100px;
    width: 45px;
    z-index: 9000 !important;
}

.profile-main-loader-btn {
    position: absolute !important;
    z-index: 9000 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100%;
    height: 100%;
    background-color: rgba(46, 53, 143, .8);
    display: flex;
    align-items: center;
    border-radius: 14px;
    color: #2e358f;
}

.profile-main-loader .loader {
    position: relative;
    margin: 0px auto;
    width: 50px;
    height: 50px;
    &:before {
        content: "";
        display: block;
        padding-top: 100%;
    }
}

.profile-main-loader-btn .loader.btn {
    position: relative;
    margin: 0px auto;
    width: 30px;
    height: 30px;
    &:before {
        content: "";
        display: block;
        padding-top: 100%;
    }
}

.circular-loader {
    -webkit-animation: rotate 2s linear infinite;
    animation: rotate 2s linear infinite;
    height: 100%;
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
}

.loader-path {
    stroke-dasharray: 150, 200;
    stroke-dashoffset: -10;
    -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
}

@-webkit-keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124;
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124;
    }
}

@-webkit-keyframes color {
    0% {
        stroke: #ff9432;
    }
    40% {
        stroke: #ff9432;
    }
    66% {
        stroke: #ff9432;
    }
    80%,
    90% {
        stroke: #ff9432;
    }
}

@keyframes color {
    0% {
        stroke: #ff9432;
    }
    40% {
        stroke: #ff9432;
    }
    66% {
        stroke: #ff9432;
    }
    80%,
    90% {
        stroke: #ff9432;
    }
}

.loader-animation-wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 100;
}

.loader-animation-wrapper[data-show=false] {
    display: none;
}

.loader-animation-wrapper[data-show=true] {
    display: block;
    background-color: #f6f9f2;
}

#optasy-overlay,
.optasy-overlay {
    position: fixed;
    display: flex;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    z-index: 200;
    justify-content: center;
    align-items: center;
}

#optasy-overlay[data-show=false],
.optasy-overlay[data-show=false] {
    display: none;
}

#optasy-overlay[data-show=true],
.optasy-overlay[data-show=true] {
    display: flex;
}

#optasy-overlay[data-feed=fit_support] .fit_discussion,
.optasy-overlay[data-feed=fit_support] .fit_discussion {
    display: none;
}

#optasy-overlay[data-feed=discussion] .fit_support,
.optasy-overlay[data-feed=discussion] .fit_support {
    display: none;
}

#optasy-overlay[data-feed=fit_support] .pinned-post-checkbox,
.optasy-overlay[data-feed=fit_support] .pinned-post-checkbox {
    display: none;
}

#optasy-overlay .delete {
    position: absolute;
    top: 40px;
    right: 40px;
    width: 40px;
    height: 40px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 40px;
    background-color: #2e358f;
    font-weight: 700;
    cursor: pointer;
    z-index: 10;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: color .15s linear, background-color .15s linear;
    -moz-transition: color .15s linear, background-color .15s linear;
    -ms-transition: color .15s linear, background-color .15s linear;
    -o-transition: color .15s linear, background-color .15s linear;
    transition: color .15s linear, background-color .15s linear;
}

.optasy-overlay .optasy-overlay-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.optasy-overlay .optasy-overlay-content .title {
    font-size: 20px;
    font-weight: 700;
}
.optasy-overlay .optasy-overlay-content .body p {
    font-size: 12px;
    padding: 0 10px;
}

.optasy-overlay-login-close,
.optasy-overlay .optasy-overlay-close {
    position: absolute;
    top: calc(50vh - 316px);
    right: calc(50vw - 420px);
    width: 40px;
    height: 40px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 40px;
    background-color: #2e358f;
    font-weight: 700;
    cursor: pointer;
    z-index: 10;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: color .15s linear, background-color .15s linear;
    -moz-transition: color .15s linear, background-color .15s linear;
    -ms-transition: color .15s linear, background-color .15s linear;
    -o-transition: color .15s linear, background-color .15s linear;
    transition: color .15s linear, background-color .15s linear;
}

.optasy-overlay-login-close {
    top: calc(50vh - 300px);
    right: calc(50vw - 215px);
}

.optasy-overlay-login-close:hover,
#optasy-overlay .delete:hover,
.optasy-overlay .optasy-overlay-close:hover,
#optasy-overlay .delete.active,
.optasy-overlay .optasy-overlay-close.active {
    background-color: #ff9432;
    color: #fff;
}

#optasy-overlay .delete.v2,
.optasy-overlay .optasy-overlay-close.v2 {
    top: -10px;
    right: -10px;
}

#optasy-overlay .overlay-background,
.optasy-overlay .overlay-background {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background-color: rgba(0, 0, 0, .8);
}

#optasy-overlay #optasy-overlay-content,
.optasy-overlay .optasy-overlay-content {
    position: relative;
    background-color: #fff;
    display: flex;
    max-height: 100%;
    width: 800px;
    max-width: 100%;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    z-index: 2;
    overflow: hidden;
    padding: 40px;
}

#optasy-dashboard .post .fit_post_upload_image {
    /*background: url("../images/btns/upload_image.svg") center no-repeat;
    width: 32px;*/
    align-self: center;
    fill: #2e358e;
    cursor: pointer;
    transition: all ease 0.3s;
}

#optasy-dashboard .post .fit_post_upload_image:hover {
    fill: #ff9432;
    transition: all ease 0.3s;
}

.feed-media-wrapper {
    position: relative;
    width: 100%;
}

.feed-media-wrapper[data-show=true] {
    margin-top: 20px;
}

.feed-media-wrapper[data-show=false] {
    display: none;
}

.feed-media-wrapper .feed-media {
    position: relative;
    width: 97%;
    margin: auto;
}
.feed-media-wrapper .feed-media .delete, .youtube .delete {
    position: absolute;
    top: -12px;
    right: -12px;
    cursor: pointer;
    font-size: 12px;
    background-color: #2e358f;
    height: min-content;
    padding: 2px 6px;
    border-radius: 50%;
    color: #fff;
}
.feed-media-wrapper .feed-media .delete:hover, .youtube .delete:hover {
    background-color: #ff9432;
}

.feed-add-post-wrapper .add-post-buttons {
    display: flex;
    position: relative;
    justify-content: flex-end;
    align-content: center;
}

.feed-add-post-wrapper .fit-button:not(.fit_post_upload_image) {
    align-self: flex-end;
}

.feed-add-post-wrapper .browse-photo {
    width: 200px;
    height: 200px;
}

.feed-add-post-wrapper .browse-photo .delete {
    top: 0px;
    right: 0px;
}

.feed-add-post-wrapper .browse-photo.active {
    margin-bottom: 20px;
}

#optasy-overlay-post {
    position: fixed;
    display: flex;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    z-index: 200;
    justify-content: center;
    align-items: center;
}

#optasy-overlay-post[data-show=false] {
    display: none;
}

#optasy-overlay-post[data-show=true] {
    display: flex;
}

#optasy-overlay-post .delete {
    position: absolute;
    top: calc(50vh - 220px);
    left: calc(50vw + 180px);
    width: 40px;
    height: 40px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 40px;
    background-color: #2e358f;
    font-weight: 700;
    cursor: pointer;
    z-index: 10;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: color .15s linear, background-color .15s linear;
    -moz-transition: color .15s linear, background-color .15s linear;
    -ms-transition: color .15s linear, background-color .15s linear;
    -o-transition: color .15s linear, background-color .15s linear;
    transition: color .15s linear, background-color .15s linear;
}

#optasy-overlay-post .delete:hover,
#optasy-overlay-post .delete.active {
    background-color: #ff9432;
    color: #fff;
}

#optasy-overlay-post .delete.v2 {
    top: -10px;
    right: -10px;
}

#optasy-overlay-post .overlay-background {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background-color: rgba(0, 0, 0, .8);
}

#optasy-overlay-post #optasy-overlay-content {
    position: relative;
    background-color: #fff;
    display: flex;
    max-height: 100%;
    width: 400px;
    height: 400px;
    max-width: 100%;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    z-index: 2;
    overflow: hidden;
    padding: 10px;
}

#optasy-overlay-post .feed-add-title {
    margin-left: 20px;
    margin-top: 20px;
}

#optasy-overlay-post .like-user-wrapper {
    position: relative;
    display: flex;
    flex-direction: row;
    padding: 10px;
    background-color: #f3f3f3;
    align-items: center;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}

#optasy-overlay-post .like-user-wrapper:not(:first-child) {
    margin-top: 10px;
}

#optasy-overlay-post .like-user-wrapper .profile-picture-wrapper {
    display: flex;
}
#optasy-overlay-post .like-user-wrapper .user-thumb {
    position: relative;
    display: flex;
    width: 30px;
    height: 30px;
    object-fit: cover;
    object-position: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

#optasy-overlay-post .like-user-wrapper .user-name {
    margin-left: 10px;
    position: relative;
    display: flex;
}

#optasy-overlay-post #list-likes {
    position: relative;
    width: 100%;
    min-height: 60px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
    flex-direction: column;
    white-space: pre-wrap;
}

#optasy-overlay-post #list-likes:focus {
    cursor: text;
}

#optasy-overlay-media {
    position: fixed;
    display: flex;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    z-index: 200;
    justify-content: center;
    align-items: center;
}

#optasy-overlay-media[data-show=false] {
    display: none;
}

#optasy-overlay-media[data-show=true] {
    display: flex;
}

#optasy-overlay-media .delete {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 40px;
    height: 40px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 40px;
    background-color: #2e358f;
    font-weight: 700;
    cursor: pointer;
    z-index: 10;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: color .15s linear, background-color .15s linear;
    -moz-transition: color .15s linear, background-color .15s linear;
    -ms-transition: color .15s linear, background-color .15s linear;
    -o-transition: color .15s linear, background-color .15s linear;
    transition: color .15s linear, background-color .15s linear;
}

#optasy-overlay-media .delete:hover,
#optasy-overlay-media .delete.active {
    background-color: #ff9432;
    color: #fff;
}

#optasy-overlay-media .delete.v2 {
    top: -10px;
    right: -10px;
}

#optasy-overlay-media .overlay-background {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background-color: rgba(0, 0, 0, .8);
}

#optasy-overlay-media .optasy-overlay-content {
    position: relative;
    display: flex;
    width: 400px;
    height: 400px;
    max-width: 95%;
    max-height: 95%;
    z-index: 2;
    padding: 10px;
}

#optasy-overlay-media .overlay-media-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

#optasy-overlay-media .overlay-post-media {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}

#optasy-overlay-delete,
.optasy-overlay-login,
#optasy-overlay-custom-delete,
.optasy-overlay-v2 {
    position: fixed;
    display: flex;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    z-index: 200;
    justify-content: center;
    align-items: center;
}
#optasy-overlay-delete[data-show=false],
.optasy-overlay-login[data-show=false],
#optasy-overlay-custom-delete[data-show=false],
.optasy-overlay-v2[data-show=false] {
    display: none;
}

#optasy-overlay-delete[data-show=true],
.optasy-overlay-login[data-show=true],
#optasy-overlay-custom-delete[data-show=true],
.optasy-overlay-v2[data-show=true] {
    display: flex;
}

:where(#optasy-overlay-delete, .optasy-overlay-login, #optasy-overlay-custom-delete) .delete,
.optasy-overlay-v2 .optasy-overlay-close {
    position: absolute;
    top: calc(50vh - 220px);
    left: calc(50vw + 180px);
    width: 40px;
    height: 40px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 40px;
    background-color: #2e358f;
    font-weight: 700;
    cursor: pointer;
    z-index: 10;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: color .15s linear, background-color .15s linear;
    -moz-transition: color .15s linear, background-color .15s linear;
    -ms-transition: color .15s linear, background-color .15s linear;
    -o-transition: color .15s linear, background-color .15s linear;
    transition: color .15s linear, background-color .15s linear;
}
.optasy-overlay-v2 .optasy-overlay-close {
    top: -20px;
    left: unset;
    right: -20px;
}

:where(#optasy-overlay-delete, .optasy-overlay-login, #optasy-overlay-custom-delete) .delete:hover,
:where(#optasy-overlay-delete, .optasy-overlay-login, #optasy-overlay-custom-delete) .delete.active,
.optasy-overlay-v2 .optasy-overlay-close:hover,
.optasy-overlay-v2 .optasy-overlay-close.active {
    background-color: #ff9432;
    color: #fff;
}

:where(#optasy-overlay-delete, .optasy-overlay-login, #optasy-overlay-custom-delete, .optasy-overlay-v2) .overlay-background {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background-color: rgba(0, 0, 0, .8);
}

:where(#optasy-overlay-delete, .optasy-overlay-login, #optasy-overlay-custom-delete, .optasy-overlay-v2) .optasy-overlay-content-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    width: 400px;
    max-width: 100%;
    max-height: 100%;
    background-color: #fff;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    z-index: 2;
    overflow: hidden;
}
.optasy-overlay-v2 .optasy-overlay-content-wrapper {
    overflow: unset;
}
.optasy-overlay-v2 .optasy-overlay-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
}

:where(#optasy-overlay-delete, .optasy-overlay-login, #optasy-overlay-custom-delete) .optasy-overlay-content .description,
.optasy-overlay-v2 .optasy-overlay-content .description {
    display: flex;
    position: relative;
    margin: 20px;
    font-size: 16px;
    font-weight: 500;
    color: #2e358f;

    .date-range-container {
        display: flex;
        gap: 20px;

        .date-range-label {
            font-size: 14px;
            font-weight: 500;
            color: #495057;
            margin-bottom: 8px;
        }
    
        .date-range-input input[type="date"] {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            font-size: 14px;
            color: #212529;
            background-color: #fff;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }
    
        .date-range-input input[type="date"]:focus {
            border-color: #80bdff;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }
    }
}
.optasy-overlay-v2 .optasy-overlay-content .description.hidden {
    display: none;
}

:where(#optasy-overlay-delete, .optasy-overlay-login, #optasy-overlay-custom-delete) .optasy-overlay-content .description .count {
    display: contents;
    color: red;
    font-weight: bolder;
}
.optasy-overlay-v2 .optasy-overlay-content .custom-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px;
    padding: 10px;
    font-size: 12px;
    background-color: #edf0ff;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}
.optasy-overlay-v2 .optasy-overlay-content .custom-content.empty {
    margin: 0 20px;
    padding: 0 10px;
    background-color: unset;
}
.optasy-overlay-v2 .optasy-overlay-content .custom-content.no-margin {
    margin: 0;
}
.optasy-overlay-v2 .optasy-overlay-content .custom-content .file-holder {
    display: flex;
    gap: 10px;
    align-items: center;
    cursor: pointer;
}
.optasy-overlay-v2 .optasy-overlay-content .custom-content .file-holder:hover {
    color: #2e358f;
}
.optasy-overlay-v2 .optasy-overlay-content .custom-content .file-holder .fit-checkbox-wrapper {
    font-size: 2rem;
}
.optasy-overlay-v2 .optasy-overlay-content .custom-content .file-holder .file-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.optasy-overlay-v2 .optasy-overlay-content .custom-content .file-holder .file-name {
    width: 100%;
    height: 18px;
    flex-grow: 1;
    font-weight: 600;
    white-space: nowrap;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
}
:where(#optasy-overlay-delete, .optasy-overlay-login, #optasy-overlay-custom-delete, .optasy-overlay-v2) .optasy-overlay-content .content-btns {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 20px;
}
:where(#optasy-overlay-delete, .optasy-overlay-login, #optasy-overlay-custom-delete, .optasy-overlay-v2) .optasy-overlay-content .content-btns.hidden {
    display: none;
}
.optasy-overlay-v2 .optasy-overlay-content .content-btns .custom_fit_button.disabled {
    background-color: #ff94325c;
    pointer-events: none;
}
.optasy-overlay-v2 .optasy-overlay-content .content-btns .fit-button {
    min-width: 132px;
}

#optasy-chat-overlay-wrapper {
    position: fixed;
    display: block;
    z-index: 300;
    top: calc(100vh - 400px);
    left: calc(100vw - 300px);
    width: 300px;
    height: 400px;
}

#optasy-chat-overlay-wrapper[data-show=false] {
    display: none;
}

#optasy-chat-overlay-wrapper[data-show=true] {
    display: flex;
}

#optasy-chat-overlay-wrapper .chat-wrapper {
    position: relative;
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    overflow: hidden;
}

#optasy-chat-overlay-wrapper .chat-wrapper .chat-header {
    position: relative;
    display: flex;
    height: 60px;
    width: 100%;
    background-color: #e8eaf6;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, .15);
    z-index: 3;
    align-items: center;
    justify-content: flex-start;
}

#optasy-chat-overlay-wrapper .chat-wrapper .chat-header .chat-user-name {
    position: relative;
    display: flex;
    margin-left: 8px;
}

#optasy-chat-overlay-wrapper .chat-wrapper .chat-header .chat-user-name:after {
    position: absolute;
    top: 50%;
    right: -20px;
    margin-top: -6px;
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ccc;
}

#optasy-chat-overlay-wrapper .chat-wrapper .chat-header.online .chat-user-name:after {
    background-color: #0ea432;
}

#optasy-chat-overlay-wrapper .chat-wrapper .chat-header .chat-user-thumb {
    margin-left: 8px;
}

#optasy-chat-overlay-wrapper .chat-wrapper .chat-close {
    position: absolute;
    right: 12px;
    width: 24px;
    height: 24px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    line-height: 24px;
    background-color: #2e358f;
    font-weight: 700;
    cursor: pointer;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: color .15s linear, background-color .15s linear;
    -moz-transition: color .15s linear, background-color .15s linear;
    -ms-transition: color .15s linear, background-color .15s linear;
    -o-transition: color .15s linear, background-color .15s linear;
    transition: color .15s linear, background-color .15s linear;
}

#optasy-chat-overlay-wrapper .chat-wrapper .chat-close:hover,
#optasy-chat-overlay-wrapper .chat-wrapper .chat-close.active {
    background-color: #ff9432;
    color: #fff;
}

#optasy-chat-overlay-wrapper .chat-wrapper .chat-body {
    position: relative;
    display: flex;
    height: 300px;
    width: 100%;
    padding: 12px 12px;
    background-color: #e8eaf6;
}

#optasy-chat-overlay-wrapper .chat-wrapper .chat-footer {
    position: relative;
    display: flex;
    align-items: center;
    height: 50px;
    width: 100%;
    z-index: 3;
    background-color: #e8eaf6;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, .15);
}

#optasy-chat-overlay-wrapper .chat-wrapper .chat-footer textarea {
    height: 34px;
}

#optasy-chat-overlay-wrapper .chat-wrapper .chat-messages-list {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

#optasy-chat-overlay-wrapper .chat-wrapper .chat-message-item {
    position: relative;
    display: flex;
    padding: 10px 0px;
    align-items: flex-end;
}

#optasy-chat-overlay-wrapper .chat-wrapper .chat-message-item.show-date {
    margin-top: 40px;
}

#optasy-chat-overlay-wrapper .chat-wrapper .chat-message-item .chat-date {
    position: absolute;
    left: 0px;
    top: -20px;
    width: 100%;
    height: 20px;
    text-align: center;
    font-size: 12px;
    color: #2e358f;
    background-color: #e8eaf6;
}

#optasy-chat-overlay-wrapper .chat-wrapper .chat-message-item>.chat-user-message {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-left: 4px;
    font-size: 13px;
    background-color: #f6f6f6;
    padding: 10px;
    border-radius: 12px;
    width: 200px;
}

#optasy-chat-overlay-wrapper .chat-wrapper .chat-message-item.right {
    flex-direction: row-reverse;
    align-content: end;
}

#optasy-chat-overlay-wrapper .chat-wrapper .chat-message-item.right .chat-user-message {
    background-color: #2e358f;
    color: #fff;
}

#optasy-chat-overlay-wrapper .chat-wrapper .chat-user-thumb {
    position: relative;
    display: table;
    width: 30px;
    height: 30px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

#optasy-chat-overlay-wrapper .chat-wrapper #chat-input-message {
    min-width: 220px;
    border: 1px solid #c4c4c4;
    padding: 8px 8px;
    margin-left: 4px;
    font-size: 12px;
    font-weight: normal;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}

#optasy-chat-expand-wrapper {
    position: fixed;
    display: flex;
    z-index: 300;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    flex-direction: row;
    z-index: 500;
    background-color: rgba(0, 0, 0, .4);
}

#optasy-chat-expand-wrapper .optasy-chat-expand-overlay {
    display: flex;
    width: 100%;
    height: 100%;
}

#optasy-chat-expand-wrapper[data-expand=overlay] .optasy-chat-expand-overlay {
    width: 70%;
    margin: 0 auto;
}

#optasy-chat-expand-wrapper[data-show=false] {
    display: none;
}

#optasy-chat-expand-wrapper[data-show=true] {
    display: flex;
}

#optasy-chat-expand-wrapper .mCSB_dragger_bar {
    position: absolute;
    background-color: rgba(255, 255, 255, 0);
}

#optasy-chat-expand-wrapper .mCSB_inside>.mCSB_container {
    margin-right: 0px;
}

#optasy-chat-expand-wrapper .mCSB_scrollTools {
    z-index: 3;
}

#optasy-chat-expand-wrapper .optasy-chat-list-wrapper {
    display: flex;
    width: 20%;
    height: 100%;
    background-color: #fff;
    border: 1px solid #e8eaf6;
    flex-direction: column;
}

#optasy-chat-expand-wrapper .optasy-chat-list-holder {
    display: block;
    width: 100%;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
}

#optasy-chat-expand-wrapper .optasy-chat-list {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
}

#optasy-chat-expand-wrapper .user-chat-item {
    position: relative;
    display: flex;
    height: 40px;
    width: 100%;
    background-color: #fff;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, .15);
    z-index: 3;
    align-items: center;
    justify-content: flex-start;
    -webkit-transition: background-color .15s linear;
    -moz-transition: background-color .15s linear;
    -ms-transition: background-color .15s linear;
    -o-transition: background-color .15s linear;
    transition: background-color .15s linear;
    cursor: pointer;
}

#optasy-chat-expand-wrapper .user-chat-item .chat-user-thumb {
    position: relative;
    display: table;
    width: 40px;
    height: 40px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

#optasy-chat-expand-wrapper .user-chat-item .chat-user-thumb:after {
    position: absolute;
    bottom: 0px;
    right: 0px;
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ccc;
}

#optasy-chat-expand-wrapper .user-chat-item .chat-user-name {
    position: relative;
    display: flex;
    margin-left: 16px;
}

#optasy-chat-expand-wrapper .user-chat-item.online .chat-user-thumb:after {
    background-color: #0ea432;
}

#optasy-chat-expand-wrapper .user-chat-item .chat-user-thumb {
    margin-left: 8px;
}

#optasy-chat-expand-wrapper .user-chat-item.active,
#optasy-chat-expand-wrapper .user-chat-item:hover {
    background-color: #e8eaf6;
}

#optasy-chat-expand-wrapper .optasy-chat-message {
    width: 80%;
    height: 100%;
    box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, .2);
}

#optasy-chat-expand-wrapper .chat-wrapper {
    position: relative;
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    overflow: hidden;
}

#optasy-chat-expand-wrapper .chat-wrapper .chat-header {
    position: relative;
    display: flex;
    height: 60px;
    width: 100%;
    background-color: #fff;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, .15);
    z-index: 3;
    align-items: center;
    justify-content: flex-start;
}

#optasy-chat-expand-wrapper .chat-wrapper .chat-header .chat-user-name {
    position: relative;
    display: flex;
    margin-left: 8px;
}

#optasy-chat-expand-wrapper .chat-wrapper .chat-header .chat-user-name:after {
    position: absolute;
    top: 50%;
    right: -20px;
    margin-top: -6px;
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ccc;
}

#optasy-chat-expand-wrapper .chat-wrapper .chat-header.online .chat-user-name:after {
    background-color: #0ea432;
}

#optasy-chat-expand-wrapper .chat-wrapper .chat-header .chat-user-thumb {
    margin-left: 8px;
}

#optasy-chat-expand-wrapper .chat-wrapper .chat-close {
    position: absolute;
    right: 12px;
    width: 24px;
    height: 24px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    line-height: 24px;
    background-color: #2e358f;
    font-weight: 700;
    cursor: pointer;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: color .15s linear, background-color .15s linear;
    -moz-transition: color .15s linear, background-color .15s linear;
    -ms-transition: color .15s linear, background-color .15s linear;
    -o-transition: color .15s linear, background-color .15s linear;
    transition: color .15s linear, background-color .15s linear;
}

#optasy-chat-expand-wrapper .chat-wrapper .chat-body {
    position: relative;
    display: flex;
    min-height: 300px;
    height: 100%;
    width: 100%;
    padding: 0px 8px;
    background-color: #fff;
}

#optasy-chat-expand-wrapper .chat-wrapper .chat-footer {
    position: relative;
    display: flex;
    align-items: center;
    height: 80px;
    width: 100%;
    z-index: 3;
    background-color: #fff;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, .15);
}

#optasy-chat-expand-wrapper .chat-wrapper .chat-footer textarea {
    height: 34px;
}

#optasy-chat-expand-wrapper .chat-wrapper .chat-messages-list-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

#optasy-chat-expand-wrapper .chat-wrapper .chat-messages-list {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 24px;
}

#optasy-chat-expand-wrapper .chat-wrapper .chat-message-item {
    position: relative;
    display: flex;
    padding: 10px 0px;
    align-items: flex-end;
}

#optasy-chat-expand-wrapper .chat-wrapper .chat-message-item.show-date {
    margin-top: 40px;
}

#optasy-chat-expand-wrapper .chat-wrapper .chat-message-item .chat-date {
    position: absolute;
    left: 0px;
    top: -20px;
    width: 100%;
    height: 20px;
    text-align: center;
    font-size: 12px;
    color: #2e358f;
    background-color: #e8eaf6;
}

#optasy-chat-expand-wrapper .chat-wrapper .chat-message-item>.chat-user-message {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-left: 4px;
    font-size: 13px;
    background-color: #f6f6f6;
    padding: 10px;
    border-radius: 12px;
    width: 200px;
}

#optasy-chat-expand-wrapper .chat-wrapper .chat-message-item.right {
    flex-direction: row-reverse;
    align-content: end;
}

#optasy-chat-expand-wrapper .chat-wrapper .chat-message-item.right .chat-user-message {
    background-color: #2e358f;
    color: #fff;
}

#optasy-chat-expand-wrapper .chat-wrapper .chat-user-thumb {
    position: relative;
    display: table;
    width: 30px;
    height: 30px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

#optasy-chat-expand-wrapper .chat-wrapper #chat-input-message {
    min-width: 220px;
    width: 100%;
    min-height: 60px;
    border: 1px solid #c4c4c4;
    padding: 8px 8px;
    margin-left: 4px;
    font-size: 12px;
    font-weight: normal;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}

#dashboard-side-menu .fit-button {
    position: relative;
    display: flex;
    background-color: #ff9432;
    color: #fff;
    justify-content: center;
    text-align: center;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 700;
    margin: 40px auto;
    width: 200px;
    min-height: 80px;
    cursor: pointer;
    align-items: center;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    -webkit-transition: background-color .15s linear, color .15s linear;
    -moz-transition: background-color .15s linear, color .15s linear;
    -ms-transition: background-color .15s linear, color .15s linear;
    -o-transition: background-color .15s linear, color .15s linear;
    transition: background-color .15s linear, color .15s linear;
}

#dashboard-side-menu .fit-button:visited {
    border: none;
    background-color: #2e358f;
    color: #fff;
}

#dashboard-side-menu .fit-button:hover,
#dashboard-side-menu .fit-button:active,
#dashboard-side-menu .fit-button.active {
    background-color: #2e358f;
    color: #fff;
}

#dashboard-side-menu .fit-button.active:hover {
    background-color: #e4e8f4;
    color: #2e358f;
}

#dashboard-side-menu .fit-button>i {
    position: relative;
    font-size: 48px;
}

#dashboard-side-menu .fit-button>span {
    position: relative;
    text-align: left;
    margin-left: 10px;
    line-height: 18px;
}

.material-icons {
    font-size: 16px;
}

#optasy-dashboard .user-list-header-wrapper {
    position: relative;
    display: flex;
    justify-content: flex-end;
}

#optasy-dashboard .user-list-header-wrapper>.user-tabs {
    position: relative;
    display: flex;
    background-color: #f5f5f5;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}

#optasy-dashboard .user-list-header-wrapper>.user-tabs>.user-tab {
    position: relative;
    padding: 11px 14px;
    font-size: 12px;
    min-width: 112px;
    text-align: center;
    line-height: 18px;
    margin-left: 2px;
    background-color: #f5f5f5;
    color: #222;
    cursor: pointer;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    -webkit-transition: background-color .15s linear, color .15s linear;
    -moz-transition: background-color .15s linear, color .15s linear;
    -ms-transition: background-color .15s linear, color .15s linear;
    -o-transition: background-color .15s linear, color .15s linear;
    transition: background-color .15s linear, color .15s linear;
}

#optasy-dashboard .user-list-header-wrapper>.user-tabs>.user-tab:first-child {
    margin-left: 0px;
}

#optasy-dashboard .user-list-header-wrapper>.user-tabs>.user-tab:hover,
#optasy-dashboard .user-list-header-wrapper>.user-tabs>.user-tab.active {
    background-color: #ff9432;
    color: #fff;
}

#optasy-dashboard .user-list-content {
    position: relative;
    width: 100%;
}

#optasy-dashboard .user-list-wrapper {
    position: relative;
    margin-top: 20px;
}
#optasy-dashboard .user-list-wrapper > ul:not(.active), .user-list-wrapper > div.user-list-holder:not(.active) {
    display: none;
}

#optasy-dashboard .user-list-wrapper .user-list-header {
    position: relative;
    font-size: 12px;
    font-weight: 600;
    color: #2e358f;
    padding: 10px 20px;
    background-color: #e8eaf6;
    margin-top: 20px;
    margin-bottom: 20px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}

#optasy-dashboard .user-list-wrapper .user-list-header.active-challenges,
#optasy-dashboard .user-list-wrapper .user-list-header.active-list {
    background-color: #2e358f;
    color: #e8eaf6;
}

#optasy-dashboard .user-list-wrapper .user-list-holder,
#optasy-dashboard .user-list-wrapper .user-list-holder-all {
    position: relative;
}

#optasy-dashboard .summary-list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;

    .view-all-wrapper {
        position: relative;
        display: flex;
        align-self: flex-end;
        font-size: 12px;
    }
    .view-all {
        color: #2e358f;
        cursor: pointer;
        &:hover {
            text-decoration: underline;
        }
    }
}
#optasy-dashboard .items.summary-list {
    display: flex;
    gap: 20px;
    flex-grow: 1;
    margin-bottom: 20px;
}
#optasy-dashboard .items.summary-list .item {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    max-width: 230px;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}
#optasy-dashboard .items.summary-list .item .list-col-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
#optasy-dashboard .items.summary-list .item .list-col-info > .row {
    font-size: 12px;
}
#optasy-dashboard .items.summary-list .item .list-col-info > .row.title {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    font-weight: 500;
    margin-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
}
#optasy-dashboard .items.summary-list .item > .list-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
}
#optasy-dashboard .items.summary-list .item .list-col-controls {
    position: relative;
    display: flex;
    flex-basis: unset;
    font-size: 12px;
}
#optasy-dashboard .summary-list-wrapper[data-role=member] .items.summary-list .item .list-col-controls {
    align-self: flex-end;
    margin-top: auto;
}

#optasy-dashboard .user-list-wrapper .user-list-holder .user-list-item .list-col-controls .list-col:nth-child(2) .delete-list-item  {
    display: none;
}
#optasy-dashboard .duplicate {
    display: flex;
    fill: var(--fit-blue);
}
#optasy-dashboard .items.summary-list .item .list-col-controls .list-item-more-option {
    margin-right: -10px;
    color: #2e358f;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: all .18s linear;
    -moz-transition: all .18s linear;
    -ms-transition: all .18s linear;
    -o-transition: all .18s linear;
    transition: all .18s linear;
    cursor: pointer;
}
#optasy-dashboard .items.summary-list .item .list-col-controls:hover .list-item-more-option {
    color: #fff;
    background-color: #2e358f;
}
#optasy-dashboard .items.summary-list .item .list-col-controls > .link-btn {
    display: flex;
    align-items: flex-end;
    min-width: 29px;
    color: #2e358f;
    cursor: pointer;
}
#optasy-dashboard .summary-list-wrapper[data-role=partner] .items.summary-list .item .list-col-controls > .link-btn {
    display: none;
}
#optasy-dashboard .summary-list-wrapper .items.summary-list .item[data-type=invitation] .list-col-controls > .view.link-btn {
    display: none;
}
#optasy-dashboard .summary-list-wrapper .items.summary-list .item[data-type=challenge] .list-col-controls > .join.link-btn {
    display: none;
}
#optasy-dashboard .items.summary-list .item .list-col-controls > .link-btn:hover {
    text-decoration: underline;
}
#optasy-dashboard .items.summary-list .item .list-col-controls > .link-btn > .profile-main-loader-btn {
    background-color: unset;
}
#optasy-dashboard .items.summary-list .item .participants {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
    color: #2e358f;
    font-size: 12px;
}
#optasy-dashboard .items.summary-list .item .participants .icon {
    display: flex;
}
#optasy-dashboard .items.summary-list .item .participants svg {
    width: 20px;
    height: 20px;
}
#optasy-dashboard .items.summary-list .item .participants svg path {
    fill: #2e358f;
}
#optasy-dashboard .items.summary-list .item .number {
    display: flex;
    flex-shrink: 0;
}
#optasy-dashboard ul.regular-list {
    flex-grow: 1;
}
#optasy-dashboard .user-list-item.empty-slot,
#optasy-dashboard ul.regular-list .item.empty-slot {
    padding: 20px;
    font-size: 13px;
    background-color: #f6f9f2;
    justify-content: center;
}
#optasy-dashboard .table-row-item,
#optasy-dashboard .user-list-item {
    position: relative;
    list-style: none;
    display: flex;
    align-content: space-around;
    width: 100%;
    padding: 10px;
    margin-bottom: 8px;
    border: 1px solid #e5e5e5;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    -webkit-transition: background-color .18s linear, border-color .18s linear;
    -moz-transition: background-color .18s linear, border-color .18s linear;
    -ms-transition: background-color .18s linear, border-color .18s linear;
    -o-transition: background-color .18s linear, border-color .18s linear;
    transition: background-color .18s linear, border-color .18s linear;
}
#optasy-dashboard .table-row-item.column {
    flex-direction: column;
}
#optasy-dashboard .table-row-item.custom-border-hover {
    border: 2px solid #e8eaf6;
    -webkit-transition: border-color .18s linear, border-color .18s linear;
    -moz-transition: border-color .18s linear, border-color .18s linear;
    -ms-transition: border-color .18s linear, border-color .18s linear;
    -o-transition: border-color .18s linear, border-color .18s linear;
    transition: border-color .18s linear, border-color .18s linear;
    cursor: pointer;
}
#optasy-dashboard .table-row-item.custom-border-hover:hover {
    border-color: #b4bdf1;
}
#optasy-dashboard .table-row-item.custom-border-hover.selected {
    border-color: #2e358f;
}
#optasy-dashboard .table-row-item[data-status=opened] {
    flex-direction: column;
}
#optasy-dashboard .table-row-item[data-status=opened] .item-header {
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}
#optasy-dashboard .table-row-item[data-status=opened] .item-edit-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 0;
    overflow: hidden;
}
#optasy-dashboard .table-row-item[data-status=opened] .item-header,
#optasy-dashboard ul:not(.no-hover) > .table-row-item:not(.no-hover):not(.empty-slot):not([data-status=opened]):hover,
#optasy-dashboard ul:not(.no-hover) > .user-list-item:not(.no-hover):not(.empty-slot):not([data-status=opened]):hover {
    background: #2e358f;
    border-color: #2e358f;
}
#optasy-dashboard ul:not(.no-hover) > .table-row-item.border-hover:not(.no-hover):not(.empty-slot):not([data-status=opened]):hover,
#optasy-dashboard ul:not(.no-hover) > .user-list-item.border-hover:not(.no-hover):not(.empty-slot):not([data-status=opened]):hover {
    background: unset;
}
#optasy-dashboard .table-row-item[data-status=opened] .item-header .text,
#optasy-dashboard .table-row-item:not(.border-hover):not(.no-hover):not(.empty-slot):not([data-status=opened]):hover .text,
#optasy-dashboard .user-list-item:not(.border-hover):not(.no-hover):not(.empty-slot):not([data-status=opened]):hover .text {
    color: #fff;
}
#optasy-dashboard .table-row-item > .list-header {
    display: flex;
    align-items: center;
    gap: 20px;
    overflow: hidden;
}
#optasy-dashboard .table-row-item > .list-header > .list-col {
    display: flex;
}
#optasy-dashboard .table-row-item > .list-header > .col1 {
    flex-direction: column;
    flex-basis: 90%;
}
#optasy-dashboard .table-row-item > .list-header > .col1 .row.title {
    font-weight: 500;
    font-size: 20px;
}
#optasy-dashboard .table-row-item > .list-header > .col2 {
    flex: 1 1 10%;
}
#optasy-dashboard .table-row-item > .list-header > .radio input[type=radio] {
    min-width: 20px;
}
#optasy-dashboard .table-row-item > .list-header .view-details-btn-wrapper {
    display: flex;
}
#optasy-dashboard .table-row-item > .list-header .view-details-btn-wrapper .view-details-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: #2e358f;
}
#optasy-dashboard .table-row-item > .list-header .view-details-btn-wrapper .view-details-btn i {
    font-size: 12px;
}
#optasy-dashboard {
    ul.regular-list .item,
    .user-list-item,
    .select2-container li .item {
        .list-col-info,
        .list-col-controls {
            position: relative;
            display: flex;
            flex-direction: row;
            align-items: center;
        }
    }
}

#optasy-dashboard .user-list-item>.list-col-info,
#optasy-dashboard ul.regular-list .item .list-col-info {
    flex-grow: 1;
}
#optasy-dashboard .user-list-item .list-col-info>*,
#optasy-dashboard ul.regular-list .item .list-col-info>* {
    align-content: flex-start;
}
#optasy-dashboard .user-list-item .list-col-info .col0,
#optasy-dashboard ul.regular-list .item .list-col-info .col0 {
    flex-basis: 14%;
    justify-content: center;
}
#optasy-dashboard ul.regular-list .item .list-col-info .col0 {
    flex-basis: 6%;
}
#optasy-dashboard .user-list-item .list-col-info .col0>span,
#optasy-dashboard ul.regular-list .item .list-col-info .col0>span {
    margin-left: 10px;
}
#optasy-dashboard .user-list-item .list-col-info .col1 {
    flex-basis: 14%;
}
#optasy-dashboard ul.regular-list .item .list-col-info .col1>span {
    margin-left: 10px;
}
#optasy-dashboard .user-list-item .list-col-info .col2,
#optasy-dashboard ul.regular-list .item .list-col-info .col2 {
    flex-basis: 86%;
}
#optasy-dashboard .user-list-item .list-col-info .col2>span,
#optasy-dashboard ul.regular-list .item .list-col-info .col2>span {
    margin-left: 4px;
}
#optasy-dashboard .user-list-item .list-col-info .col3 {
    flex-basis: 20%;
}
#optasy-dashboard .user-list-item .list-col,
#optasy-dashboard ul.regular-list .item .list-col {
    position: relative;
    display: flex;
}
#optasy-dashboard .user-list-item>.list-col-info {
    justify-content: flex-start;
    flex-basis: 50%;
}

#optasy-dashboard .main-content[data-content-type=landing-page] .user-list-item .list-col-info .col1 {
    flex-basis: 6%;
}
#optasy-dashboard .main-content[data-content-type=landing-page] .user-list-item .list-col-info .col2 {
    flex-basis: 47%;   
}
#optasy-dashboard .main-content[data-content-type=landing-page] .user-list-item .list-col-info .col3 {
    flex-basis: 47%;
}
#optasy-dashboard .main-content[data-content-type=landing-page] .user-list-item>.list-col-info {
    flex-basis: 77%;    
}
#optasy-dashboard .main-content[data-content-type=landing-page] .user-list-item>.list-col-controls {
    flex-basis: 23%;
}
#optasy-dashboard .main-content[data-content-type=landing-page] ul[data-id=challenge_landing_pages] .list-col-info .col2 {
    flex-basis: 56%;
}
#optasy-dashboard .main-content[data-content-type=landing-page] ul[data-id=challenge_landing_pages] .list-col-info .col1 {
    flex-basis: 45%;
}

#optasy-dashboard .header-in-border {
    margin: 10px 0;
    border: 1px solid #e5e5e5;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}
#optasy-dashboard .options-level-content .header-in-border {
    border-color: #2e358f36;
}
#optasy-dashboard .header-in-border > :is(*, .section-options) {
    margin-top: -24px;
    padding: 10px 20px 20px 20px;
}
#optasy-dashboard .header-in-border > * .border-title {
    display: inline;
    padding: 0 2px;
    color: #757575;
    background-color: #fff;
    font-size: 14px;
    font-weight: 600;
}
#optasy-dashboard .options-level-content .header-in-border > * .border-title {
    color: #2e358f;
    background-color: #edf0ff;
}
#optasy-dashboard .header-in-border > :is(*, .section-options) > :is(*, .section-option) {
    margin-top: 10px;
}
#optasy-dashboard .header-in-border > * .fit-button {
    margin-left: unset;
}

#optasy-dashboard .main-content-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    font-size: 16px;
    color: #2e358f;
    text-align: center;
    line-height: 40px;
    background-color: #e4e8f4;
    font-weight: 700;
    cursor: pointer;
    z-index: 10;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: color .15s linear, background-color .15s linear;
    -moz-transition: color .15s linear, background-color .15s linear;
    -ms-transition: color .15s linear, background-color .15s linear;
    -o-transition: color .15s linear, background-color .15s linear;
    transition: color .15s linear, background-color .15s linear;
}
#optasy-dashboard .main-content-close:hover {
    color: #fff;
    background-color: #ff9432;
}

#optasy-dashboard :where(.user-list-item, .item) .list-col-controls {
    justify-content: flex-end;
    flex-basis: 50%;
}

#optasy-dashboard .user-list-item>.list-col-controls>.list-col {
    margin-left: 20px;
}

#optasy-dashboard .user-list-item>.list-col-controls>.list-col:first-child {
    margin-left: 0;
}

#optasy-dashboard .user-list-item>.list-col-controls>.list-col .fit-button:not(.fit-button) {
    background-color: #415dc1;
}

#optasy-dashboard .user-list-item.questions>.list-col-info {
    flex-basis: 90%;
}

#optasy-dashboard .user-list-item.questions>.list-col-info>.col1 {
    flex-basis: 10%;
}

#optasy-dashboard .user-list-item.questions>.list-col-info>.col2 {
    flex-basis: 90%;
}

#optasy-dashboard .user-list-item.questions>.list-col-controls {
    flex-basis: 10%;
}

#optasy-dashboard .user-list-item[data-active_user=true] [data-status=false] {
    display: none;
}

#optasy-dashboard .user-list-item[data-active_user=false] [data-status=true] {
    display: none;
}

.chart-item-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
}
.chart-item-wrapper .progress {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 33%;
    min-width: 136px;
    max-width: 100%;
}
.chart-item-wrapper .progress:nth-child(3n+0) {
    margin-right: 0px;
}
.chart-item-wrapper .progress>.progress-svg {
    position: relative;
    height: 100px;
}
.chart-item-wrapper .progress>.progress-svg>span.percentage {
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    font-style: normal;
    font-weight: 200;
    line-height: 36px;
    letter-spacing: 0em;
    text-align: left;
    z-index: 1;
    -webkit-transition: color .18s linear;
    -moz-transition: color .18s linear;
    -ms-transition: color .18s linear;
    -o-transition: color .18s linear;
    transition: color .18s linear;
}
.chart-item-wrapper .progress>.progress-svg>svg {
    height: 100%;
    display: block;
}
.chart-item-wrapper .progress>.progress-svg>svg path {
    -webkit-transition: stroke .18s linear;
    -moz-transition: stroke .18s linear;
    -ms-transition: stroke .18s linear;
    -o-transition: stroke .18s linear;
    transition: stroke .18s linear;
}
.chart-item-wrapper .progress>.progress-svg svg path:not(:first-child) {
    stroke: #2e358f;
    fill: #e8eaf6;
}
.chart-item-wrapper .progress>.progress-svg.negative svg path:not(:first-child) {
    stroke: red;
    fill: #ffe5e5;
}
.chart-item-wrapper .progress>span.description {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    order: 2;
    color: #2e358f;
    font-size: 100%;
    font-weight: 700;
    -webkit-transition: color .18s linear;
    -moz-transition: color .18s linear;
    -ms-transition: color .18s linear;
    -o-transition: color .18s linear;
    transition: color .18s linear;
}
.chart-item-wrapper .progress>span.description .row {
    font-weight: 700;
}

.material-icons {
    font-family: "Material Icons";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga";
    vertical-align: middle;
}

.recipe-title {
    position: relative;
    width: 100%;
    font-size: 16px;
    font-weight: 700;
    color: #ff9432;
    margin-top: 35px;
}

.recipe-title.title {
    font-size: 32px;
    color: #2e358f;
}

.recipe-description {
    padding: 24px 20px 24px 20px;
    position: relative;
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    color: #1e1e1e;
}

.recipe-ingredient {
    padding: 24px 20px 24px 20px;
    position: relative;
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    color: #1e1e1e;
}

.recipe-ingredient .ingredient {
    position: relative;
    padding-left: 40px;
}

.recipe-ingredient .ingredient:not(:first-child) {
    margin-top: 20px;
}

.recipe-ingredient .ingredient:before {
    content: "";
    position: absolute;
    display: block;
    left: 10px;
    top: 50%;
    width: 10px;
    height: 10px;
    background-color: #2e358f;
    border-radius: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

@keyframes introjspulse {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    25% {
        transform: scale(0);
        opacity: .1;
    }
    50% {
        transform: scale(0.1);
        opacity: .3;
    }
    75% {
        transform: scale(0.5);
        opacity: .5;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.introjs-overlay {
    position: absolute;
    box-sizing: content-box;
    z-index: 999999;
    background-color: #212121;
    opacity: 0;
    background: radial-gradient(center, ellipse farthest-corner, rgba(33, 33, 33, 0.5) 0, rgba(33, 33, 33, 0.9) 100%);
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000',endColorstr='#e6000000',GradientType=1)";
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    transition: all .3s ease-out;
}

.introjs-fixParent {
    z-index: auto !important;
    opacity: 1 !important;
    transform: none !important;
}

.introjs-showElement {
    z-index: 9999999 !important;
}

tr.introjs-showElement>td {
    z-index: 9999999 !important;
    position: relative;
}

tr.introjs-showElement>th {
    z-index: 9999999 !important;
    position: relative;
}

.introjs-disableInteraction {
    z-index: 99999999 !important;
    position: absolute;
    background-color: #fff;
    opacity: 0;
    filter: alpha(opacity=0);
}

.introjs-relativePosition {
    position: relative;
}

.introjs-helperLayer {
    box-sizing: content-box;
    position: absolute;
    z-index: 9999998;
    background-color: rgba(255, 255, 255, .9);
    border: 1px solid rgba(33, 33, 33, .5);
    border-radius: 4px;
    box-shadow: 0 2px 15px rgba(33, 33, 33, .4);
    transition: all .3s ease-out;
}

.introjs-helperLayer * {
    box-sizing: content-box;
}

.introjs-helperLayer *:before {
    box-sizing: content-box;
}

.introjs-helperLayer *:after {
    box-sizing: content-box;
}

.introjs-tooltipReferenceLayer {
    box-sizing: content-box;
    position: absolute;
    visibility: hidden;
    z-index: 100000000;
    background-color: transparent;
    transition: all .3s ease-out;
}

.introjs-helperNumberLayer {
    box-sizing: content-box;
    position: absolute;
    visibility: visible;
    top: -16px;
    left: -16px;
    z-index: 9999999999 !important;
    padding: 2px;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(33, 33, 33, .3);
    background-color: #e4e8f4;
    color: #2e358f;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(33, 33, 33, .4);
}

.introjs-arrow {
    border: 10px solid transparent;
    content: "";
    position: absolute;
}

.introjs-arrow.top {
    top: -19px;
    border-bottom-color: #fff;
}

.introjs-arrow.top-right {
    top: -20px;
    right: 20px;
    border-bottom-color: #fff;
}

.introjs-arrow.top-middle {
    top: -20px;
    left: 50%;
    margin-left: -10px;
    border-bottom-color: #fff;
}

.introjs-arrow.right {
    right: -19px;
    top: 20px;
    border-left-color: #fff;
}

.introjs-arrow.right-bottom {
    bottom: 20px;
    right: -210px;
    border-left-color: #fff;
}

.introjs-arrow.bottom {
    bottom: -20px;
    border-top-color: #fff;
}

.introjs-arrow.bottom-right {
    bottom: -20px;
    right: 20px;
    border-top-color: #fff;
}

.introjs-arrow.bottom-middle {
    bottom: -20px;
    left: 50%;
    margin-left: -10px;
    border-top-color: #fff;
}

.introjs-arrow.left {
    left: -19px;
    top: 20px;
    border-right-color: #fff;
}

.introjs-arrow.left-bottom {
    left: -20px;
    bottom: 20px;
    border-right-color: #fff;
}

.introjs-tooltip {
    box-sizing: content-box;
    position: absolute;
    visibility: visible;
    padding: 10px;
    background-color: #fff;
    min-width: 200px;
    max-width: 300px;
    border-radius: 3px;
    box-shadow: 0 1px 10px rgba(33, 33, 33, .4);
    transition: opacity .1s ease-out;
    display: flex;
    flex-direction: column;
}

.introjs-tooltipbuttons {
    text-align: right;
    white-space: nowrap;
    display: flex;
    margin-top: 10px;
}

.introjs-button {
    position: relative;
    display: block;
    background-color: #e4e8f4;
    color: #2e358f;
    text-align: center;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 700;
    line-height: 30px;
    text-transform: uppercase;
    width: 100px;
    margin-left: 20px;
    min-height: 50px;
    cursor: pointer;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    -webkit-transition: background-color .15s linear, color .15s linear;
    -moz-transition: background-color .15s linear, color .15s linear;
    -ms-transition: background-color .15s linear, color .15s linear;
    -o-transition: background-color .15s linear, color .15s linear;
    transition: background-color .15s linear, color .15s linear;
}

.introjs-button:first-child {
    margin-left: 0px;
}

.introjs-button.small {
    min-width: 54px;
}

.introjs-button.normal {
    width: 100px;
}

.introjs-button:visited {
    border: none;
    background-color: #ff9432;
    color: #fff;
}

.introjs-button:hover,
.introjs-button:active,
.introjs-button .active {
    background-color: #ff9432;
    color: #fff;
}

.introjs-disabled {
    color: #9e9e9e;
    border-color: #bdbdbd;
    box-shadow: none;
    cursor: default;
    background-color: #f4f4f4;
    background-image: none;
    text-decoration: none;
}

.introjs-disabled:hover {
    color: #9e9e9e;
    border-color: #bdbdbd;
    box-shadow: none;
    cursor: default;
    background-color: #f4f4f4;
    background-image: none;
    text-decoration: none;
}

.introjs-disabled:focus {
    color: #9e9e9e;
    border-color: #bdbdbd;
    box-shadow: none;
    cursor: default;
    background-color: #f4f4f4;
    background-image: none;
    text-decoration: none;
}

.introjs-hidden {
    display: none;
}

.introjs-bullets {
    text-align: center;
    display: none;
}

.introjs-bullets ul {
    box-sizing: content-box;
    clear: both;
    margin: 15px auto 0;
    padding: 0;
    display: inline-block;
}

.introjs-bullets ul li {
    box-sizing: content-box;
    list-style: none;
    float: left;
    margin: 0 2px;
}

.introjs-bullets ul li a {
    box-sizing: content-box;
    display: block;
    width: 6px;
    height: 6px;
    background: #ccc;
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
}

.introjs-bullets ul li a:hover {
    background: #999;
}

.introjs-bullets ul li a.active {
    background: #999;
}

.introjs-progress {
    box-sizing: content-box;
    overflow: hidden;
    height: 10px;
    margin: 10px 0 5px 0;
    border-radius: 4px;
    background-color: #e0e0e0;
}

.introjs-progressbar {
    box-sizing: content-box;
    float: left;
    width: 0%;
    height: 100%;
    font-size: 10px;
    line-height: 10px;
    text-align: center;
    background-color: #08c;
}

.introjsFloatingElement {
    position: absolute;
    height: 0;
    width: 0;
    left: 50%;
    top: 50%;
}

.introjs-fixedTooltip {
    position: fixed;
}

.introjs-hint {
    box-sizing: content-box;
    position: absolute;
    background: transparent;
    width: 20px;
    height: 15px;
    cursor: pointer;
}

.introjs-hint:focus {
    border: 0;
    outline: 0;
}

.introjs-hint:hover>.introjs-hint-pulse {
    border: 5px solid rgba(60, 60, 60, .57);
}

.introjs-hidehint {
    display: none;
}

.introjs-fixedhint {
    position: fixed;
}

.introjs-hint-pulse {
    box-sizing: content-box;
    width: 10px;
    height: 10px;
    border: 5px solid rgba(60, 60, 60, .27);
    border-radius: 30px;
    background-color: rgba(136, 136, 136, .24);
    z-index: 10;
    position: absolute;
    transition: all .2s ease-out;
}

.introjs-hint-no-anim .introjs-hint-dot {
    animation: none;
}

.introjs-hint-dot {
    box-sizing: content-box;
    border: 10px solid rgba(146, 146, 146, .36);
    background: transparent;
    border-radius: 60px;
    height: 50px;
    width: 50px;
    animation: introjspulse 3s ease-out;
    animation-iteration-count: infinite;
    position: absolute;
    top: -25px;
    left: -25px;
    z-index: 1;
    opacity: 0;
}

#optasy-dashboard .main-content .type-content.hide,
#optasy-dashboard #dashboard-main-content .main-content .questionnaires .content-section.hide {
    display:  none;
}

#optasy-dashboard .type-content>.content-section>.section-options>.section-option>.options-holder>.option.checkbox {
    gap: 10px;
}
#optasy-dashboard .type-content>.content-section>.section-options>.section-option>.options-holder>.option.checkbox .checkbox-label {
    display: flex;
    align-items: center;
    font-size: 12px;
}
#optasy-dashboard .type-content>.content-section>.section-options>.section-option>.options-holder>.option.checkbox .checkbox-label .waiver-link {
    color: #2e358f;
    font-weight: 600;
    cursor: pointer;
}

#optasy-dashboard .fit-disabled {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: .45;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    z-index: 10;
}
#optasy-dashboard .fit-disabled .label {
    font-size: 40px;
    font-weight: 600;
    padding: 20px;
    text-align: center;
    color: #fff;
}

#optasy-dashboard .checkbox.custom_fit_button {
    cursor: pointer;
}

#optasy-dashboard .main-content[data-content-type=shop-member] .three-column-options {
    justify-content: center;
}
#optasy-dashboard .main-content[data-content-type=shop-member] .three-column-options > div {
    min-width: 250px;
}
#optasy-dashboard .main-content[data-content-type=shop-member] .three-column-options .shop-no-items {
    width: 100%;
}
#optasy-dashboard .main-content[data-content-type=shop-member] .opt-option-wrapper .opt-option-image {
    padding-bottom: 10px;
}
#optasy-dashboard .main-content[data-content-type=shop-member] .opt-option-wrapper .shop-item-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}
#optasy-dashboard .main-content[data-content-type=shop-member] .opt-option-wrapper .shop-item-name {
    font-size: 20px;
    text-align: center;
}
#optasy-dashboard .main-content[data-content-type=shop-member] .opt-option-wrapper .shop-item-name a {
    color: #222;
}
#optasy-dashboard .main-content[data-content-type=shop-member] .opt-option-wrapper .shop-item-description {
    font-size: 12px;
    text-align: center;
    font-weight: normal;
}
#optasy-dashboard .main-content[data-content-type=shop-member] .opt-option-wrapper .prices {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 25px;
    color: #222;
}
#optasy-dashboard .main-content[data-content-type=shop-member] .opt-option-wrapper .prices .current {
    font-size: 25px;
    font-weight: 700;
}
#optasy-dashboard .main-content[data-content-type=shop-member] .opt-option-wrapper .prices .previous {
    font-size: 25px;
    font-weight: normal;
    background: linear-gradient(-15deg, transparent 50%, red, transparent 55%);
}

#optasy-dashboard .main-content[data-content-type=shop] .type-content .product-holder {
    justify-content: center;
}
#optasy-dashboard .main-content[data-content-type=shop] .type-content .item-description-wrapper {
    width: 100%;
    max-width: unset;
}
#optasy-dashboard .main-content[data-content-type=shop] .type-content .item-description-wrapper .item-description-label {
    margin-top: 20px;
}
#optasy-dashboard .main-content[data-content-type=shop] .type-content .item-description-wrapper .item-description {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 60px;
    padding: 20px;
    white-space: pre-wrap;
    cursor: text;
    border: 1px solid #c4c4c4;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}
#optasy-dashboard .main-content[data-content-type=shop] .section-options :where(.select-wellness, .select2-wellness:not(select)) {
    padding: 14px;
    line-height: 1.03;
}
#optasy-dashboard .main-content[data-content-type=shop] .type-content .custom_fit_button[data-id=save_shop_item] {
    margin-left: unset;
    margin-top: 20px;
}
#optasy-dashboard .main-content[data-content-type=shop] .type-content .regular-list .table-row-item.shop:not(.empty-slot:last-child) {
    padding: 0;
    margin-bottom: 20px;
}
#optasy-dashboard .main-content[data-content-type=shop] .regular-list .table-row-item.empty-slot {
    align-items: center;
    min-height: 130px;
}
#optasy-dashboard .main-content[data-content-type=shop] .type-content .regular-list .table-row-item .item-header {
    display: flex;
    flex-basis: 100%;
}
#optasy-dashboard .main-content[data-content-type=shop] .type-content .regular-list .table-row-item .list-col-info {
    gap: 20px;
    flex-basis: 95%;
}
#optasy-dashboard .main-content[data-content-type=shop] .type-content .regular-list .table-row-item .list-col-info .shop-item-image {
    width: 100%;
    height: 100%;
    min-width: 130px;
    min-height: 130px;
    object-fit: cover;
    object-position: center;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}
#optasy-dashboard .main-content[data-content-type=shop] .type-content .regular-list .table-row-item .list-col-info .col1 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 0;
}
#optasy-dashboard .main-content[data-content-type=shop] .type-content .regular-list .table-row-item .list-col-info .col1 .shop-item-name {
    font-size: 20px;
    font-weight: 600;
}
#optasy-dashboard .main-content[data-content-type=shop] .type-content .regular-list .table-row-item .list-col-info .shop-item-url {
    display: none;
}
#optasy-dashboard .main-content[data-content-type=shop] .type-content .regular-list .table-row-item .list-col-info .col1 .shop-item-description {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
}
#optasy-dashboard .main-content[data-content-type=shop] .type-content .regular-list .table-row-item .list-col-info .col1 .prices {
    display: flex;
    gap: 10px;
    font-size: 25px;
}
#optasy-dashboard .main-content[data-content-type=shop] .type-content .regular-list .table-row-item .list-col-info .col1 .prices .current {
    font-size: 25px;
    font-weight: 700;
}
#optasy-dashboard .main-content[data-content-type=shop] .type-content .regular-list .table-row-item .list-col-info .col1 .prices .previous {
    font-size: 25px;
    font-weight: normal;
    background: linear-gradient(-15deg, transparent 50%, red, transparent 55%);
}
#optasy-dashboard .main-content[data-content-type=shop] .type-content .regular-list .item .list-col-controls {
    align-items: flex-start;
}
#optasy-dashboard .main-content[data-content-type=shop] .type-content .regular-list .item[data-status=opened] .item-edit-wrapper .edit-btns {
    display: flex;
    justify-content: flex-end;
}
#optasy-dashboard .main-content[data-content-type=shop] .type-content .regular-list .item[data-status=opened] .item-edit-wrapper .edit-btns .custom_fit_button[data-id=cancel_shop_edit_item] {
    align-self: center;
    background-color: unset;
    min-width: unset;
    margin-left: 10px;
    min-height: unset;
    padding: 5px 10px;
}
#optasy-dashboard .main-content[data-content-type=shop] .type-content .regular-list .item[data-status=opened] .item-edit-wrapper .edit-btns .custom_fit_button[data-id=cancel_shop_edit_item]:hover {
    color: unset;
    text-decoration: underline;
}

#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type.item {
    border: 1px solid #e5e5e5;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type.item>.type-header {
    align-items: unset;
    justify-content: unset;
    padding: unset;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper .wellness-type.item>.type-header .type-header-content {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-basis: 91%;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper.update-programs>.wellness-type.item>.type-header>.type-header-options {
    height: 100%;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper.update-programs>.wellness-type.item>.type-header>.type-header-options .list-col,
#optasy-dashboard .main-content[data-content-type=shop] .type-content .regular-list .item .list-col-controls .list-col {
    display: flex;
    flex-direction: column;
    height: 100%;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper.update-programs>.wellness-type.item>.type-header>.type-header-options .list-col.center,
#optasy-dashboard .main-content[data-content-type=shop] .type-content .regular-list .item .list-col-controls .list-col.center {
    justify-content: center;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper.update-programs>.wellness-type.item>.type-header>.type-header-options .list-col .list-row,
#optasy-dashboard .regular-list .item .list-col-controls .list-col .list-row {
    height: 100%;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper.update-programs>.wellness-type.item>.type-header>.type-header-options .list-col .row1,
#optasy-dashboard .regular-list .item .list-col-controls .list-col .row1 {
    display: flex;
    align-items: flex-end;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper.update-programs>.wellness-type.item>.type-header>.type-header-options .list-col .fit-button:not(.regular),
#optasy-dashboard .main-content[data-content-type=shop] .type-content .regular-list .item .list-col-controls .list-col .fit-button:not(.regular) {
    min-width: 42px;
    width: 42px;
    height: 42px;
    margin-left: 0;
    -webkit-border-radius: 0 14px;
    -moz-border-radius: 0 14px;
    border-radius: 0 14px;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper.update-programs>.wellness-type.item>.type-header>.type-header-options .list-col .fit-button.top-right {
    -webkit-border-radius: 0 14px;
    -moz-border-radius: 0 14px;
    border-radius: 0 14px;
}
#optasy-dashboard .main-content[data-content-type=shop] .type-content .regular-list .item .list-col-controls .list-col .fit-button.bottom-right {
    -webkit-border-radius: 14px 0;
    -moz-border-radius: 14px 0;
    border-radius: 14px 0;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper.update-programs>.wellness-type.item[data-status=opened]>.type-header>.type-header-options .list-col.save {
    padding: 20px;
}
#optasy-dashboard #dashboard-holder #dashboard-content #dashboard-main-content-wrapper #dashboard-main-content>.main-content .wellness-type-wrapper.update-programs>.wellness-type.item[data-status=opened]>.type-header>.type-header-options .delete-list-item {
    display: none;
}

#optasy-dashboard .content-wellness .user-list-content .user-list-wrapper .empty-message {
    padding-left: 20px;   
}

#optasy-dashboard .main-content[data-content-type=members-list] .three-column-options {
    flex-wrap: unset;
}
#optasy-dashboard .main-content[data-content-type=members-list] .three-column-options .opt-option-wrapper {
    width: 28%;
}
#optasy-dashboard .main-content[data-content-type=members-list] .three-column-options .opt-option-wrapper.btn {
    width: 6%;
}
#optasy-dashboard .main-content[data-content-type=members-list] .three-column-options .opt-option-wrapper.btn .opt-option-field {
    max-height: 47px;
}
#optasy-dashboard .main-content[data-content-type=members-list] .three-column-options .opt-option-wrapper.btn .opt-option-field .custom_fit_button {
    min-width: unset;
    min-height: 47px;
    line-height: unset;
    display: flex;
    align-items: center;
    justify-content: center;
}

#optasy-dashboard .main-content[data-content-type=members-list] .user-list-item:not(.empty-slot) {
    padding: 0;
}
#optasy-dashboard .main-content[data-content-type=members-list] .user-list-item .list-col-info {
    flex-basis: 80%;
    gap: 20px;
    padding: 10px 0;
}
#optasy-dashboard .main-content[data-content-type=members-list] .user-list-item .col0 {
    flex-basis: 10%;
}
#optasy-dashboard .main-content[data-content-type=members-list] .user-list-item .col1 {
    flex-basis: 5%;
}
#optasy-dashboard .main-content[data-content-type=members-list] .user-list-item .col2 {
    flex-direction: column;
    flex-basis: 30%;
}
#optasy-dashboard .main-content[data-content-type=members-list] .user-list-item :where(.col1, .col2) .row.title {
    font-weight: 700;
}
#optasy-dashboard .main-content[data-content-type=members-list] .user-list-item :where(.col1, .col2) .row:not(.title) {
    font-size: 12px;
}
#optasy-dashboard .main-content[data-content-type=members-list] .user-list-item .col3 {
    flex-basis: 25%;
    flex-direction: column;
}
#optasy-dashboard .main-content[data-content-type=members-list] .user-list-item .col4 {
    flex-basis: 25%;
    flex-direction: column;
}
#optasy-dashboard .main-content[data-content-type=members-list] .user-list-item .list-col .row.ch-count {
    display: flex;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
}
#optasy-dashboard .main-content[data-content-type=members-list] .user-list-item .list-col .row.ch-label {
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: 12px;
    line-height: 1;
}
#optasy-dashboard .main-content[data-content-type=members-list] .user-list-item .list-col-controls {
    flex-basis: 20%;
    align-items: flex-start;
}
#optasy-dashboard .main-content[data-content-type=members-list] .user-list-item .list-col-controls .list-item-more-option {
    min-width: 35px;
    border-radius: 0 14px;
}

#optasy-dashboard .main-content[data-content-type=invitations] .user-list-item .list-col-info .col1 {
    flex-direction: column;
    flex-basis: 73%;
    flex-grow: 1;
}
#optasy-dashboard .main-content[data-content-type=invitations] .user-list-item .list-col-info .col1 > .row.title {
    font-weight: 700;
}
#optasy-dashboard .main-content[data-content-type=invitations] .user-list-item .list-col-info .col1 > .row.list-col-info-details {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
#optasy-dashboard .main-content[data-content-type=invitations] .user-list-item .list-col-info .col1 > .row.list-col-info-details .col1 {
    min-width: 150px;
    flex-direction: column;
    flex-basis: 25%;
    font-weight: 500;
}
#optasy-dashboard .main-content[data-content-type=invitations] .user-list-item .list-col-info .col1 > .row.list-col-info-details .col1 .challenge-info {
    display: flex;
    flex-direction: column;
    min-width: 150px;
    font-size: 12px;
}
#optasy-dashboard .user-list-item .list-col-info .list-col-info-details .row.wellness-icons {
    display: flex;
    gap: 5px;
}
#optasy-dashboard .user-list-item.ch1 .list-col-info .list-col-info-details .wellness :where(.wellness-icon:hover, .wellness-icon.hovered),
#optasy-dashboard .user-list-item.ch1 .wellness .program-guides-wrapper {
    border-color: var(--ch1-color);
    background-color: var(--ch1-color);
}
#optasy-dashboard .user-list-item.ch2 .list-col-info .list-col-info-details .wellness :where(.wellness-icon:hover, .wellness-icon.hovered),
#optasy-dashboard .user-list-item.ch2 .wellness .program-guides-wrapper {
    border-color: var(--ch2-color);
    background-color: var(--ch2-color);
}
#optasy-dashboard .user-list-item.ch3 .list-col-info .list-col-info-details .wellness :where(.wellness-icon:hover, .wellness-icon.hovered),
#optasy-dashboard .user-list-item.ch3 .wellness .program-guides-wrapper {
    border-color: var(--ch3-color);
    background-color: var(--ch3-color);
}
#optasy-dashboard .user-list-item.ch1 .list-col-info .list-col-info-details .wellness .wellness-icon svg path:not(.plate-inside) {
    fill: #ff9432;
}
#optasy-dashboard .user-list-item.ch2 .list-col-info .list-col-info-details .wellness .wellness-icon svg path:not(.plate-inside) {
    fill: #2e358f;
}
#optasy-dashboard .user-list-item.ch3 .list-col-info .list-col-info-details .wellness .wellness-icon svg path:not(.plate-inside) {
    fill: #1da7c4;
}
#optasy-dashboard .user-list-item.ch1 .wellness .program-guides-wrapper .program-guides .program-guide:hover {
    background-color: var(--ch1-color);
}
#optasy-dashboard .user-list-item.ch2 .wellness .program-guides-wrapper .program-guides .program-guide:hover {
    background-color: var(--ch2-color);
}
#optasy-dashboard .user-list-item.ch3 .wellness .program-guides-wrapper .program-guides .program-guide:hover {
    background-color: var(--ch3-color);
}

#optasy-dashboard .main-content[data-content-type=loaded-content] .user-list-item .list-col-info {
    flex-basis: 100%;
}
#optasy-dashboard .main-content[data-content-type=loaded-content] .user-list-item .list-col-info .chart-item-wrapper .percentage {
    color: #2e358f;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
}
#optasy-dashboard .main-content[data-content-type=loaded-content] .user-list-item .list-col-info .chart-item-wrapper .percentage .success-placeholder {
    font-size: 10px;
    padding-bottom: 5px;
}

#optasy-dashboard .main-content[data-content-type=loaded-content] .content-wellness[data-id=all_challenges] .user-list-item .list-col-info .col1 {
    flex-direction: column;
    align-self: flex-start;
    flex-basis: 25%;
    min-width: 150px;
}
#optasy-dashboard .main-content[data-content-type=loaded-content] .content-wellness[data-id=all_challenges] .user-list-item .list-col-info .col1 .row:not(.title) {
    font-weight: 400;
    font-size: 12px;
}
#optasy-dashboard .main-content[data-content-type=loaded-content] .content-wellness[data-id=all_challenges] .user-list-item .list-col-info .col1 .row.title {
    font-weight: 700;
}
#optasy-dashboard .main-content[data-content-type=loaded-content] .content-wellness[data-id=all_challenges] .user-list-item .list-col-info .col2 {
    flex-basis: 55%;
}
#optasy-dashboard .main-content[data-content-type=loaded-content] .content-wellness[data-id=all_challenges] .user-list-item .list-col-info .col3 {
    flex-basis: 20%;
}

#optasy-dashboard .fit-pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
#optasy-dashboard .fit-pagination-wrapper .load-more-btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 80px;
    color: #2e358f;
    font-size: 12px;
    padding: 10px 20px;
    border: 1px solid #2e358f;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    cursor: pointer;
}
#optasy-dashboard .fit-pagination-wrapper .load-more-btn .profile-main-loader-btn {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}
#optasy-dashboard .fit-pagination-wrapper .header {
    display: flex;
    justify-content: center;
    gap: 10px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}
#optasy-dashboard .fit-pagination-wrapper .header > .arrow,
#optasy-dashboard .fit-pagination-wrapper .header > .numbers .number {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    min-width: 35px;
    height: 35px;
    color: #2e358f;
    font-size: 12px;
    cursor: pointer;
}
#optasy-dashboard .fit-pagination-wrapper .header > .arrow.ft-disabled {
    opacity: .4;
}
#optasy-dashboard .fit-pagination-wrapper .header .profile-main-loader-btn {
    background-color: transparent;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}
#optasy-dashboard .fit-pagination-wrapper .header > .numbers {
    position: relative;
    display: grid;
    grid-auto-columns: 45px;
    grid-auto-flow: column;
    max-width: 125px;
    overflow: hidden;
}
#optasy-dashboard .fit-pagination-wrapper .header > .numbers .selected {
    position: absolute;
    left: 0;
    top: 50%;
    width: 35px;
    min-width: 35px;
    height: 35px;
    color: #fff;
    -webkit-border: 1px solid #2e358f;
    -moz-border: 1px solid #2e358f;
    border: 1px solid #2e358f;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    /* z-index: -1; */
    transform: translateY(-50%);
}
#optasy-dashboard .fit-pagination-wrapper .header > .numbers .number[data-position="0"] {
    cursor: default;
}

#optasy-dashboard .main-content[data-content-type=your_partner] .partner-info-wrapper .partner-name {
    line-height: 1;
    font-size: 20px;
    font-weight: 700;
}

#user_switching_switch_on {
    display: none;
}

#optasy-dashboard .notification-banners .notification-banner {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    padding: 3px 10%;
    background-color: #ff9432;
    box-shadow: 2px 1px 5px #0009;
    z-index: 3;
}
#optasy-dashboard .notification-banners .notification-banner .content {
    display: flex;
    column-gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    color: #fff;
}
#optasy-dashboard .notification-banners .notification-banner .notif-text {
    text-align: center;
}
#optasy-dashboard .notification-banners .notification-banner .custom_fit_button {
    font-weight: bold;
    cursor: pointer;
}
#optasy-dashboard .notification-banners .notification-banner .custom_fit_button:not(.notif-close):hover {
    text-decoration: underline;
}
#optasy-dashboard .notification-banners .notification-banner .notif-btn {
    white-space: nowrap;
}
#optasy-dashboard .notification-banners .notification-banner .notif-close {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 20px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    color: #fff;
    border: 1px solid;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    transform: translate(0, -50%);
    -webkit-transition: color .15s linear,background-color .15s linear;
    -moz-transition: color .15s linear,background-color .15s linear;
    -ms-transition: color .15s linear,background-color .15s linear;
    -o-transition: color .15s linear,background-color .15s linear;
    transition: color .15s linear,background-color .15s linear;
    z-index: 1;
    cursor: pointer;
}
#optasy-dashboard #dashboard-top-nav .notification-banner .notif-close:hover {
    color: #ff9432;
    background-color: #fff;
    border: none;
}

#optasy-dashboard .wellness .wellness-icon {
    position: relative;
    display: flex;
    justify-content: center;
    width: 30px;
    height: 28px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    -webkit-transition: transform .15s linear;
    -moz-transition: transform .15s linear;
    -ms-transition: transform .15s linear;
    -o-transition: transform .15s linear;
    transition: transform .15s linear;
    z-index: 2;
}
#optasy-dashboard .wellness .wellness-icon.hovered {
    -webkit-border-radius: 7px 7px 0 0;
    -moz-border-radius: 7px 7px 0 0;
    border-radius: 7px 7px 0 0;
}
#optasy-dashboard .wellness :where(.wellness-icon:hover, .wellness-icon.hovered) {
    padding: 4px;
}
#optasy-dashboard .wellness :where(.wellness-icon:hover, .wellness-icon.hovered) {
    transform: scale(1.7);
}
#optasy-dashboard .wellness :where(.wellness-icon:hover, .wellness-icon.hovered) svg path:not(.plate-inside) {
    fill: #fff !important;
}
#optasy-dashboard .wellness .program-guides-wrapper {
    position: absolute;
    border: 1px solid;
    border-radius: 10px;
    z-index: 1;
    box-shadow: 1px 1px 6px rgb(0 0 0 / 45%);
    visibility: hidden;
    .program-guides {
        background-color: #fff;
        border-radius: 10px;
        &:not(:nth-last-child(1 of .program-guides)) {
            border-bottom: 2px solid var(--fit-orange);
        }
        .program-guide {
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            max-width: 120px;
            padding: 5px 10px;
            text-align: center;
            font-size: 12px;
            border-radius: 7px;
            overflow: hidden;
            text-overflow: ellipsis;
            &:hover {
                color: var(--fit-white);
            }
        }
    }
}

#optasy-dashboard .wellness-components-wrapper {
    display: flex;
    margin-bottom: 30px;
}
#optasy-dashboard .wellness-components-wrapper .empty-message {
    font-size: 14px;
}
#optasy-dashboard .wellness-components-wrapper .wellness-components {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    gap: 20px;
    margin-top: 20px;
}
#optasy-dashboard .wellness-components-wrapper .wellness-components > .wellness-component {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 10px 30px;
    color: #2e358f;
    background-color: #e8eaf6;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}
#optasy-dashboard :where(.wellness-components-wrapper .wellness-components > .wellness-component) .edit-wrapper {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, .8);
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    opacity: 0;
    transform: translate(-50%, -50%);
    -webkit-transition: all .15s linear;
    -moz-transition: all .15s linear;
    -ms-transition: all .15s linear;
    -o-transition: all .15s linear;
    transition: all .15s linear;
}
#optasy-dashboard :where(.wellness-components-wrapper .wellness-components > .wellness-component) :is(.edit-wrapper:hover, .edit-wrapper[data-editing=true]) {
    opacity: 1;
}
#optasy-dashboard :where(.wellness-components-wrapper .wellness-components > .wellness-component) .edit-wrapper[data-editing=true] {
    background-color: #e8eaf6;
}
#optasy-dashboard :where(.wellness-components-wrapper .wellness-components > .wellness-component) .edit-wrapper:hover .edit {
    background-color: #ff9432;
}
#optasy-dashboard :where(.wellness-components-wrapper .wellness-components > .wellness-component) .edit {
    width: max-content;
    height: max-content;
    min-width: unset;
    padding: 5px;
    line-height: 15px;
    color: #fff;
    background-color: #2e358f;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    z-index: 1;
}
#optasy-dashboard :where(.wellness-components-wrapper .wellness-components > .wellness-component) .edit-wrapper[data-editing=true] .edit {
    display: none;
}
#optasy-dashboard :where(.wellness-components-wrapper .wellness-components > .wellness-component) .edit > i {
    font-size: 15px;
}
#optasy-dashboard :where(.wellness-components-wrapper .wellness-components > .wellness-component) .edit-wrapper[data-editing=true] input {
    color: #2e358f;
    background-color: #e8eaf6;
    font-weight: 700;
    border: none;
}
#optasy-dashboard :where(.wellness-components-wrapper .wellness-components > .wellness-component) .edit-wrapper[data-editing=true] .accept {
    position: absolute;
    bottom: -12px;
    min-width: unset;
    min-height: unset;
    margin-left: unset;
    padding: 5px;
    line-height: unset;
    font-size: 9px;
    color: #fff;
    background-color: #2e358f;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
#optasy-dashboard :where(.wellness-components-wrapper .wellness-components > .wellness-component) .edit-wrapper[data-editing=true] .accept:hover {
    background-color: #ff9432;
}
#optasy-dashboard :where(.wellness-components-wrapper .wellness-components > .wellness-component) .edit-wrapper[data-editing=true] .accept > i {
    font-size: 15px;
}
#optasy-dashboard .wellness-components-wrapper .wellness-components > .wellness-component > .delete {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    color: #fff;
    background-color: #2e358f;
    font-size: 12px;
    font-weight: 700;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: color .15s linear, background-color .15s linear;
    -moz-transition: color .15s linear, background-color .15s linear;
    -ms-transition: color .15s linear, background-color .15s linear;
    -o-transition: color .15s linear, background-color .15s linear;
    transition: color .15s linear, background-color .15s linear;
    cursor: pointer;
}
#optasy-dashboard .wellness-components-wrapper .wellness-components > .wellness-component > .delete:hover {
    background-color: #ff9432;
}
#optasy-dashboard .add-wellness-component-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}
#optasy-dashboard .add-wellness-component-wrapper .component-title {
    min-width: 300px;
    padding: 16px 20px;
    font-size: 12px;
    font-weight: normal;
    border: 1px solid #c4c4c4;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}
#optasy-dashboard .add {
    min-width: unset;
    max-height: 50px;
    padding: 10px 10px;
    margin-left: unset;
}
#optasy-dashboard .add > svg {
    width: 30px;
    height: 30px;
    vertical-align: middle;
}
#optasy-dashboard .add > svg > .circle {
    fill: #e4e8f4;
}
#optasy-dashboard .add > svg > :not(.circle) {
    fill: #2e358f;
}
#optasy-dashboard .add:hover > svg > :not(.circle) {
    fill: #fff;
}
#optasy-dashboard .add:hover > svg > :not(.circle) {
    fill: #ff9432;
}

#optasy-dashboard .elements-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#optasy-dashboard .elements-wrapper > .section-option .profile-main-loader-btn {
    background-color: #edf0ffbf;
}
#optasy-dashboard .elements-wrapper > .section-option.hidden {
    visibility: hidden;
}
#optasy-dashboard .elements-wrapper > .section-option > .delete {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 24px;
    height: 24px;
    margin-top: unset;
    padding: unset;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    line-height: 24px;
    background-color: #2e358f;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: color .15s linear, background-color .15s linear;
    -moz-transition: color .15s linear, background-color .15s linear;
    -ms-transition: color .15s linear, background-color .15s linear;
    -o-transition: color .15s linear, background-color .15s linear;
    transition: color .15s linear, background-color .15s linear;
    z-index: 1;
    cursor: pointer;
}
#optasy-dashboard .elements-wrapper > .section-option > .delete:hover,
#optasy-dashboard .elements-wrapper > .section-option > .delete.active {
    background-color: #ff9432;
    color: #fff;
}
#optasy-dashboard .type-content > .content-section > .section-options .elements-wrapper .options-holder {
    position: unset;
    display: unset;
}
#optasy-dashboard .elements-wrapper > .section-option .element {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#optasy-dashboard .elements-wrapper > .section-option .element .label-wrapper {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
#optasy-dashboard .elements-wrapper > .section-option .element .label-wrapper > .label {
    margin-left: 5px;
    font-size: 12px;
    font-weight: 700;
    color: #2e358f;
}
#optasy-dashboard .type-content > .content-section > .section-options .elements-wrapper .options-holder .option {
    margin-left: unset;
}
#optasy-dashboard .elements-wrapper > .section-option .element .acf-field {
    margin: 0;
}
#optasy-dashboard .elements-wrapper > .section-option .element .acf-field > .acf-label {
    display: none;
}
#optasy-dashboard .elements-wrapper > .section-option .element .acf-field[data-type=wysiwyg] .wp-editor-tools .wp-editor-tabs {
    display: flex;
}
#optasy-dashboard .elements-wrapper > .section-option .element .acf-field[data-type=wysiwyg] .wp-editor-tools .wp-editor-tabs > button {
    min-width: 50px;
    margin: unset;
    padding: 5px;
    text-align: center;
}
#optasy-dashboard .elements-wrapper > .section-option .element .acf-field[data-type=wysiwyg] .wp-editor-tools .wp-editor-tabs > button:nth-child(1) {
    -webkit-border-radius: 14px 0 0 0;
    -moz-border-radius: 14px 0 0 0;
    border-radius: 14px 0 0 0;
}
#optasy-dashboard .elements-wrapper > .section-option .element .acf-field[data-type=wysiwyg] .wp-editor-tools .wp-editor-tabs > button:nth-child(2) {
    -webkit-border-radius: 0 14px 0 0;
    -moz-border-radius: 0 14px 0 0;
    border-radius: 0 14px 0 0;
}
#optasy-dashboard .elements-wrapper > .section-option .element .acf-field[data-type=wysiwyg] :where(.wp-editor-container, .wp-editor-container > .mce-container) {
    -webkit-border-radius: 14px 0 14px 14px;
    -moz-border-radius: 14px 0 14px 14px;
    border-radius: 14px 0 14px 14px;
}
#optasy-dashboard .elements-wrapper > .section-option .element .acf-field[data-type=wysiwyg] .wp-editor-container .mce-stack-layout > .mce-first::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 14px 0 0 0;
    -moz-border-radius: 14px 0 0 0;
    border-radius: 14px 0 0 0;
    pointer-events: none;
}
#optasy-dashboard .elements-wrapper > .section-option .element .acf-field[data-type=wysiwyg] .wp-editor-container .mce-stack-layout > .mce-first .mce-toolbar-grp {
    -webkit-border-radius: 14px 0 0 0;
    -moz-border-radius: 14px 0 0 0;
    border-radius: 14px 0 0 0;
}
#optasy-dashboard .elements-wrapper > .section-option .element .acf-field[data-type=wysiwyg] .wp-editor-container .mce-stack-layout > .mce-first .mce-toolbar-grp .mce-toolbar .mce-btn-group .mce-btn {
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}
/* FULLSCREEN BTN */
#optasy-dashboard .elements-wrapper > .section-option .element .acf-field[data-type=wysiwyg] .wp-editor-container .mce-stack-layout > .mce-first .mce-toolbar-grp .mce-toolbar .mce-btn-group .mce-btn[aria-label=Fullscreen] {
    display: none;
}
#optasy-dashboard .elements-wrapper > .section-option .element .acf-field[data-type=wysiwyg] .wp-editor-container .mce-stack-layout > .mce-last {
    -webkit-border-radius: 0 0 14px 14px;
    -moz-border-radius: 0 0 14px 14px;
    border-radius: 0 0 14px 14px;
}
#optasy-dashboard .elements-wrapper > .section-option .element .acf-field[data-type=wysiwyg] .wp-editor-container .mce-stack-layout > .mce-last .mce-resizehandle {
    right: 2px;
    bottom: 2px;
}
#optasy-dashboard .elements-wrapper > .section-option .element .acf-field[data-type=wysiwyg] .html-active .wp-editor-container > .quicktags-toolbar {
    display: flex;
    flex-wrap: wrap;
    -webkit-border-radius: 14px 0 0 0;
    -moz-border-radius: 14px 0 0 0;
    border-radius: 14px 0 0 0;
}
#optasy-dashboard .elements-wrapper > .section-option .element .acf-field[data-type=wysiwyg] .wp-editor-container > .quicktags-toolbar > input[type=button] {
    width: auto;
    min-width: 30px;
    padding: 0 10px;
    color: #2e358f;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
#optasy-dashboard .elements-wrapper > .section-option .element .acf-field[data-type=wysiwyg] .html-active .wp-editor-container > .wp-editor-area {
    -webkit-border-radius: 0 0 14px 14px;
    -moz-border-radius: 0 0 14px 14px;
    border-radius: 0 0 14px 14px;
}
#optasy-dashboard .elements-wrapper > .section-option .element .acf-field[data-type=wysiwyg] .wp-editor-container > .wp-editor-area::-webkit-resizer {
    display: none;
}
#optasy-dashboard .elements-wrapper > .section-option .element .acf-field[data-type=wysiwyg] .html-active .wp-editor-container:after {
    font-family: tinymce,Arial;
    content: "\e032";
    font-size: 12px;
    position: absolute;
    bottom: 2px;
    right: 5px;
    pointer-events: none;
}
#optasy-dashboard .add-element-wrapper.header-in-border {
    margin: 30px 0 0 0;
}

#optasy-dashboard .wellness-viewer-dropdown .select2-wellness > .select2-selection__rendered .select2-selection__choice .item .sort-number .row {
    display: block;
}
#optasy-dashboard .wellness-viewer-dropdown .select2-wellness > .select2-selection__rendered .select2-selection__choice .item .thumbnail .row:has(> .thumbnail) {
    width: 50px;
    display: block;
    border-radius: 8px;
}
#optasy-dashboard .wellness-viewer-dropdown .select2-wellness > .select2-selection__rendered .select2-selection__choice .item .thumbnail .row .thumbnail {
    border-radius: 8px;
}
#optasy-dashboard .select2:has(.select2-wellness.viewer) {
    margin-bottom: 610px;
}
#optasy-dashboard .select2-container .select2-wellness.viewer:before {
    display: none;
}
#optasy-dashboard .select2-container.select2-container--open .select2-dropdown .select2-results > ul:has(.viewer-item) {
    max-height: 610px;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results > ul > li:has(.viewer-item) {
    text-shadow: none;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results > ul > li.select2-results__option--highlighted:has(.viewer-item) {
    background-color: unset;
    color: #2e358f;
    text-shadow: 0 0 1px #2e358f;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results > ul > li.select2-results__option--highlighted:has(.viewer-item) .row.description {
    text-shadow: none;
    color: inherit;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results > ul > li:has(.viewer-item) .row.tags :where(.layout-list-wrapper, .layout-list-wrapper .divider) {
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results > ul > li.select2-results__option--highlighted:has(.viewer-item) .row.tags :where(.layout-list-wrapper, .layout-list-wrapper .divider) {
    border-color: #2e358f;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results > ul > li.select2-results__option--highlighted.select2-results__option--selected:has(.viewer-item) {
    background-color: #d5dcf1;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results > ul > li:has(.viewer-item):not(:has(.delete-overlay)):first-child {
    padding-top: 10px;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results > ul > li:has(.viewer-item):last-child {
    padding-bottom: 10px;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results > ul > li:has(.viewer-item):before,
#optasy-dashboard .select2-container .select2-dropdown .select2-results > ul > li:has(.viewer-item):after {
    content: '';
    position: absolute;
    left: 30px;
    right: 30px;
    height: 1px;
    background-color: #a4a4a42b;
    -webkit-transition: background-color .3s ease;
    -moz-transition: background-color .3s ease;
    -ms-transition: background-color .3s ease;
    -o-transition: background-color .3s ease;
    transition: background-color .3s ease;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results > ul > li:has(.viewer-item):before {
    top: 0;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results > ul > li:has(.viewer-item):after {
    bottom: 0;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results > ul > li:has(.viewer-item):first-child:before,
#optasy-dashboard .select2-container .select2-dropdown .select2-results > ul > li:has(.viewer-item):last-child:after {
    display: none;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results > ul > li.select2-results__option--highlighted:has(.viewer-item):before,
#optasy-dashboard .select2-container .select2-dropdown .select2-results > ul > li.select2-results__option--highlighted:has(.viewer-item):after {
    background-color: #2e358f;
}
#optasy-dashboard .viewer-item[data-editing=true] {
    flex-direction: column;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results .viewer-item .list-col-info {
    align-items: flex-start;
    flex-wrap: nowrap;
    width: 100%;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results :is(.viewer-item .list-col.sort-number:has(> .row:empty), .viewer-item[data-editing=true] .list-col.sort-number) {
    display: none;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results .viewer-item .list-col.sort-number {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    color: #fff;
    background-color: #2e358f;
    transform: translate(-50%, -50%);
    box-shadow: 0px 5px 5px 0px rgb(0, 0, 0, .2);
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results .viewer-item .list-col.thumbnail {
    position: relative;
    align-self: center;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 120px;
}
#optasy-dashboard .viewer-item .list-col:not(.thumbnail) {
    gap: 5px;
    padding: 5px 0;
}
#optasy-dashboard .viewer-item[data-editing=true] .list-col:not(.thumbnail) {
    gap: 10px;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results .item .list-col {
    flex-basis: unset;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results .item .list-col.right {
    flex-grow: 0;
    flex-shrink: 0;
}
#optasy-dashboard .viewer-item .row:has(> .thumbnail) {
    position: relative;
    line-height: 0;
    border: 1px solid #2e358f;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    overflow: hidden;
}
#optasy-dashboard .viewer-item .row > .thumbnail {
    width: 100%;
    background-color: #fff;
    object-fit: cover;
    object-position: center;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: transform .3s ease;
    -moz-transition: transform .3s ease;
    -ms-transition: transform .3s ease;
    -o-transition: transform .3s ease;
    transition: transform .3s ease;
}
#optasy-dashboard li.select2-results__option--highlighted .viewer-item .row > .thumbnail {
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -ms-transform: scale(1.4);
    -o-transform: scale(1.4);
    transform: scale(1.4);
}
#optasy-dashboard .wellness-viewer-wrapper.original .viewer-item[data-editing=true] .toggle-mode,
#optasy-dashboard .wellness-viewer-wrapper:not(.original) .viewer-item[data-editing=true] .toggle-mode:not(.title, .description, .tags) {
    display: none;
}
#optasy-dashboard .viewer-item .edit-el {
    display: none;
}
#optasy-dashboard .wellness-viewer-wrapper.original .viewer-item[data-editing=true] .edit-el,
#optasy-dashboard .wellness-viewer-wrapper:not(.original) .viewer-item[data-editing=true] .edit-el:not(.title, .description, .tags) {
    display: flex;
    opacity: 0;
}
#optasy-dashboard :is(.type-content > .content-section > .section-options .viewer-item, .viewer-item) :is(.edit-el.title, .edit-el .fit-timer > input, .edit-el .sets-reps > input) {
    padding: 10px;
    font-size: 12px;
    background-color: #f3f3f3;
    border: 1px solid #a4a4a4;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}

#optasy-dashboard .viewer-item .row:where(.description, .date) {
    color: #7c7c7c;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
#optasy-dashboard .viewer-item[data-editing=true] .toggle-mode.title {
    color: #000;
}
#optasy-dashboard .viewer-item .edit-el.description {
    width: 100%;
    min-height: 60px;
    padding: 20px;
    background-color: #f3f3f3;
    white-space: pre-wrap;
    cursor: text;
    border: 1px solid #a4a4a4;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}
#optasy-dashboard .wellness-viewer-wrapper:not(.original) :is(.type-content > .content-section > .section-options .viewer-item, .viewer-item) :is(.edit-el.title, .edit-el.description, .edit-el.tags :is(.select2-container .select2-selection, .select2-container .select2-selection > .select2-search textarea)) {
    background-color: #00000035;
    cursor: not-allowed;
}
#optasy-dashboard .viewer-item .row.extras:not(.edit-el) {
    display: flex;
    gap: 40px;
    max-height: 0;
    transition: max-height .2s ease-in;
    overflow: hidden;
}
#optasy-dashboard li.select2-results__option--highlighted:not(:has(> .delete-overlay)) .viewer-item .row.extras:not(.edit-el) {
    max-height: 30px;
}
#optasy-dashboard .viewer-item .row.extras:not(.edit-el) :where(.time, .value) {
    font-weight: 600;
}
#optasy-dashboard .viewer-item .row.extras:not(.edit-el) > .list-col:not(.selected) {
    opacity: .3;
}
#optasy-dashboard .viewer-item .row.extras.edit-el {
    gap: 20px;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results .viewer-item .row.extras .list-col {
    flex-direction: row;
    flex-grow: 0;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results .viewer-item .row.extras .list-col.empty {
    display: none;
}
#optasy-dashboard .viewer-item .row.extras .sets-reps > input {
    width: 100px;
    text-align: center;
}
#optasy-dashboard .viewer-item .edit-el.tags .select2-selection .select2-search {
    border-radius: 14px;
}
#optasy-dashboard .viewer-item .edit-el.tags .select2-container .select2-dropdown .select2-results > ul {
    background-color: #f3f3f3;
}
#optasy-dashboard .wellness-viewer-dropdown .select2-wellness > .select2-selection__rendered .select2-selection__choice:has(.viewer-tag[data-type=super]) {
    padding-left: 5px;
    background-color: #2e358f;
    color: #fff;
}
#optasy-dashboard .wellness-viewer-dropdown .select2-wellness > .select2-selection__rendered .select2-selection__choice:has(.viewer-tag[data-type=super]) > .select2-selection__choice__remove {
    display: none;
}
#optasy-dashboard .wellness-viewer-dropdown .select2-wellness > .select2-selection__rendered .select2-selection__choice:has(.viewer-tag[data-type=super]) .viewer-tag .list-col-info > .list-col:not(:has(> .title)) {
    display: none;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results .viewer-item .viewer-tag .list-col-info {
    justify-content: flex-start;
    align-items: center;
    column-gap: 10px;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results .viewer-item .viewer-tag .list-col-info .list-col {
    flex-grow: 0;
    padding: 0;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results .viewer-item .viewer-tag .list-col-info .list-col:has(> .toggle) {
    margin-left: auto;
}
#optasy-dashboard .viewer-item .viewer-tag .list-col-info :where(.row.new, .row.super) {
    padding: 2px 5px;
    color: #fff;
    background-color: #a3a3a3;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}
#optasy-dashboard .viewer-item .viewer-tag .list-col-info .row.super {
    background-color: #2e358f;
}
#optasy-dashboard .viewer-item .viewer-tag .list-col-info .row.toggle {
    padding: 5px 10px;
    color: #2e358f;
    border: 1px solid #2e358f;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}
#optasy-dashboard .viewer-item .viewer-tag .list-col-info .row.toggle:hover {
    background-color: #2e358f;
    color: #fff;
}
#optasy-dashboard .viewer-item[data-editing=true] .viewer-tag:not(.new) .list-col-controls {
    display: flex;
}
#optasy-dashboard .viewer-item .row.incomplete-upload {
    color: #ff0000;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
#optasy-dashboard .viewer-item .row > .file-info {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}
#optasy-dashboard .viewer-item .row > .file-info .info {
    font-size: 12px;
    background-color: #edf0ffc4;
    padding: 10px 0;
    transform: scaleX(0);
    transform-origin: right;
    -webkit-transition: transform 0.3s ease, padding 0.3s ease;
    -moz-transition: transform 0.3s ease, padding 0.3s ease;
    -ms-transition: transform 0.3s ease, padding 0.3s ease;
    -o-transition: transform 0.3s ease, padding 0.3s ease;
    transition: transform 0.3s ease, padding 0.3s ease;
    overflow: hidden;
}
#optasy-dashboard .viewer-item .row > .file-info .info:empty {
    display: none;
}
#optasy-dashboard li.select2-results__option--highlighted:has(.viewer-item) .viewer-item:not(.uploading) .row > .file-info .info:not(:empty) {
    transform: scaleX(1);
    padding: 10px;
}
#optasy-dashboard .viewer-item .row > .file-info .file-duration {
    -webkit-border-radius: 7px 0 0 7px;
    -moz-border-radius: 7px 0 0 7px;
    border-radius: 7px 0 0 7px;
}
#optasy-dashboard .viewer-item .row > .file-info .file-size {
    -webkit-border-radius: 14px 0 14px 0;
    -moz-border-radius: 14px 0 14px 0;
    border-radius: 14px 0 14px 0;
}
#optasy-dashboard .viewer-item .row > .file-info .progress {
    position: relative;
    width: 90%;
    display: none;
    align-self: center;
    margin: 0 5px 2px 5px;
    background-color: #edf0ffc4;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    overflow: hidden;
}
#optasy-dashboard .viewer-item.uploading .row > .file-info .progress {
    display: flex;
}
#optasy-dashboard .viewer-item .row > .file-info .progress .progress-bar {
    width: 100%;
    height: 15px;
    background: repeating-linear-gradient(45deg, #ff9432 50%, #fff 60%, #ff9432 61%);
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    transform: scaleX(0);
    transform-origin: left;
    -webkit-transition: transform .3s linear;
    -moz-transition: transform .3s linear;
    -ms-transition: transform .3s linear;
    -o-transition: transform .3s linear;
    transition: transform .3s linear;
}
#optasy-dashboard .viewer-item .row > .file-info .progress .percent {
    position: absolute;
    left: 50%;
    top: 50%;
    line-height: 1;
    font-size: 15px;
    font-weight: 700;
    transform: translate(-50%, -50%);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    z-index: 1;
}
#optasy-dashboard .viewer-item .row > .file-info .progress .percent.progressed {
    background-color: #ffffff90;
}
#optasy-dashboard .viewer-item .ft-icons-check-circle {
    top: 50%;
    transform: translate(-50%, -50%);
}
#optasy-dashboard .viewer-item[data-editing=true] .list-col-controls {
    display: none;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results ul li .viewer-item .list-col-controls .list-item-more-option {
    color: #7c7c7c;
    -webkit-transition: transform .3s ease;
    -moz-transition: transform .3s ease;
    -ms-transition: transform .3s ease;
    -o-transition: transform .3s ease;
    transition: transform .3s ease;
}
#optasy-dashboard .select2-container .select2-dropdown .select2-results ul li:where(.select2-results__option--highlighted, .select2-results__option--selected) .viewer-item .list-col-controls .list-item-more-option {
    color: #2e358f;
}
#optasy-dashboard .viewer-item .edit-btns {
    align-self: flex-end;
    align-items: center;
    gap: 20px;
    padding: 0 10px 10px 10px;
}
#optasy-dashboard .viewer-item .edit-btns .fit-button {
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
#optasy-dashboard .viewer-item .edit-btns .cancel {
    min-width: unset;
    min-height: unset;
    padding: 5px 10px;
    color: #2e358f;
    background-color: unset;
}
#optasy-dashboard .viewer-item .edit-btns .cancel:hover {
    text-decoration: underline;
}
#optasy-dashboard .viewer-item .edit-btns .save {
    min-width: unset;
    min-height: unset;
    padding: 5px 10px;
    color: #2e358f;
    background-color: unset;
    border: 1px solid #2e358f;
}
#optasy-dashboard .viewer-item .edit-btns .save:hover {
    color: #fff;
    background-color: #2e358f;
}

#optasy-dashboard [contenteditable=true][data-placeholder]:empty:before {
    content: attr(data-placeholder);
    display: block;
    color: #a4a4a4;
    pointer-events: none;
}

#optasy-dashboard .manage-members-toolbar-wrapper {
    display: flex;
}
#optasy-dashboard .manage-members-toolbar {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 20px;
    margin: 10px 0;
}
#optasy-dashboard [data-js-responsive] {
    flex-shrink: 0;
    &:where(.select-all-wrapper, .layout-list-wrapper) {
        flex-shrink: 0;
    }
}
#optasy-dashboard .layout-list-wrapper {
    display: flex;
    width: fit-content;
    min-height: 52px;
    border: 1px solid #c4c4c4;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}
#optasy-dashboard [data-js-responsive=true] .layout-list-wrapper {
    position: relative;
    justify-content: space-between;
}
#optasy-dashboard .layout-list-wrapper .layout-title {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    padding: 10px;
}
#optasy-dashboard .layout-list-wrapper .layout-list {
    display: none;
    gap: 10px;
    flex-wrap: wrap;
    width: 0;
    padding: 10px 0;
}
#optasy-dashboard [data-js-responsive=true] .layout-list-wrapper .layout-list {
    position: absolute;
    top: 38px;
    left: -1px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 5px;
    background-color: #fff;
    border: 1px solid #c4c4c4;
    border-top: unset;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    z-index: 11;
    box-shadow: 0px 5px 5px 0px rgb(0, 0, 0, .2);
}
#optasy-dashboard .layout-list-wrapper .layout-item {
    position: relative;
    display: flex;
    flex-shrink: 0;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 700;
    background-color: #fff;
    border: 1px solid #c4c4c4;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    cursor: pointer;
    opacity: 0;
    overflow: hidden;
    &:hover {
        border: 1px solid #2e358f;
    }
    &[data-type=super] {
        background-color: #2e358f;
        color: #fff;
    }
    &.hidden {
        display: none;
    }
    &.selected {
        display: flex;
        border: 1px solid #2e358f;
        &:hover .close {
            transform: scaleX(1);
        }
        .sort {
            display: inline-block;
        }
    }
    &.desc {
        .sort {
            transform: rotate(180deg);
            transition: transform .3s ease;
        }
    }
    .sort {
        display: none;
        padding-left: 2px;
        transition: transform 0.5s ease;
    }
    .layout-indicator {
        width: 16px;
        height: 16px;
        margin-left: 5px;
        color: #fff;
        background-color: #2e358f;
        text-align: center;
        border-radius: 10px;
        &.hidden {
            display: none;
        }
    }
    .close {
        position: absolute;
        top: 0;
        left: 0;
        width: 25px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #2e358f;
        color: #fff;
        transform: scaleX(0);
        transform-origin: left;
        -webkit-transition: transform .2s linear;
        -moz-transition: transform .2s linear;
        -ms-transition: transform .2s linear;
        -o-transition: transform .2s linear;
        transition: transform .2s linear;
    }
    .profile-main-loader-btn {
        background-color: rgb(250 250 250 / 90%);
    }
}
#optasy-dashboard [data-js-responsive=true] .layout-list-wrapper .layout-item {
    position: relative;
    align-items: center;
    justify-content: center;
    width: max-content;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
#optasy-dashboard .layout-list-wrapper .divider {
    margin-left: auto;
    border-right: 1px solid #c4c4c4;
}
#optasy-dashboard [data-js-responsive=true]:has(.layout-list.open) .divider {
    display: none;
}
#optasy-dashboard .layout-list-wrapper .layout-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    font-weight: bold;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
#optasy-dashboard [data-js-responsive=true] .layout-list-wrapper .layout-toggle {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
#optasy-dashboard .layout-list-wrapper .layout-toggle:hover {
    color: #ff9432;
}

/******************************** START OF NESTED CSS **********************************/
#optasy-dashboard {
    --fit-orange: #ff9432;
    --fit-blue: #2e358f;
    --fit-white: #fff;

    /* Calendar Colors */
    --date-bg-color: var(--fit-white);
    --ch1-color: #ff9432;
    --ch1-bg-color: rgba(255, 148, 50, .1);
    --ch1-bg-color-done: rgba(255, 148, 50, .5);
    --ch2-color: #2e358f;
    --ch2-bg-color: rgba(46, 53, 143, .1);
    --ch2-bg-color-done: rgba(46, 53, 143, .5);
    --ch3-color: #1da7c4;
    --ch3-bg-color: rgba(29, 167, 196, .1);
    --ch3-bg-color-done: rgba(29, 167, 196, .5);
    --ch-rest: repeating-linear-gradient(-45deg, rgb(211 211 211 / 80%), rgb(211 211 211 / 80%) 2px, var(--fit-white) 3px, var(--fit-white) 4px);

    &:has(> .viewing-as .feed-notif) {
        #dashboard-top-nav, #dashboard-side-menu, #dashboard-holder {
            margin-top: 25px;
        }
    }
    &:has(> .viewing-as .feed-notif + .feed-notif) {
        #dashboard-top-nav, #dashboard-side-menu, #dashboard-holder {
            margin-top: 50px;
        }
    }
    &:has(> .viewing-as .feed-notif + .feed-notif + .feed-notif) {
        #dashboard-top-nav, #dashboard-side-menu, #dashboard-holder {
            margin-top: 75px;
        }
    }
    &.fit-device {
        #dashboard-side-menu {
            .menu-mobile-placeholder {
                height: 50px;
            }
        }
        #dashboard-holder {
            #dashboard-content {
                #dashboard-main-content-wrapper {
                    #dashboard-main-content {
                        > .main-content {
                            &.feed {
                                &[data-content-type=fit_support] .posts-wrapper > .post[data-editing=true] > .post-details > .post-content > .text-description {
                                    display: none;
                                }
                                .posts-wrapper {
                                    > .post {
                                        > .post-details {
                                            > .post-comments-wrapper {
                                                .commentlist {
                                                    .reply-content-wrapper {
                                                        .content {
                                                            .description {
                                                                display: none;
                                                            }
                                                            .reply-btns {
                                                                margin-top: 10px;
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    &.expand .fit-calendar-widget[data-type=grid] {
        .calendar-body {
            height: 0;
            overflow: hidden;
            .month-wrapper {
                height: 0;
                padding-top: 0;
                padding-bottom: 0;
            }
        }
    }

    &.collapse #calendar-widget {
        border-radius: 14px;
        -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, .15);
        -moz-box-shadow: 0 0 11px rgba(0, 0, 0, .15);
        box-shadow: 0 0 11px rgba(0, 0, 0, .15);
    }

    &[data-role=member] {
        #dashboard-content {
            #dashboard-main-content-wrapper {
                #dashboard-main-content {
                    > .main-content {
                        &.feed {
                            > .choose-users {
                                display: none;
                            }
                        }
                    }
                }
            }
        }
    }

    #dashboard-holder {
        #dashboard-content {
            #dashboard-main-content-wrapper {
                #dashboard-main-content {
                    &.feed {
                        [data-content-type=private],
                        [data-content-type=discussion],
                        [data-content-type=fit_support] {
                            display: flex;
                            justify-content: start;
                            margin: 10px;
                            flex-direction: column;
                        }
                    }
                    > .main-content {
                        &[data-content-type=edit_profile] {
                            > .main-content-wrapper > .content-navigation {
                                flex-direction: unset;
                                width: unset;
                                .logout {
                                    display: flex;
                                    justify-content: center;
                                    color: var(--fit-blue);
                                    font-size: clamp(12px, 3vw, 14px);
                                    border: 1px solid var(--fit-blue);
                                    border-radius: 7px;
                                    &:hover {
                                        color: var(--fit-white);
                                        background-color: var(--fit-blue);
                                    }
                                }
                                .delete-account, .restore-account {
                                    color: var(--fit-blue);
                                    font-size: clamp(12px, 3vw, 12px);
                                    margin-top: 5px;
                                }
                            }
                        }
                        
                        &.feed {
                            .ad-widget-discussion {
                                &:hover img {
                                    -webkit-transform: scale(1.2);
                                    -moz-transform: scale(1.2);
                                    -ms-transform: scale(1.2);
                                    -o-transform: scale(1.2);
                                    transform: scale(1.2);
                                }
                                .close-ad:hover {
                                    background-color: var(--fit-orange);
                                    color: var(--fit-white);
                                }
                                img {
                                    width: 100%;
                                    height: 100%;
                                    max-height: 200px;
                                    object-fit: cover;
                                    object-position: center;
                                    border: 2px solid #e8eaf6;
                                    -webkit-border-radius: 14px;
                                    -moz-border-radius: 14px;
                                    border-radius: 14px;
                                    -webkit-transition: all .3s linear;
                                    -moz-transition: all .3s linear;
                                    -ms-transition: all .3s linear;
                                    -o-transition: all .3s linear;
                                    transition: all .3s linear;
                                }
                                .overlay {
                                    position: absolute;
                                    top: 0;
                                    width: 100%;
                                    height: 100%;
                                    cursor: pointer;
                                }
                            }
                            .feed-title {
                                display: flex;
                                align-items: center;
                                margin: 20px 0 10px 0;
                                color: #757575;
                                font-size: 20px;
                            }
                            > .choose-users {
                                > .title {
                                    font-size: 14px;
                                    color: #757575;
                                    background-color: unset;
                                }
                            }
                            .feed-posts-wrapper {
                                > .profile-main-loader-btn {
                                    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
                                    background-size: 200% 100%;
                                    animation: loading 1.5s infinite;
                                    > .loader {
                                        position: absolute;
                                        top: 200px;
                                        left: 50%
                                    }
                                }
                            }
                            .posts-wrapper {
                                position: relative;
                                &.rt {
                                    display: none;
                                }
                                > .post {
                                    position: relative;
                                    display: flex;
                                    flex-direction: row;
                                    -webkit-border-radius: 14px;
                                    -moz-border-radius: 14px;
                                    border-radius: 14px;
                                    padding: 20px;
                                    gap: 20px;
                                    border-color: #a9a9a930;
                                    border-width: 1px;
                                    border-style: solid;
                                    &:not(:first-child) {
                                        margin-top: 20px;
                                    }
                                    &[data-editing=true] {
                                        > .post-details {
                                            > .post-content {
                                                > .text {
                                                    padding-bottom: 0;
                                                }
                                                /* NOTE: white-space: pre-wrap doubles the space on already submitted <br> tags so removing them here via CSS. */
                                                .text-description {
                                                    display: flex;
                                                    padding: 5px 0 0 15px;
                                                    font-size: 12px;
                                                }
                                                > .post-edit-btns {
                                                    display: flex;
                                                    margin-top: 15px;
                                                    margin-bottom: 15px;
                                                }
                                                > .post-edit-image {
                                                    display: flex;
                                                    .browse-photo {
                                                        width: 200px;
                                                        height: 200px;
                                                        margin-bottom: 20px;
                                                        &.active {
                                                            display: block;
                                                        }
                                                        .delete {
                                                            top: 0px;
                                                            right: 0px;
                                                        }
                                                    }
                                                }
                                                > .youtube {
                                                    &.hide {
                                                        display: none;
                                                    }
                                                    .delete {
                                                        display: block;
                                                    }
                                                }
                                                .photo-post {
                                                    display: none;
                                                }
                                            }
                                        }
                                    }
                                    &[data-pinned=no], &[data-pinned=""] {
                                        .pinned {
                                            display: none;
                                        }
                                    }
                                    > .profile-main-loader-btn {
                                        background-color: rgb(250 250 250 / 90%);
                                    }
                                    .author-photo {
                                        position: relative;
                                        min-width: 45px;
                                        height: 45px;
                                        width: 45px;
                                        display: flex;
                                        object-fit: cover;
                                        object-position: center;
                                        border: 1px solid #6e6e6e;
                                        border-radius: 50%;
                                    }
                                    > .profile-picture-wrapper,
                                    .post-details .post-header > .profile-picture-wrapper {
                                        &:has(> .author-photo.mobile) {
                                            display: none;
                                        }
                                    }
                                    > .post-details {
                                        position: relative;
                                        width: 100%;
                                        display: flex;
                                        flex-direction: column;
                                        > .post-header, > .post-comments-wrapper {
                                            &.post-header {
                                                position: relative;
                                                min-height: 40px;
                                                display: flex;
                                                align-items: center;
                                                font-size: 13px;
                                                font-weight: 400;
                                                color: #757575;
                                                z-index: 4;
                                            }
                                            &.post-comments-wrapper {
                                                position: relative;
                                                flex-direction: column;
                                                &[data-show=true] {
                                                    display: flex;
                                                }
                                                &[data-show=false] {
                                                    display: none;
                                                }
                                                > .profile-main-loader-btn {
                                                    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
                                                    background-size: 200% 100%;
                                                    animation: loading 1.5s infinite;
                                                }
                                                .commentlist {
                                                    display: flex;
                                                    flex-direction: column;
                                                    padding: 20px;
                                                    background-color: #fafafa;
                                                    border: 1px solid #e5e5e5;
                                                    border-radius: 14px;
                                                    /* 2nd-level comments */
                                                    > li > ul {
                                                        margin: 10px 0;
                                                        background-color: #f7f7f7;
                                                        border: 1px solid #e5e5e5;
                                                        border-radius: 14px;
                                                        /* 3rd-level comments */
                                                        > li > ul {
                                                            margin: 10px 0;
                                                            background-color: #f4f4f4;
                                                            border: 1px solid #e5e5e5;
                                                            border-radius: 14px;
                                                        }
                                                    }
                                                    li {
                                                        position: relative;
                                                        > .profile-main-loader-btn {
                                                            background-color: rgb(250 250 250 / 90%);
                                                        }
                                                        article {
                                                            flex-direction: column;
                                                            position: relative;
                                                            display: flex;
                                                            .comment-meta {
                                                                display: flex;
                                                                align-items: center;
                                                                .comment-metadata {
                                                                    display: none;
                                                                    margin-left: 8px;
                                                                    time {
                                                                        display: none;
                                                                    }
                                                                }
                                                            }
                                                            .comment-content {
                                                                margin-left: 20px;
                                                                padding: 12px;
                                                                border-radius: 14px;
                                                                .reply-to {
                                                                    float: left;
                                                                    height: 1.5em;
                                                                    padding: 0 5px;
                                                                    color: var(--fit-blue);
                                                                    background-color: #dde8f1;
                                                                    white-space: pre;
                                                                    border-radius: 10px;
                                                                }
                                                            }
                                                            .comment-reply-link {
                                                                position: relative;
                                                                min-width: 68px;
                                                                min-height: 34px;
                                                                display: block;
                                                                margin-left: 20px;
                                                                padding: 4px 12px;
                                                                line-height: 30px;
                                                                font-size: 14px;
                                                                font-weight: 500;
                                                                color: var(--fit-blue);
                                                                text-transform: uppercase;
                                                                border-radius: 14px;
                                                                cursor: pointer;
                                                                -webkit-transition: background-color .15s linear, color .15s linear;
                                                                -moz-transition: background-color .15s linear, color .15s linear;
                                                                -ms-transition: background-color .15s linear, color .15s linear;
                                                                -o-transition: background-color .15s linear, color .15s linear;
                                                                transition: background-color .15s linear, color .15s linear;
                                                                &:visited {
                                                                    border: none;
                                                                    color: var(--fit-orange);
                                                                }
                                                                &:hover:not(.disabled),
                                                                &.active:not(.disabled) {
                                                                    color: var(--fit-orange);
                                                                }
                                                            }
                                                        }
                                                        ul {
                                                            width: 100%;
                                                            display: flex;
                                                            flex-direction: column;
                                                        }
                                                    }
                                                    .comment-author.vcard {
                                                        display: flex;
                                                        align-items: center;
                                                        .profile-picture-wrapper.comment-author {
                                                            position: absolute;
                                                            top: auto;
                                                            left: 0;
                                                        }
                                                        .comment-author-photo {
                                                            width: 45px;
                                                            height: 45px;
                                                            border: 1px solid #6e6e6e;
                                                            border-radius: 50%;
                                                        }
                                                    }
                                                    .reply {
                                                        position: relative;
                                                        width: max-content;
                                                        margin: 5px 0 0 32px;
                                                        font-size: 13px;
                                                        color: var(--fit-blue);
                                                        cursor: pointer;
                                                        &[data-open=true] {
                                                            display: none;
                                                        }
                                                        &:hover {
                                                            text-decoration: underline;
                                                        }
                                                    }
                                                    .reply-content-wrapper {
                                                        margin: 20px 0 0 40px;
                                                        .content {
                                                            margin-top: 10px;
                                                            .row {
                                                                width: 0;
                                                                display: flex;
                                                                align-items: center;
                                                                gap: 10px;
                                                                overflow: hidden;
                                                            }
                                                            .profile-picture {
                                                                position: relative;
                                                                width: 45px;
                                                                min-width: 45px;
                                                                height: 45px;
                                                                display: table-cell;
                                                                object-fit: cover;
                                                                object-position: center;
                                                                border: 1px solid #6e6e6e;
                                                                border-radius: 50%;
                                                            }
                                                            .reply-comment {
                                                                position: relative;
                                                                width: 100%;
                                                                display: block;
                                                                line-height: 1.5;
                                                                background-color: #f3f3f3;
                                                                padding: 20px;
                                                                font-size: 16px;
                                                                font-weight: normal;
                                                                border: 1px solid #a4a4a4;
                                                                border-radius: 14px;
                                                                cursor: text;
                                                                .reply-to {
                                                                    float: left;
                                                                    height: 1.5em;
                                                                    padding: 0 5px;
                                                                    color: var(--fit-blue);
                                                                    background-color: #dde8f1;
                                                                    white-space: pre;
                                                                    border-radius: 10px;
                                                                }
                                                                .reply-start {
                                                                    width: 100%;
                                                                    white-space: pre-wrap;
                                                                }
                                                            }
                                                            .description {
                                                                display: flex;
                                                                margin-left: 8%;
                                                                padding: 5px 0 0 15px;
                                                                font-size: 12px;
                                                                color: #a4a4a4;
                                                            }
                                                            .reply-btns {
                                                                height: 0;
                                                                display: flex;
                                                                justify-content: flex-end;
                                                                align-items: center;
                                                                gap: 20px;
                                                                overflow: hidden;
                                                                .cancel-reply {
                                                                    color: var(--fit-blue);
                                                                    cursor: pointer;
                                                                    &:hover {
                                                                        text-decoration: underline;
                                                                    }
                                                                }
                                                            }
                                                        }
                                                    }
                                                }
                                                .post-options-wrapper {
                                                    top: 50%;
                                                    transform: translateY(-50%);
                                                    .options-button {
                                                        min-width: 35px;
                                                        min-height: 38px;
                                                        padding: 0;
                                                        font-size: 24px;
                                                        line-height: unset;
                                                        border-radius: 8px;
                                                    }
                                                }
                                                .comment-respond {
                                                    h3 {
                                                        font-weight: 500;
                                                        small {
                                                            margin-left: 20px;
                                                            -webkit-transition: color .15s linear;
                                                            -moz-transition: color .15s linear;
                                                            -ms-transition: color .15s linear;
                                                            -o-transition: color .15s linear;
                                                            transition: color .15s linear;
                                                            &:hover:not(.disabled),
                                                            .active:not(.disabled) {
                                                                color: var(--fit-orange);
                                                            }
                                                        }
                                                    }
                                                    .comment-form {
                                                        max-width: unset;
                                                        .comment-form-comment {
                                                            display: flex;
                                                            align-items: center;
                                                            gap: 10px;
                                                            .profile-picture {
                                                                position: relative;
                                                                width: 45px;
                                                                min-width: 45px;
                                                                height: 45px;
                                                                display: table-cell;
                                                                object-fit: cover;
                                                                object-position: center;
                                                                border: 1px solid #6e6e6e;
                                                                border-radius: 50%;
                                                            }
                                                            textarea {
                                                                position: relative;
                                                                display: flex;
                                                                width: 100%;
                                                                height: 67px;
                                                                padding: 20px;
                                                                line-height: 1.5;
                                                                background-color: #f3f3f3;
                                                                font-size: 16px;
                                                                font-weight: normal;
                                                                border: 1px solid #a4a4a4;
                                                                border-radius: 14px;
                                                            }
                                                        }
                                                        .form-submit {
                                                            display: flex;
                                                            justify-content: flex-end;
                                                            input[type=submit] {
                                                                position: relative;
                                                                width: unset;
                                                                display: block;
                                                                margin-left: 20px;
                                                                padding: 10px 20px;
                                                                background-color: #e4e8f4;
                                                                color: var(--fit-blue);
                                                                text-align: center;
                                                                line-height: 30px;
                                                                font-size: 14px;
                                                                font-weight: 700;
                                                                text-transform: uppercase;
                                                                border: none;
                                                                border-radius: 14px;
                                                                -webkit-transition: background-color .15s linear, color .15s linear;
                                                                -moz-transition: background-color .15s linear, color .15s linear;
                                                                -ms-transition: background-color .15s linear, color .15s linear;
                                                                -o-transition: background-color .15s linear, color .15s linear;
                                                                transition: background-color .15s linear, color .15s linear;
                                                                cursor: pointer;
                                                                &:first-child {
                                                                    margin-left: 0;
                                                                }
                                                                &:visited {
                                                                    border: none;
                                                                    background-color: var(--fit-orange);
                                                                    color: var(--fit-white);
                                                                }
                                                                &:hover:not(.disabled),
                                                                &.active:not(.disabled) {
                                                                    background-color: var(--fit-orange);
                                                                    color: var(--fit-white);
                                                                }
                                                                &.hidden {
                                                                    display: none;
                                                                }
                                                                &.disabled {
                                                                    border: none;
                                                                    background-color: #f1f1f1;
                                                                }
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                            .author-and-date {
                                                position: relative;
                                                display: flex;
                                                align-items: center;
                                                gap: 0px 5px;
                                                flex-wrap: wrap;
                                                .sender, .recipient {
                                                    display: flex;
                                                    gap: 0 5px;
                                                    .author {
                                                        position: relative;
                                                        display: flex;
                                                        font-size: 14px;
                                                        font-weight: 700;
                                                        color: #101010;
                                                        b {
                                                            margin-left: 8px;
                                                            color: #101010;
                                                            font-weight: bold;
                                                            a {
                                                                color: var(--fit-blue);
                                                            }
                                                        }
                                                    }
                                                }
                                                .separator {
                                                    position: relative;
                                                    margin-left: 0;
                                                    font-size: 13px;
                                                    color: #757575;
                                                }
                                                .date {
                                                    position: relative;
                                                    font-size: 13px;
                                                    color: #757575;
                                                }
                                            }
                                            .post-options-wrapper {
                                                position: absolute;
                                                top: 0px;
                                                right: 0px;
                                                display: block;
                                                &[data-open=true] .post-options-list {
                                                    max-height: 95px;
                                                    opacity: 1;
                                                }
                                                .options-button {
                                                    position: relative;
                                                    font-size: 32px;
                                                    line-height: 16px;
                                                }
                                                .post-options-list {
                                                    position: absolute;
                                                    top: 0px;
                                                    left: -38px;
                                                    width: 100px;
                                                    max-height: 0px;
                                                    background-color: #fff;
                                                    border-radius: 14px;
                                                    box-shadow: 0px 0px 4px rgba(0, 0, 0, .2);
                                                    overflow: hidden;
                                                    opacity: 0;
                                                    -webkit-transition: max-height .2s linear, opacity .2s linear;
                                                    -moz-transition: max-height .2s linear, opacity .2s linear;
                                                    -ms-transition: max-height .2s linear, opacity .2s linear;
                                                    -o-transition: max-height .2s linear, opacity .2s linear;
                                                    transition: max-height .2s linear, opacity .2s linear;
                                                    &[data-pinned=yes] .list-item[data-type=pin] {
                                                        display: none;
                                                    }
                                                    &[data-pinned=''] .list-item[data-type=unpin] {
                                                        display: none;
                                                    }
                                                    .list-item {
                                                        width: 100%;
                                                        padding: 6px 8px 6px 16px;
                                                        background-color: var(--fit-white);
                                                        font-size: 13px;
                                                        -webkit-transition: background-color .15s linear;
                                                        -moz-transition: background-color .15s linear;
                                                        -ms-transition: background-color .15s linear;
                                                        -o-transition: background-color .15s linear;
                                                        transition: background-color .15s linear;
                                                        cursor: pointer;
                                                        &:hover {
                                                            background-color: #e8eaf6;
                                                            -webkit-transition: background-color .15s linear;
                                                            -moz-transition: background-color .15s linear;
                                                            -ms-transition: background-color .15s linear;
                                                            -o-transition: background-color .15s linear;
                                                            transition: background-color .15s linear;
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                        > .post-content {
                                            position: relative;
                                            margin-top: 10px;
                                            > .text {
                                                position: relative;
                                                max-width: 80%;
                                                &[contenteditable=true] {
                                                    max-width: 100%;
                                                    background-color: #f3f3f3;
                                                    border: 1px solid #a4a4a4;
                                                    border-radius: 14px;
                                                    padding: 20px;
                                                    cursor: text;
                                                    white-space: pre-wrap;
                                                    br {
                                                        display: none;
                                                    }
                                                }
                                                a {
                                                    color: var(--fit-blue);
                                                    &:hover {
                                                        color: var(--fit-orange);
                                                    }
                                                }
                                            }
                                            > .text-description {
                                                display: none;
                                            }
                                            > .post-edit-btns {
                                                display: none;
                                                justify-content: flex-end;
                                                .fit-button {
                                                    &[data-id=feed_edit_cancel],
                                                    &[data-id=feed_edit_save] {
                                                        min-width: unset;
                                                        min-height: unset;
                                                        margin-left: 10px;
                                                        padding: 5px 10px;
                                                        background-color: unset;
                                                        &[data-id=feed_edit_cancel] {
                                                            &:hover {
                                                                color: unset;
                                                                text-decoration: underline;
                                                            }
                                                        }
                                                        &[data-id=feed_edit_save] {
                                                            color: var(--fit-blue);
                                                            border: 1px solid var(--fit-orange);
                                                            &:hover {
                                                                background-color: var(--fit-orange);
                                                                color: var(--fit-white);
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                            > .post-edit-image {
                                                display: none;
                                                flex-direction: column;
                                            }
                                            > .youtube {
                                                position: relative;
                                                .delete {
                                                    display: none;
                                                }
                                            }
                                            > .media {
                                                position: relative;
                                                width: 100%;
                                                height: 350px;
                                                display: flex;
                                                justify-content: center;
                                                align-items: center;
                                                margin-top: 20px;
                                                background-image: url("../../../../../assets/images/embed.png");
                                                background-size: cover;
                                                cursor: pointer;
                                                -webkit-border-radius: 14px;
                                                -moz-border-radius: 14px;
                                                border-radius: 14px;
                                                overflow: hidden;
                                                box-shadow: 3px 4px 12px -2px rgba(0, 0, 0, .25);
                                                .play {
                                                    position: relative;
                                                    width: 4em;
                                                    height: 3em;
                                                    margin: 20px auto;
                                                    padding: 0;
                                                    background: red;
                                                    color: #fff;
                                                    font-size: 1em;
                                                    text-align: center;
                                                    text-indent: .1em;
                                                    border-radius: 50%/10%;
                                                    transition: all 150ms ease-out;
                                                    &::before {
                                                        content: "";
                                                        position: absolute;
                                                        top: 9%;
                                                        right: -5%;
                                                        bottom: 9%;
                                                        left: -5%;
                                                        background: inherit;
                                                        border-radius: 5%/50%;
                                                    }
                                                    &::after {
                                                        content: " ";
                                                        position: absolute;
                                                        top: 50%;
                                                        width: 0;
                                                        height: 0;
                                                        margin: -1em 0 0 -0.75em;
                                                        font-size: .75em;
                                                        border-style: solid;
                                                        border-width: 1em 0 1em 1.732em;
                                                        border-color: transparent transparent transparent rgba(255, 255, 255, .75);
                                                    }
                                                }
                                                &:hover {
                                                    .play {
                                                        -webkit-transform: scale(1.2);
                                                        -moz-transform: scale(1.2);
                                                        -ms-transform: scale(1.2);
                                                        -o-transform: scale(1.2);
                                                        transform: scale(1.2);
                                                    }
                                                }
                                            }
                                            .photo-post {
                                                position: relative;
                                                display: flex;
                                                justify-content: center;
                                                margin-top: 20px;
                                                -webkit-border-radius: 14px;
                                                -moz-border-radius: 14px;
                                                border-radius: 14px;
                                                overflow: hidden;
                                                cursor: pointer;
                                                img {
                                                    width: 100%;
                                                    height: 100%;
                                                    max-height: 400px;
                                                    object-fit: cover;
                                                    object-position: center;
                                                    -webkit-border-radius: 14px;
                                                    -moz-border-radius: 14px;
                                                    border-radius: 14px;
                                                    box-shadow: 3px 4px 12px -2px rgba(0, 0, 0, .25);
                                                }
                                            }
                                            > .social-wrapper {
                                                position: relative;
                                                display: flex;
                                                justify-content: space-between;
                                                align-items: center;
                                                margin-top: 20px;
                                                padding: 8px 12px 16px 12px;
                                                border-bottom: 1px solid #ccc;
                                                .icon {
                                                    position: relative;
                                                    margin-right: 8px;
                                                    font-size: 20px;
                                                }
                                                > div {
                                                    position: relative;
                                                    display: flex;
                                                    span>span:not(:first-child) {
                                                        margin-left: 8px;
                                                    }
                                                }
                                                > .comments {
                                                    position: relative;
                                                    margin-right: 6px;
                                                    > .comment-btn {
                                                        min-width: unset;
                                                        min-height: unset;
                                                        margin-left: unset;
                                                        padding: unset;
                                                        line-height: unset;
                                                        background-color: unset;
                                                        &:hover {
                                                            color: var(--fit-blue);
                                                            text-decoration: underline;
                                                        }
                                                    }
                                                }
                                                > .likes {
                                                    position: relative;
                                                    color: #ff9432;
                                                    -webkit-transition: color .15s linear;
                                                    -moz-transition: color .15s linear;
                                                    -ms-transition: color .15s linear;
                                                    -o-transition: color .15s linear;
                                                    transition: color .15s linear;
                                                    cursor: pointer;
                                                }
                                                .likes-list {
                                                    display: none;
                                                }
                                            }
                                            .social-wrapper-buttons {
                                                position: relative;
                                                display: flex;
                                                justify-content: space-between;
                                                align-items: center;
                                                margin-top: 8px;
                                                padding: 8px 12px;
                                                .icon {
                                                    position: relative;
                                                    margin-right: 8px;
                                                    font-size: 20px;
                                                }
                                                .support-wrapper {
                                                    display: flex;
                                                    &[data-support=false] {
                                                        [data-type=remove] {
                                                            display: none;
                                                        }
                                                        [data-type=add]:not(:hover) {
                                                            background-color: #ffe5cc;
                                                            color: #ff7a00c4;
                                                        }
                                                    }
                                                    &[data-support=true] {
                                                        [data-type=add] {
                                                            display: none;
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .notifications-total {
        position: relative;
        margin: 0px 10px;
        background-color: var(--fit-orange);    
        color: var(--fit-white);
        padding: 1px 8px;
        line-height: initial;
        font-size: 12px;
        border-radius: 15px;
        &[data-count="0"], &[data-count=""] {
            display: none !important;
        }
        &.discussion, &.private, &.fit_support {
            background-color: var(--fit-blue);
        }
    }
    
    #dashboard-top-nav {
        .fit-notifications {
            .notifications-total {
                display: inline-block;
                top: -15px;
                left: 45px;
                z-index: 1;
            }
        }
    }
    
    #side-menu-list {
        .side-menu-list-item {
            &[data-panel=discussion], &[data-panel=fit_support] {
                .notifications-total { 
                    &:not(.discussion, .fit_support) {
                        display: none;
                    }
                }
            }
        }
        .notifications-total {
            margin: 0px 10px;
            line-height: initial;
        }
    }

    .viewing-as {
        position: fixed;
        width: 100%;
        text-align: center;
        background-color: red;
        color: var(--fit-white);
        z-index: 12;
        .switch-back-link {
            color: var(--fit-white);
            &:hover {
                text-decoration: underline;
            }
        }
    }

    #steps-widget {
        display: flex;
        flex-direction: column;
        padding: 24px;
        .steps-header-wrapper {
            .steps-header {
                position: relative;
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                row-gap: 10px;
                .step-info {
                    position: relative;
                    display: flex;
                    flex-grow: 1;
                    font-size: clamp(12px, 3vw, 14px);
                    -webkit-transition: margin-left .18s linear;
                    -moz-transition: margin-left .18s linear;
                    -ms-transition: margin-left .18s linear;
                    -o-transition: margin-left .18s linear;
                    transition: margin-left .18s linear;
                    &.active > span {
                        color: #fff;
                    }
                    &:not(.active) > span.graphic {
                        &, &::after {
                            background-color: #e4e8f4;
                            color: #2e358f;
                        }
                    }
                    &.disabled, &.disabled.active {
                        &.disabled > span.graphic {
                            border: 1px solid #e4e8f4;
                            background-color: #fff;
                            color: #2e358f;
                            &::after {
                                background-color: #fff;
                                color: #2e358f;
                                border-top: 1px solid #e4e8f4;
                                border-right: 1px solid #e4e8f4;
                            }
                        }
                        > span {
                            color: #2e358f;
                            cursor: not-allowed;
                        }
                    }
                    &.active:not(:first-child) {
                        margin-left: -4px;
                        -webkit-transition: margin-left .18s linear;
                        -moz-transition: margin-left .18s linear;
                        -ms-transition: margin-left .18s linear;
                        -o-transition: margin-left .18s linear;
                        transition: margin-left .18s linear;
                    }
                    &:not(:first-child) {
                        margin-left: 8px;
                        span.graphic::before {
                            content: "";
                            position: absolute;
                            top: 0;
                            left: -24px;
                            display: block;
                            width: 34px;
                            height: 34px;
                            background-color: #fff;
                            border-top-right-radius: 30%;
                            border-bottom-right-radius: 30%;
                            border-top-left-radius: 30%;
                            transform: rotate(45deg) skewY(0deg) scale(1, 1) translate(7px);
                        }
                    }
                    &:nth-child(1) {
                        z-index: 6;
                    }
                    &:nth-child(2) {
                        z-index: 5;
                    }
                    &:nth-child(3) {
                        z-index: 4;
                    }
                    &:nth-child(4) {
                        z-index: 3;
                    }
                    &:nth-child(5) {
                        z-index: 2;
                    }
                    &:nth-child(6) {
                        z-index: 1;
                    }
                    span {
                        position: relative;
                        width: 100%;
                        height: 46px;
                        display: block;
                        padding: 10px 20px;
                        color: #2e358f;
                        line-height: 26px;
                        text-align: center;
                        -webkit-transition: background-color .18s linear, color .18s linear, margin-left .18s linear;
                        -moz-transition: background-color .18s linear, color .18s linear, margin-left .18s linear;
                        -ms-transition: background-color .18s linear, color .18s linear, margin-left .18s linear;
                        -o-transition: background-color .18s linear, color .18s linear, margin-left .18s linear;
                        transition: background-color .18s linear, color .18s linear, margin-left .18s linear;
                        z-index: 2;
                        cursor: pointer;
                        &.graphic::after {
                            content: "";
                            position: absolute;
                            top: 0;
                            right: -4px;
                            display: block;
                            width: 37px;
                            height: 37px;
                            background-color: #ff9432;
                            border-top-right-radius: 30%;
                            border-bottom-right-radius: 30%;
                            border-top-left-radius: 30%;
                            transform: rotate(45deg) skewY(0deg) scale(1, 1) translate(5px);
                            -webkit-transition: background-color .18s linear, color .18s linear;
                            -moz-transition: background-color .18s linear, color .18s linear;
                            -ms-transition: background-color .18s linear, color .18s linear;
                            -o-transition: background-color .18s linear, color .18s linear;
                            transition: background-color .18s linear, color .18s linear;
                            z-index: 1;
                        }
                    }
                    .graphic {
                        position: absolute;
                        top: 0px;
                        left: 0px;
                        width: 100%;
                        height: 100%;
                        background-color: #ff9432c9;
                        border-radius: 14px;
                    }
                }
            }
        }
        .steps-body-wrapper {
            .steps-body {
                position: relative;
                padding: 24px;
                .the-step {
                    position: relative;
                    z-index: 3;
                    &:not(.active) {
                        display: none;
                    }
                    &.generate-programs {
                        .tags-list-wrapper {
                            .tag {
                                &.disabled {
                                    color: #c9c9c9;
                                    border-color: #c9c9c9;
                                    pointer-events: none;
                                }
                            }
                        }
                    }
                    &.wellness-module {
                        .generated-select > .opt-option-field {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            gap: 20px;
                        }
                        .add.fit-button {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: 100%;
                            height: 52px;
                            max-height: unset;
                            padding: 0;
                            background-color: unset;
                            border: 1px solid #b4bdf1;
                            transition: border-color .15s linear;
                            opacity: 0;
                            visibility: hidden;
                            &:hover {
                                border-color: #2e358f;
                                svg {
                                    > .circle {
                                        fill: #2e358f;
                                        stroke: #2e358f;
                                        stroke-width: 7px;
                                    }
                                    > :not(.circle) {
                                        fill: #fff;
                                    }
                                }
                            }
                            svg {
                                width: 30px;
                                height: 30px;
                                vertical-align: middle;
                                > .circle {
                                    fill: transparent;
                                }
                                > :not(.circle) {
                                    fill: #2e358f;
                                }
                            }
                        }
                    }
                    .content-section .section-options {
                        margin-top: unset;
                        padding: 20px 0 10px;
                        .options-holder:has(.save-template) {
                            flex-direction: column;
                            gap: 20px;
                            margin-top: 40px;
                            .template-description {
                                position: relative;
                                display: flex;
                                flex-direction: column;
                                width: 100%;
                                min-height: 60px;
                                padding: 20px;
                                white-space: pre-wrap;
                                cursor: text;
                                border: 1px solid #c4c4c4;
                                -webkit-border-radius: 14px;
                                -moz-border-radius: 14px;
                                border-radius: 14px;
                                &:empty:before {
                                    content: attr(data-placeholder);
                                    display: block;
                                    color: #a4a4a4;
                                    pointer-events: none;
                                }
                            }
                        }
                    }
                    .wellness-type.challenge-program {
                        position: relative;
                        display: flex;
                        flex-direction: column;
                        width: 100%;
                        padding: 0 20px;
                        border: 1px solid #2e358f;
                        border-radius: 14px;
                        -webkit-transition: border-color .18s linear;
                        -moz-transition: border-color .18s linear;
                        -ms-transition: border-color .18s linear;
                        -o-transition: border-color .18s linear;
                        transition: border-color .18s linear;
                        &.incomplete {
                            border: 2px solid #ff0000;
                        }
                        &[data-status=closed] {
                            &:not(:first-child) .remove {
                                display: flex;
                            }
                            .type-header {
                                .accordion-wellness > .opened {
                                    display: none;
                                }
                            }
                        }
                        &[data-status=opened] {
                            .type-header {
                                background-color: #fff;
                                .accordion-wellness > .closed {
                                    display: none;
                                }
                            }
                        }
                        .remove {
                            position: absolute;
                            top: 0;
                            right: 0;
                            display: none;
                            justify-content: center;
                            align-items: center;
                            padding: 6px;
                            line-height: 1;
                            font-size: 10px;
                            font-weight: 700;
                            color: #2e358f;
                            background-color: #e4e8f4;
                            border-radius: 0 14px 0 10px;
                            transition: all .3s ease;
                            &:hover {
                                color: #fff;
                                background-color: #2e358f;
                            }
                        }
                        .type-header {
                            position: relative;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            .type-header-status {
                                flex-grow: 1;
                                .title-status {
                                    display: flex;
                                    align-items: center;
                                    column-gap: 20px;
                                    > .title {
                                        display: flex;
                                        flex-shrink: 0;
                                    }
                                    .program-selected {
                                        display: flex;
                                        flex-direction: column;
                                        flex-grow: 1;
                                        .row {
                                            display: flex;
                                            flex-grow: 1;
                                            gap: 20px;
                                            .title {
                                                display: flex;
                                                flex-grow: 1;
                                                color: #2e358f;
                                            }
                                        }
                                    }
                                    .title, .program-selected .title {
                                        font-size: 12px;
                                        font-weight: 600;
                                    }
                                    .ft-icons-check-circle {
                                        display: flex;
                                        flex-shrink: 0;
                                        &.hide {
                                            display: none;
                                        }
                                        svg {
                                            width: 20px;
                                            height: 20px;
                                            .outer-background {
                                                fill: #2e358f;
                                            }
                                            .check {
                                                fill: #fafafa;
                                            }
                                        }
                                    }
                                }
                            }
                            .type-header-options {
                                position: relative;
                                display: flex;
                                flex-direction: row;
                                align-items: center;
                                .accordion-wellness {
                                    font-size: 12px;
                                    display: flex;
                                    line-height: 22px;
                                    align-items: center;
                                    background-color: transparent;
                                    span {
                                        &.closed {
                                            line-height: 24px;
                                            height: 16px;
                                        }
                                        &.opened {
                                            line-height: 38px;
                                            height: 30px;
                                        }
                                        i {
                                            font-size: 16px;
                                        }
                                    }
                                }
                            }
                        }
                        .type-content {
                            padding: 0;
                            overflow: hidden;
                            .program {
                                position: relative;
                                display: flex;
                                flex-direction: column;
                                margin-bottom: 20px;
                                font-size: 12px;
                                border: 2px solid #e8eaf6;
                                border-radius: 14px;
                                -webkit-transition: border-color .18s linear;
                                -moz-transition: border-color .18s linear;
                                -ms-transition: border-color .18s linear;
                                -o-transition: border-color .18s linear;
                                transition: border-color .18s linear;
                                &:hover {
                                    border-color: #b4bdf1;
                                }
                                &.selected {
                                    border-color: #2e358f;
                                }
                                &[data-vd-open=true] {
                                    .thumbnail {
                                        border-radius: 10px 0 10px 0;
                                    }
                                }
                                .list-header {
                                    display: flex;
                                    gap: 20px;
                                    cursor: pointer;
                                    > div {
                                        display: flex;
                                    }
                                }
                                .col1 {
                                    flex-shrink: 0;
                                }
                                .thumbnail {
                                    width: 100px;
                                    object-fit: cover;
                                    object-position: center;
                                    border-radius: 10px 0 0 10px;
                                }
                                .program-col {
                                    > .row {
                                        display: flex;
                                        flex-grow: 1;
                                        gap: 20px;
                                        .title {
                                            display: flex;
                                            flex-grow: 1;
                                            font-weight: 500;
                                            font-size: clamp(12px, 5vw, 20px);
                                        }
                                    }
                                    .description {
                                        color: #222;
                                        font-size: clamp(12px, 3vw, 16px);
                                        &~.read-more {
                                            font-size: clamp(12px, 3vw, 16px);
                                        }
                                    }
                                }
                                .radio {
                                    flex-shrink: 0;
                                    margin-right: 20px;
                                    input[type=radio] {
                                        min-width: 20px;
                                    }
                                }
                                .view-details-btn-wrapper {
                                    /* display: flex; */
                                    display: none;
                                    .view-details-btn {
                                        display: flex;
                                        align-items: center;
                                        gap: 7px;
                                        color: #2e358f;
                                    }
                                }
                            }
                        }
                        .col2 {
                            display: flex;
                            flex-direction: column;
                            align-self: center;
                            flex-grow: 1;
                            max-height: 100px;
                            padding: 10px 0;
                            &:has(.read-more-wrapper .read-more[data-expanded=true]) {
                                max-height: unset;
                            }
                        }
                        .row .program-info {
                            display: flex;
                            align-items: center;
                            flex-shrink: 0;
                            gap: 5px;
                            font-size: 12px;
                            .col {
                                display: flex;
                                flex-direction: column;
                                .length, .goals {
                                    display: flex;
                                    justify-content: flex-end;
                                    color: #a3a3a3;
                                    &.length .number {
                                        padding-right: 3px;
                                    }
                                    &.goals {
                                        color: red;
                                        .goal {
                                            &:not(:last-child) {
                                                margin-right: 10px;
                                                &::after {
                                                    content: '|';
                                                    position: absolute;
                                                    right: -5px;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                    .challenge-summary {
                        margin: 20px 0;
                        .info {
                            display: flex;
                            flex-direction: column;
                            max-width: 250px;
                            .module-total {
                                margin-top: unset;
                                font-size: 14px;
                                font-weight: unset;
                                color: unset;
                            }
                            .total {
                                display: flex;
                                align-items: center;
                                gap: 20px;
                                margin-top: 10px;
                                font-weight: 700;
                                .config {
                                    position: absolute;
                                    left: 100%;
                                    padding-left: 5px;
                                }
                            }
                            .total, .module-total {
                                justify-content: space-between;
                                gap: 20px;
                                .label1, .label2 {
                                    display: flex;
                                    align-items: center;
                                    gap: 5px;
                                    &.label1 {
                                        flex-grow: 1;
                                    }
                                    &.label2 {
                                        position: relative;
                                    }
                                }
                                .number {
                                    display: flex;
                                    justify-content: flex-end;
                                }
                            }
                            .config {
                                display: flex;
                                font-size: 12px;
                                font-weight: 400;
                                color: #4b58ff;
                                white-space: nowrap;
                                &:hover {
                                    text-decoration: underline;
                                }
                            }
                        }
                        .section-options {
                            padding: unset;
                            .option {
                                padding: 10px 0;
                            }
                        }
                    }
                    .module-total {
                        display: flex;
                        gap: 5px;
                        margin-top: 40px;
                        font-weight: 700;
                        color: #2e358f;
                        &.hide {
                            display: none;
                        }
                    }
                }
                .steps-controls {
                    position: relative;
                    display: flex;
                    &[data-final=false] .final-step {
                        display: none;
                    }
                    &[data-final=true] .next-step {
                        display: none;
                    }
                }
            }
        }
    }

    #calendar-widget {
        background-color: #fff;
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 3;
        min-width: 358px;
        &.fit-device {
            position: fixed;
            top: 0px;
            left: 50%;
            padding: 0 40px;
            background-color: #fff;
            z-index: 5;
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            transform: translateX(-50%);
        }
    }
    .fit-calendar-widget {
        position: relative;
        display: flex;
        flex-basis: 50%;
        flex-direction: column;
        z-index: 5;
        &[data-type=grid] {
            position: relative;
            display: flex;
            flex-direction: column;
            width: 100%;
            -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, .15);
            -moz-box-shadow: 0 0 11px rgba(0, 0, 0, .15);
            box-shadow: 0 0 11px rgba(0, 0, 0, .15);
            .calendar-header {
                position: relative;
                display: flex;
                flex-direction: row;
                justify-content: center;
                margin-top: 12px;
                margin-bottom: 12px;
                .month-and-year {
                    position: relative;
                    display: flex;
                    justify-content: center;
                    width: 100%;
                    .month-year-list {
                        position: relative;
                        display: flex;
                        justify-content: space-evenly;
                        width: 40%;
                        height: 40px;
                        .labels-wrapper {
                            position: relative;
                            height: 100%;
                            font-size: 16px;
                            overflow: hidden;
                        }
                        .month-labels {
                            position: relative;
                            display: inline-flex;
                            height: 100%;
                            padding: 0;
                        }
                        .year-labels {
                            position: relative;
                            height: 100%;
                            span {
                                width: 100%;
                                font-weight: 400;
                            }
                        }
                        span {
                            position: relative;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            height: 100%;
                            font-weight: 400;
                            &.flex-item:not(:last-of-type) {
                                margin-right: 12px;
                            }
                        }
                    }
                }
                #expand-wrapper {
                    position: absolute;
                    top: 0px;
                    right: 20px;
                    display: flex;
                    justify-content: center;
                    width: 40px;
                    height: 40px;
                    font-size: 24px;
                    cursor: pointer;
                    &[data-status=expand] .expand, &[data-status=collapse] .collapse {
                        display: flex;
                    }
                    > span {
                        display: none;
                        padding: 5px 12px;
                        color: #2e358f;
                        background-color: #e8eaf6;
                        border-radius: 14px;
                        -webkit-transition: background-color .18s linear, color .18s linear;
                        -moz-transition: background-color .18s linear, color .18s linear;
                        -ms-transition: background-color .18s linear, color .18s linear;
                        -o-transition: background-color .18s linear, color .18s linear;
                        transition: background-color .18s linear, color .18s linear;
                        &:hover {
                            background-color: #ff9432;
                            color: #fff;
                        }
                    }
                }
            }
            .calendar-body {
                position: relative;
                padding: 0;
                color: #1e1e1e;
                font-size: 16px;
                .days-controls {
                    position: absolute;
                    top: -40px;
                    right: 0;
                    font-weight: 300;
                }
                .month-wrapper {
                    position: relative;
                    padding: 4px;
                    overflow: hidden;
                    .month-header span, .month-days div {
                        position: relative;
                        display: flex;
                        justify-content: center;
                        width: 54px;
                        text-align: center;
                        font-weight: 300;
                    }
                    .month-header {
                        position: relative;
                        display: flex;
                        justify-content: center;
                        flex-wrap: wrap;
                        color: #757575;
                        font-size: 13px;
                        z-index: 1;
                        span {
                            padding: 4px;
                        }
                    }
                    .month-days-wrapper {
                        position: relative;
                        display: block;
                        width: 100%;
                        .month-days {
                            position: relative;
                            display: flex;
                            justify-content: center;
                            flex-wrap: wrap;
                            margin-top: 12px;
                            z-index: 3;
                            &[data-active_challenge=ch1], &[data-active_challenge=ch2], &[data-active_challenge=ch3] {
                                &[data-active_challenge=ch1] {
                                    > .ch1 {
                                        background-color: var(--ch1-bg-color);
                                    }
                                    div.ch1 {
                                        &[data-ch1_status1=rest] .ch1.section[data-id="1"] {
                                            background: var(--ch-rest);
                                        }
                                        &[data-ch1_status2=rest] .ch1.section[data-id="2"] {
                                            background-image: var(--ch-rest);
                                        }
                                        &[data-ch1_status3=rest] .ch1.section[data-id="3"] {
                                            background: var(--ch-rest);
                                        }
                                        &[data-ch1_status1=completed] .ch1.section[data-id="1"] {
                                            background-color: var(--ch1-bg-color-done);
                                        }
                                        &[data-ch1_status2=completed] .ch1.section[data-id="2"] {
                                            background-color: var(--ch1-bg-color-done);
                                        }
                                        &[data-ch1_status3=completed] .ch1.section[data-id="3"] {
                                            background-color: var(--ch1-bg-color-done);
                                        }
                                        &.active:not([data-empty=""]) {
                                            .date {
                                                background-color: unset;
                                                border: 1px solid var(--ch1-color);
                                            }
                                            &[data-ch1_status1=completed] .ch1.section[data-id="1"] {
                                                background-color: var(--ch1-color);
                                            }
                                            &[data-ch1_status2=completed] .ch1.section[data-id="2"] {
                                                background-color: var(--ch1-color);
                                            }
                                            &[data-ch1_status3=completed] .ch1.section[data-id="3"] {
                                                background-color: var(--ch1-color);
                                            }
                                        }
                                        &:not(.active) {
                                            opacity: .6;
                                        }
                                    }
                                    .dot1:before, .dot1:hover:before {
                                        -webkit-transform: scale(1);
                                        -moz-transform: scale(1);
                                        -ms-transform: scale(1);
                                        -o-transform: scale(1);
                                        transform: scale(1);
                                    }
                                    div:hover .dot:not([data-challenge=ch1]):before {
                                        -webkit-transform: scale(0.8);
                                        -moz-transform: scale(0.8);
                                        -ms-transform: scale(0.8);
                                        -o-transform: scale(0.8);
                                        transform: scale(0.8);
                                    }
                                }
                                &[data-active_challenge=ch2] {
                                    > .ch2 {
                                        background-color: var(--ch2-bg-color);
                                    }
                                    div.ch2 {
                                        &[data-ch2_status1=rest] .ch2.section[data-id="1"] {
                                            background: var(--ch-rest);
                                        }
                                        &[data-ch2_status2=rest] .ch2.section[data-id="2"] {
                                            background: var(--ch-rest);
                                        }
                                        &[data-ch2_status3=rest] .ch2.section[data-id="3"] {
                                            background: var(--ch-rest);
                                        }
                                        &[data-ch2_status1=completed] .ch2.section[data-id="1"] {
                                            background-color: var(--ch2-bg-color-done);
                                        }
                                        &[data-ch2_status2=completed] .ch2.section[data-id="2"] {
                                            background-color: var(--ch2-bg-color-done);
                                        }
                                        &[data-ch2_status3=completed] .ch2.section[data-id="3"] {
                                            background-color: var(--ch2-bg-color-done);
                                        }
                                        &.active:not([data-empty=""]) {
                                            .date {
                                                background-color: unset;
                                                border: 1px solid var(--ch2-color);
                                            }
                                            &[data-ch2_status1=completed] .ch2.section[data-id="1"] {
                                                background-color: var(--ch2-color);
                                            }
                                            &[data-ch2_status2=completed] .ch2.section[data-id="2"] {
                                                background-color: var(--ch2-color);
                                            }
                                            &[data-ch2_status3=completed] .ch2.section[data-id="3"] {
                                                background-color: var(--ch2-color);
                                            }
                                        }
                                        &:not(.active) {
                                            opacity: .6;
                                        }
                                    }
                                    .dot2:before, .dot2:hover:before {
                                        -webkit-transform: scale(1);
                                        -moz-transform: scale(1);
                                        -ms-transform: scale(1);
                                        -o-transform: scale(1);
                                        transform: scale(1);
                                    }
                                    div:hover .dot:not([data-challenge=ch2]):before {
                                        -webkit-transform: scale(0.8);
                                        -moz-transform: scale(0.8);
                                        -ms-transform: scale(0.8);
                                        -o-transform: scale(0.8);
                                        transform: scale(0.8);
                                    }
                                }
                                &[data-active_challenge=ch3] {
                                    > .ch3 {
                                        background-color: var(--ch3-bg-color);
                                    }
                                    div.ch3 {
                                        &[data-ch3_status1=rest] .ch3.section[data-id="1"] {
                                            background: var(--ch-rest);
                                        }
                                        &[data-ch3_status2=rest] .ch3.section[data-id="2"] {
                                            background: var(--ch-rest);
                                        }
                                        &[data-ch3_status3=rest] .ch3.section[data-id="3"] {
                                            background: var(--ch-rest);
                                        }
                                        &[data-ch3_status1=completed] .ch3.section[data-id="1"] {
                                            background-color: var(--ch3-bg-color-done);
                                        }
                                        &[data-ch3_status2=completed] .ch3.section[data-id="2"] {
                                            background-color: var(--ch3-bg-color-done);
                                        }
                                        &[data-ch3_status3=completed] .ch3.section[data-id="3"] {
                                            background-color: var(--ch3-bg-color-done);
                                        }
                                        &.active:not([data-empty=""]) {
                                            .date {
                                                background-color: unset;
                                                border: 1px solid var(--ch3-color);
                                            }
                                            &[data-ch3_status1=completed] .ch3.section[data-id="1"] {
                                                background-color: var(--ch3-color);
                                            }
                                            &[data-ch3_status2=completed] .ch3.section[data-id="2"] {
                                                background-color: var(--ch3-color);
                                            }
                                            &[data-ch3_status3=completed] .ch3.section[data-id="3"] {
                                                background-color: var(--ch3-color);
                                            }
                                        }
                                        &:not(.active) {
                                            opacity: .6;
                                        }
                                    }
                                    .dot3:before, .dot3:hover:before {
                                        -webkit-transform: scale(1);
                                        -moz-transform: scale(1);
                                        -ms-transform: scale(1);
                                        -o-transform: scale(1);
                                        transform: scale(1);
                                    }
                                    div:hover .dot:not([data-challenge=ch3]):before {
                                        -webkit-transform: scale(0.8);
                                        -moz-transform: scale(0.8);
                                        -ms-transform: scale(0.8);
                                        -o-transform: scale(0.8);
                                        transform: scale(0.8);
                                    }
                                }
                                div.ch1[data-ch1_total_modules="1"],
                                div.ch2[data-ch2_total_modules="1"],
                                div.ch3[data-ch3_total_modules="1"] {
                                    .section {
                                        top: 0;
                                        height: 100%;
                                        border-radius: 7px;
                                    }
                                }
                                div.ch1[data-ch1_total_modules="2"] {
                                    .ch1.section {
                                        height: 50%;
                                        &:nth-child(1 of .ch1.section) {
                                            top: 0;
                                            border-radius: unset;
                                            border-top-left-radius: 7px;
                                            border-top-right-radius: 7px;
                                        }
                                        &:nth-last-child(1 of .ch1.section) {
                                            top: 50%;
                                            border-radius: unset;
                                            border-bottom-left-radius: 7px;
                                            border-bottom-right-radius: 7px;
                                        }
                                    }
                                }
                                div.ch2[data-ch2_total_modules="2"] {
                                    .ch2.section {
                                        height: 50%;
                                        &:nth-child(1 of .ch2.section) {
                                            top: 0;
                                            border-radius: unset;
                                            border-top-left-radius: 7px;
                                            border-top-right-radius: 7px;
                                        }
                                        &:nth-last-child(1 of .ch2.section) {
                                            top: 50%;
                                            border-radius: unset;
                                            border-bottom-left-radius: 7px;
                                            border-bottom-right-radius: 7px;
                                        }
                                    }
                                }
                                div.ch3[data-ch3_total_modules="2"] {
                                    .ch3.section {
                                        height: 50%;
                                        &:nth-child(1 of .ch3.section) {
                                            top: 0;
                                            border-radius: unset;
                                            border-top-left-radius: 7px;
                                            border-top-right-radius: 7px;
                                        }
                                        &:nth-last-child(1 of .ch3.section) {
                                            top: 50%;
                                            border-radius: unset;
                                            border-bottom-left-radius: 7px;
                                            border-bottom-right-radius: 7px;
                                        }
                                    }
                                }
                                div.ch1[data-ch1_total_modules="3"] {
                                    .ch1.section {
                                        height: 33%;
                                        &:nth-child(1 of .ch1.section) {
                                            top: 2%;
                                            border-radius: unset;
                                            border-top-left-radius: 7px;
                                            border-top-right-radius: 7px;
                                        }
                                        &.ch1.section[data-id="2"] {
                                            top: 35%;
                                        }
                                        &:nth-last-child(1 of .ch1.section) {
                                            top: 68%;
                                            border-radius: unset;
                                            border-bottom-left-radius: 7px;
                                            border-bottom-right-radius: 7px;
                                        }
                                    }
                                }
                                div.ch2[data-ch2_total_modules="3"] {
                                    .ch2.section {
                                        height: 33%;
                                        &:nth-child(1 of .ch2.section) {
                                            top: 2%;
                                            border-radius: unset;
                                            border-top-left-radius: 7px;
                                            border-top-right-radius: 7px;
                                        }
                                        &.ch2.section[data-id="2"] {
                                            top: 35%;
                                        }
                                        &:nth-last-child(1 of .ch2.section) {
                                            top: 68%;
                                            border-radius: unset;
                                            border-bottom-left-radius: 7px;
                                            border-bottom-right-radius: 7px;
                                        }
                                    }
                                }
                                div.ch3[data-ch3_total_modules="3"] {
                                    .ch3.section {
                                        height: 33%;
                                        &:nth-child(1 of .ch3.section) {
                                            top: 2%;
                                            border-radius: unset;
                                            border-top-left-radius: 7px;
                                            border-top-right-radius: 7px;
                                        }
                                        &.ch3.section[data-id="2"] {
                                            top: 35%;
                                        }
                                        &:nth-last-child(1 of .ch3.section) {
                                            top: 68%;
                                            border-radius: unset;
                                            border-bottom-left-radius: 7px;
                                            border-bottom-right-radius: 7px;
                                        }
                                    }
                                }
                                div.ch {
                                    &.ch-start {
                                        border-top-left-radius: 7px;
                                        border-bottom-left-radius: 7px;
                                    }
                                    &.ch-end {
                                        border-top-right-radius: 7px;
                                        border-bottom-right-radius: 7px;
                                    }
                                }
                                div:hover .date, div.active .date {
                                    background-color: unset;
                                }
                            }
                            > div {
                                margin-bottom: 16px;
                                padding: 4px;
                                color: #1e1e1e;
                                background-color: #fff;
                                font-size: 14px;
                                font-weight: 400;
                                -webkit-transition: background-color .3s linear;
                                -moz-transition: background-color .3s linear;
                                -ms-transition: background-color .3s linear;
                                -o-transition: background-color .3s linear;
                                transition: background-color .3s linear;
                                z-index: 3;
                                cursor: pointer;
                                &[data-empty=""] {
                                    color: #c4c4c4;
                                }
                                &:hover {
                                    &.ch1.ch2.ch3 {
                                        .dot1 {
                                            right: 36px;
                                        }
                                        .dot2 {
                                            right: 16px;
                                        }
                                    }
                                    &.ch1.ch2 {
                                        .dot1 {
                                            right: 16px;
                                        }
                                        .dot2 {
                                            right: -4px;
                                        }
                                    }
                                    &.ch2.ch3 {
                                        .dot2 {
                                            right: 16px;
                                        }
                                        .dot3 {
                                            right: -4px;
                                        }
                                    }
                                    &.ch1.ch3 {
                                        .dot1 {
                                            right: 16px;
                                        }
                                        .dot3 {
                                            right: -4px;
                                        }
                                    }
                                    .dot:hover:before {
                                        -webkit-transform: scale(1) !important;
                                        -moz-transform: scale(1) !important;
                                        -ms-transform: scale(1) !important;
                                        -o-transform: scale(1) !important;
                                        transform: scale(1) !important;
                                    }
                                }
                                &.ch1.ch2.ch3 {
                                    .dot1 {
                                        right: 24px;
                                    }
                                    .dot2 {
                                        right: 10px;
                                    }
                                }
                                &.ch1.ch2 {
                                    .dot1 {
                                        right: 10px;
                                    }
                                    .dot2 {
                                        right: -4px;
                                    }
                                }
                                &.ch2.ch3 {
                                    .dot2 {
                                        right: 10px;
                                    }
                                    .dot3 {
                                        right: -4px;
                                    }
                                }
                                &.ch1.ch3 {
                                    .dot1 {
                                        right: 10px;
                                    }
                                    .dot3 {
                                        right: -4px;
                                    }
                                }
                                &.disabled {
                                    .dot {
                                        -webkit-transform: scale(0);
                                        -moz-transform: scale(0);
                                        -ms-transform: scale(0);
                                        -o-transform: scale(0);
                                        transform: scale(0);
                                        &:before {
                                            -webkit-transform: scale(0);
                                            -moz-transform: scale(0);
                                            -ms-transform: scale(0);
                                            -o-transform: scale(0);
                                            transform: scale(0);
                                        }
                                    }
                                }
                                &.active:not([data-empty=""]) .date, &:hover .date {
                                    background-color: #fff;
                                    border-radius: 7px;
                                    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .5);
                                    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .5);
                                    box-shadow: 0 0 4px rgba(0, 0, 0, .5);
                                }
                                .date {
                                    position: relative;
                                    justify-content: center;
                                    display: flex;
                                    width: 100%;
                                    height: 100%;
                                    padding: 12px 0;
                                    border-radius: 7px;
                                    -webkit-transition: background-color .18s linear;
                                    -moz-transition: background-color .18s linear;
                                    -ms-transition: background-color .18s linear;
                                    -o-transition: background-color .18s linear;
                                    transition: background-color .18s linear;
                                }
                                .dot {
                                    position: absolute;
                                    top: -12px;
                                    right: -4px;
                                    display: block;
                                    width: 16px;
                                    height: 16px;
                                    border-radius: 50%;
                                    -webkit-transition: right .18s linear;
                                    -moz-transition: right .18s linear;
                                    -ms-transition: right .18s linear;
                                    -o-transition: right .18s linear;
                                    transition: right .18s linear;
                                    &.dot1:before {
                                        background-color: var(--ch1-color);
                                    }
                                    &.dot2:before {
                                        background-color: var(--ch2-color);
                                    }
                                    &.dot3:before {
                                        background-color: var(--ch3-color);
                                    }
                                }
                                .dot:before {
                                    content: "";
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    width: 100%;
                                    height: 100%;
                                    border-radius: 50%;
                                    -webkit-transform: scale(0.45);
                                    -moz-transform: scale(0.45);
                                    -ms-transform: scale(0.45);
                                    -o-transform: scale(0.45);
                                    transform: scale(0.45);
                                    -webkit-transition: transform .18s linear;
                                    -moz-transition: transform .18s linear;
                                    -ms-transition: transform .18s linear;
                                    -o-transition: transform .18s linear;
                                    transition: transform .18s linear;
                                }
                            }
                            .section {
                                content: "";
                                position: absolute;
                                left: 0;
                                display: block;
                                width: 100%;
                                height: 0%;
                                -webkit-transition: background-color .18s linear, height .2s linear;
                                -moz-transition: background-color .18s linear, height .2s linear;
                                -ms-transition: background-color .18s linear, height .2s linear;
                                -o-transition: background-color .18s linear, height .2s linear;
                                transition: background-color .18s linear, height .2s linear;
                                z-index: -1;
                            }
                        }
                        .mobile-challenge-switch {
                            position: relative;
                            display: none;
                            padding: 20px 0 20px 20px;
                            &[data-count_challenges="1"] .switch-wrapper .dot1 {
                                display: flex;
                            }
                            &[data-count_challenges="2"] .switch-wrapper :is(.dot1, .dot2) {
                                display: flex;
                            }
                            &[data-count_challenges="3"] .switch-wrapper :is(.dot1, .dot2, .dot3) {
                                display: flex;
                            }
                            &[data-active_challenge=ch1] .switch-wrapper .dot1:after {
                                -webkit-transform: scale(1.4);
                                -moz-transform: scale(1.4);
                                -ms-transform: scale(1.4);
                                -o-transform: scale(1.4);
                                transform: scale(1.4);
                            }
                            &[data-active_challenge=ch2] .switch-wrapper .dot2:after {
                                -webkit-transform: scale(1.4);
                                -moz-transform: scale(1.4);
                                -ms-transform: scale(1.4);
                                -o-transform: scale(1.4);
                                transform: scale(1.4);
                            }
                            &[data-active_challenge=ch3] .switch-wrapper .dot3:after {
                                -webkit-transform: scale(1.4);
                                -moz-transform: scale(1.4);
                                -ms-transform: scale(1.4);
                                -o-transform: scale(1.4);
                                transform: scale(1.4);
                            }
                            .switch-wrapper {
                                position: relative;
                                display: flex;
                                margin-left: 20px;
                                .switch {
                                    position: relative;
                                    display: none;
                                    width: 24px;
                                    height: 24px;
                                    border-radius: 50%;
                                    cursor: pointer;
                                    -webkit-transition: right .18s linear;
                                    -moz-transition: right .18s linear;
                                    -ms-transition: right .18s linear;
                                    -o-transition: right .18s linear;
                                    transition: right .18s linear;
                                    &:not(:first-child) {
                                        margin-left: 20px;
                                    }
                                    &:before {
                                        content: "";
                                        position: absolute;
                                        top: 0px;
                                        left: 0px;
                                        width: 100%;
                                        height: 100%;
                                        border-radius: 50%;
                                        -webkit-transform: scale(1);
                                        -moz-transform: scale(1);
                                        -ms-transform: scale(1);
                                        -o-transform: scale(1);
                                        transform: scale(1);
                                        -webkit-transition: transform .18s linear;
                                        -moz-transition: transform .18s linear;
                                        -ms-transition: transform .18s linear;
                                        -o-transition: transform .18s linear;
                                        transition: transform .18s linear;
                                    }
                                    &:after {
                                        content: "";
                                        position: absolute;
                                        top: 0px;
                                        left: 0px;
                                        width: 100%;
                                        height: 100%;
                                        border-radius: 50%;
                                        -webkit-transform: scale(0);
                                        -moz-transform: scale(0);
                                        -ms-transform: scale(0);
                                        -o-transform: scale(0);
                                        transform: scale(0);
                                        -webkit-transition: transform .18s linear;
                                        -moz-transition: transform .18s linear;
                                        -ms-transition: transform .18s linear;
                                        -o-transition: transform .18s linear;
                                        transition: transform .18s linear;
                                    }
                                }
                                .dot1 {
                                    &:before {
                                        background-color: var(--ch1-color);
                                    }
                                    &:after {
                                        border: 2px solid var(--ch1-color);
                                    }
                                }
                                .dot2 {
                                    &:before {
                                        background-color: var(--ch2-color);
                                    }
                                    &:after {
                                        border: 2px solid var(--ch2-color);
                                    }
                                }
                                .dot3 {
                                    &:before {
                                        background-color: var(--ch3-color);
                                    }
                                    &:after {
                                        border: 2px solid var(--ch3-color);
                                    }
                                }
                            }
                        }
                    }
                }
                .month-arrows {
                    position: absolute;
                    top: 52px;
                    display: none;
                    width: 100%;
                    height: 100%;
                    z-index: 1;
                }
            }
            .calendar-arrow {
                position: relative;
                padding-left: 10px;
                padding-right: 10px;
                color: #1e1e1e;
                line-height: 36px;
                font-size: 40px;
                font-weight: 300;
                cursor: pointer;
                -webkit-transition: color .18s linear;
                -moz-transition: color .18s linear;
                -ms-transition: color .18s linear;
                -o-transition: color .18s linear;
                transition: color .18s linear;
                &:hover {
                    color: #ff9432;
                }
            }
            .calendar-icon {
                position: absolute;
                left: 24px;
                top: 4px;
                font-size: 24px;
                color: #ff9432;
                z-index: 1;
            }
        }
        &[data-type=row] {
            position: relative;
            display: flex;
            flex-direction: column;
            width: 400px;
            padding: 16px 16px;
            background-color: #fff;
            border-radius: 14px;
            -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, .15);
            -moz-box-shadow: 0 0 11px rgba(0, 0, 0, .15);
            box-shadow: 0 0 11px rgba(0, 0, 0, .15);
        }
        .number {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 23px;
            height: 23px;
            background-color: var(--date-bg-color);
            border-radius: 50%;
            &.todays-date {
                color: #fff;
                background-color: #000;
            }
        }
    }

    .main-content {
        &[data-content-type=sales-tools] {
            .section-title {
                margin-bottom: 20px;
            }
            .section-options {
                margin-top: 0;
                padding: 0;
            }
        }
        &[data-content-type=invite-member] {
            .user-list-wrapper .user-list-holder {
                margin-top: 20px;
            }
            .section-title {
                &[data-status=participating],
                &[data-status=pending],
                &[data-status=sitting_out],
                &[data-status=cancelled],
                &[data-status=completed],
                &[data-status=uninvited] {
                    display: none;
                    &.active {
                        display: block;
                    }
                }
            }
            .user-list-item {
                gap: 20px;
                .list-col-info {
                    justify-content: space-between;
                    flex-basis: unset;
                    column-gap: 20px;
                    .col1 {
                        flex-direction: column;
                        flex-basis: unset;
                        flex-grow: 1;
                        .row {
                            &.title {
                                font-weight: 700;
                            }
                            &:not(.title) {
                                font-size: 12px;
                            }
                        }
                    }
                    .col2 {
                        flex-direction: column;
                        flex-basis: unset;
                        flex-shrink: 0;
                        align-items: flex-end;
                        font-size: 12px;
                        .active {
                            color: #1da7c4;
                        }
                    }
                }
                .list-col-controls {
                    flex-basis: unset;
                }
            }
        }
        &[data-content-type=wearable-metrics] {
            .wearables-nav {
                display: flex;
                align-items: center;
                gap: 10px;
                margin-bottom: 20px;
            }
            .wearables-tab {
                display: flex;
                align-items: center;
                gap: 5px;
                background: #f5f6fa;
                border: 1px solid #d1d5db;
                color: #b0b3b8;
                border-radius: 6px;
                padding: 4px 12px;
                font-weight: 600;
                font-size: 14px;
                transition: color 0.2s, background 0.2s;
            }
            .wearables-tab.active {
                color: #222;
                cursor: pointer;
            }
            .wearables-tab:not(.active):hover {
                background: #f5f6fa;
            }
            
            .date-range-wrapper {
                display: flex;
                align-items: flex-end;
                gap: 16px;
                padding: 15px;
                flex-wrap: wrap;
                position: relative;

                .date-range-presets {
                    display: flex;
                    gap: 8px;
                    
                    .preset-btn {
                        padding: 8px 16px;
                        border: 1px solid #e2e8f0;
                        border-radius: 6px;
                        font-size: 14px;
                        color: #2d3748;
                        background-color: #fff;
                        cursor: pointer;
                        transition: all 0.2s ease-in-out;

                        &:hover {
                            border-color: #4299e1;
                            color: #4299e1;
                        }

                        &.active {
                            background-color: #4299e1;
                            border-color: #4299e1;
                            color: #fff;
                        }
                    }
                }

                .date-status-wrapper {
                    display: flex;

                    .fitbit-metrics-grid {
                        display: flex;
                        gap: 1rem;
                        margin: 1rem 0;
                    }
                    .collapse-metrics-button {
                        display: none;
                    }
                    .metric-tile {
                        background: #fff;
                        border-radius: 12px;
                        padding: 0.7rem;
                        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
                        border-left: 4px solid #ddd;
                        transition: all 0.3s ease;
                        max-width: 100px;
                        max-height: 90px;

                        &.status-success {
                            border-left-color: #28a745;
                        }
                        &.status-warning {
                            border-left-color: #ffc107;
                        }
                        &.status-danger {
                            border-left-color: #dc3545;
                        }
                    }
                    
                    .metric-header {
                        display: flex;
                        align-items: center;
                        margin-bottom: 1rem;
                    }
                    
                    .metric-icon {
                        font-size: 1.2rem;
                        margin-right: 0.5rem;
                        color: #6c757d;
                    }
                    
                    .metric-title {
                        font-weight: 500;
                        color: #333;
                        font-size: 0.7rem;
                    }
                    
                    .metric-subtitle {
                        font-size: 0.8rem;
                        color: #6c757d;
                        margin-left: 0.5rem;
                    }
                    
                    .metric-main {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                    }
                    
                    .metric-value {
                        font-size: 1rem;
                        font-weight: 700;
                        color: #333;
                        line-height: 1;
                    }
                    
                    .metric-secondary {
                        display: flex;
                        align-items: center;
                        gap: 0.5rem;
                        font-size: 0.9rem;
                    }
                    
                    .metric-percentage {
                        font-weight: 600;
                        color: #28a745;
                    }
                    
                    .metric-trend {
                        font-size: 1.2rem;
                    }
                    
                    .metric-vs {
                        color: #6c757d;
                        font-size: 0.8rem;
                    }
                    
                    .metric-goal, .metric-difference {
                        font-size: 0.8rem;
                        color: #6c757d;
                    }
                    
                    .metric-mood {
                        font-size: 1rem;
                    }
                    
                    .metric-goal-inline, .metric-baseline {
                        font-weight: 600;
                        color: #333;
                    }
                }

                .date-preset-wrapper {
                    display: flex;
                    flex-direction: column;
                    gap: 20px;
                    margin-left: auto;

                    .active-zone-toggle {
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                        gap: 8px;
                        margin-top: 10px;
                        
                        label {
                            margin: 0;
                            font-size: 12px;
                            color: #666;
                            font-weight: 500;
                        }
                        
                        .fit-toggle {
                            width: 50px;
                            height: 25px;
                            
                            .slider {
                                width: 50px;
                                height: 20px;
                                
                                &:before {
                                    width: 14px;
                                    height: 14px;
                                    left: 3px;
                                    bottom: 3px;
                                }
                            }
                            
                            &:has(> input:checked) .slider:before {
                                transform: translateX(26px);
                            }
                            
                            .label {
                                font-size: 10px;
                                top: -18px;
                            }
                        }
                    }

                    .compare-active {
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                        gap: 4px;

                        div {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 4px;

                            label {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                gap: 4px;
                            }
                        }

                        .fit-button {
                            margin-left: auto;
                            height: 20px;
                            padding: 4px 8px;
                            align-self: flex-end;
                            font-size: 8px;
                            min-width: 40px;
                        }
                    }

                    .date-filter {
                        display: flex;
                        gap: 20px;
                        padding: 5px 10px;
                        border-radius: 5px;
                        color: #4d5359;
                        background-color: #f0f5fd;

                        .date-preset {
                            cursor: pointer;
                            transition: all 0.2s ease;
                            position: relative;
                            
                            &:hover {
                                color: black;
                                background-color: rgba(0, 0, 0, 0.05);
                                border-radius: 4px;
                                padding: 2px 6px;
                                margin: -2px -6px;
                            }
                            
                            &.active {
                                background-color: #007cba;
                                color: white;
                                border-radius: 4px;
                                padding: 2px 6px;
                                margin: -2px -6px;
                                font-weight: 600;
                                
                                &:hover {
                                    background-color: #005a87;
                                }
                            }
                        }
                    }
                }

                .date-range-item {
                    display: flex;
                    flex-direction: column;
                    gap: 6px;

                    label {
                        font-size: 13px;
                        font-weight: 600;
                        color: #4a5568;
                        text-align: left;
                    }

                    input[type="date"] {
                        padding: 8px 12px;
                        border: 1px solid #e2e8f0;
                        border-radius: 6px;
                        font-size: 14px;
                        color: #2d3748;
                        background-color: #fff;
                        transition: all 0.2s ease-in-out;
                        min-width: 160px;

                        &:focus {
                            outline: none;
                            border-color: #4299e1;
                            box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
                        }

                        &:hover {
                            border-color: #cbd5e0;
                        }
                    }
                }

                .remember-choice {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    
                    input[type="checkbox"] {
                        width: 16px;
                        height: 16px;
                        cursor: pointer;
                    }
                    
                    label {
                        font-size: 13px;
                        color: #4a5568;
                        cursor: pointer;
                    }
                }

                .fit-button.v3.large.custom_fit_button {
                    height: 38px;
                    padding: 8px 20px;
                    align-self: flex-end;
                    font-size: 14px;
                    min-width: 80px;
                }
            }
            .section-options {
                .date-preset-wrapper {
                    display: flex;
                    flex-direction: column;
                    gap: 20px;
                    margin-left: auto;

                    .active-zone-toggle {
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                        gap: 8px;
                        margin-top: 10px;
                        
                        label {
                            margin: 0;
                            font-size: 12px;
                            color: #666;
                            font-weight: 500;
                        }
                        
                        .fit-toggle {
                            width: 50px;
                            height: 25px;
                            
                            .slider {
                                width: 50px;
                                height: 20px;
                                
                                &:before {
                                    width: 14px;
                                    height: 14px;
                                    left: 3px;
                                    bottom: 3px;
                                }
                            }
                            
                            &:has(> input:checked) .slider:before {
                                transform: translateX(26px);
                            }
                            
                            .label {
                                font-size: 10px;
                                top: -18px;
                            }
                        }
                    }

                    .compare-active {
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                        gap: 4px;

                        div {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 4px;

                            label {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                gap: 4px;
                            }
                        }

                        .fit-button {
                            margin-left: auto;
                            height: 20px;
                            padding: 4px 8px;
                            align-self: flex-end;
                            font-size: 8px;
                            min-width: 40px;
                        }
                    }

                    .date-filter {
                        display: flex;
                        gap: 20px;
                        padding: 5px 10px;
                        border-radius: 5px;
                        color: #4d5359;
                        background-color: #f0f5fd;

                        .date-preset {
                            cursor: pointer;
                            transition: all 0.2s ease;
                            position: relative;
                            
                            &:hover {
                                color: black;
                                background-color: rgba(0, 0, 0, 0.05);
                                border-radius: 4px;
                                padding: 2px 6px;
                                margin: -2px -6px;
                            }
                            
                            &.active {
                                background-color: #007cba;
                                color: white;
                                border-radius: 4px;
                                padding: 2px 6px;
                                margin: -2px -6px;
                                font-weight: 600;
                                
                                &:hover {
                                    background-color: #005a87;
                                }
                            }
                        }
                    }
                }

                .date-range-item {
                    display: flex;
                    flex-direction: column;
                    gap: 6px;

                    label {
                        font-size: 13px;
                        font-weight: 600;
                        color: #4a5568;
                        text-align: left;
                    }

                    input[type="date"] {
                        padding: 8px 12px;
                        border: 1px solid #e2e8f0;
                        border-radius: 6px;
                        font-size: 14px;
                        color: #2d3748;
                        background-color: #fff;
                        transition: all 0.2s ease-in-out;
                        min-width: 160px;

                        &:focus {
                            outline: none;
                            border-color: #4299e1;
                            box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
                        }

                        &:hover {
                            border-color: #cbd5e0;
                        }
                    }
                }

                .fitbit-sync-info {
                    width: 100%;
                    margin-bottom: 15px;
                    padding: 10px;
                    background-color: #f8f9fa;
                    border-radius: 5px;
                    border-left: 4px solid #007cba;

                    .fitbit-sync-content {
                        display: flex;
                        align-items: center;
                        gap: 8px;

                        i {
                            color: #007cba;
                        }
                        .last-sync {
                            color: #666;
                        }
                    }
                }
                
                .fitbit-data {
                    .fitbit-data-item-title {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        margin-bottom: 10px;
                    }

                    .stages-chart {
                        position: relative; 
                        height: 250px; 
                        width: 100%; 
                        margin: 0 auto 20px;
                    }

                    .chart-wrapper {
                        position: relative;
                        height: 250px;
                        width: 100%;
                        margin: 0 auto 20px;
                    }
                    
                    .progress-bar {
                        background-color: #eee;
                        height: 10px;
                        border-radius: 5px;
                        margin-top: 10px;
                    }
                    
                    .progress-bar-fill {
                        height: 100%;
                        border-radius: 5px;
                    }
                    
                    .summary-grid {
                        display: grid;
                        grid-template-columns: repeat(2, 1fr);
                        gap: 20px;
                        margin-top: 10px;
                    }
                    
                    .progress-bar-fill {
                        height: 100%;
                        border-radius: 5px;
                    }
    
                    .zone-item {
                        font-size: 13px;
                        font-weight: 600;
                        display: flex;
                        flex-direction: column;
                        margin-bottom: 8px;
                        
                        &[data-zone="0"] { color: #FF6384; }
                        &[data-zone="1"] { color: #36A2EB; }
                        &[data-zone="2"] { color: #FFCE56; }
                        &[data-zone="3"] { color: #4BC0C0; }
                        
                        .zone-name {
                            font-weight: 700;
                            margin-bottom: 2px;
                        }
                        
                        .zone-range {
                            font-size: 12px;
                            opacity: 0.8;
                        }
                        
                        .zone-minutes {
                            font-size: 11px;
                            font-weight: 500;
                            opacity: 0.9;
                            margin-top: 2px;
                        }
                    }

                    /* Sleep Stages Summary Styles */
                    .sleep-stages-summary {
                        background: #f8f9fa;
                        border-radius: 8px;
                        padding: 20px;
                        margin: 20px 0;

                        h4 {
                            margin: 0 0 15px 0;
                            color: #333;
                            font-size: 16px;
                            font-weight: 600;
                        }
                    }

                    .stages-grid {
                        display: grid;
                        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
                        gap: 15px;
                    }

                    .stage-item {
                        display: flex;
                        align-items: center;
                        gap: 10px;
                        padding: 10px;
                        background: white;
                        border-radius: 6px;
                        border: 1px solid #e9ecef;
                    }

                    .stage-color {
                        width: 12px;
                        height: 12px;
                        border-radius: 50%;
                        flex-shrink: 0;
                    }

                    .stage-info {
                        display: flex;
                        flex-direction: column;
                        gap: 2px;
                    }

                    .stage-label {
                        font-size: 12px;
                        color: #666;
                        font-weight: 500;
                    }

                    .stage-value {
                        font-size: 14px;
                        color: #333;
                        font-weight: 600;
                    }

                    /* Update existing summary grid to accommodate new item */
                    .summary-grid {
                        display: grid;
                        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                        gap: 15px;
                        margin-top: 15px;
                    }

                    .avg-time-in-bed {
                        text-align: center;
                        background: #f8f9fa;
                        padding: 15px;
                        border-radius: 8px;
                        border: 1px solid #e9ecef;

                        h4 {
                            margin: 0 0 8px 0;
                            font-size: 14px;
                            color: #666;
                        }

                        .sleep-value {
                            font-size: 18px;
                            font-weight: 600;
                            color: #ff9500;
                        }
                    }
    
                    h4.margin-top-20 {
                        margin-top: 20px;
                    }
                    .avg-heart-rate, .avg-steps {
                        h4 {
                            margin-top: 0;
                        }
                    }
                    .heart-rate-value, .steps-value {
                        font-size: 18px;
                        font-weight: 700;
                        margin-bottom: 8px;
                    }
                    .progress-bar {
                        background-color: #eee;
                        height: 10px;
                        border-radius: 5px;
                        margin-top: 10px;
                        width: 100%;
                    }
                    .progress-bar > div {
                        height: 100%;
                        border-radius: 5px;
                    }
                    .progress-bar-fill {
                        height: 100%;
                        border-radius: 5px;
                    }
                    .goal-info {
                        font-size: 12px;
                        color: #888;
                        margin-top: 5px;
                    }
                    .zones-legend {
                        display: flex;
                        gap: 20px;
                        margin-top: 10px;
                    }
                    .steps-chart {
                        margin-bottom: 20px;

                        .center-chart {
                            display: flex;
                        }
                    }
                    .steps-summary-insight {
                        display: flex;
                        flex-direction: row;
                        gap: 20px;

                        .steps-insight-wrapper {
                            display: flex;
                            flex-direction: column;
                            gap: 10px;
                            min-height: 200px;
                            position: relative;
                            flex: 1;
                        }
                        .steps-insight-item {
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            background: #f8f9fa;
                            border-radius: 12px;
                            padding: 20px;
                            color: #333;
                            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                            opacity: 0;
                            transform: translateY(20px);
                            transition: all 0.5s ease-in-out;
                            min-height: 160px;
                            display: flex;
                            align-items: center;
                        }
                        
                        .steps-insight-item.active {
                            opacity: 1;
                            transform: translateY(0);
                        }
                        
                        .steps-insight-item h4 {
                            margin: 0;
                            font-size: 16px;
                            line-height: 1.4;
                            font-weight: 500;
                            text-align: center;
                        }
                        
                        .tip-indicator {
                            position: absolute;
                            bottom: 15px;
                            left: 50%;
                            transform: translateX(-50%);
                            display: flex;
                            gap: 8px;
                            z-index: 10;
                        }
                        
                        .dot {
                            width: 8px;
                            height: 8px;
                            border-radius: 50%;
                            background: #ccc;
                            transition: background 0.3s ease;
                            cursor: pointer;
                        }
                        
                        .dot.active {
                            background: #666;
                        }
                        
                        .dot:hover {
                            background: #999;
                        }
                    }
                    .steps-summary {
                        margin-top: 20px;
                    }
                    .summary-grid {
                        display: grid;
                        grid-template-columns: repeat(2, 1fr);
                        gap: 20px;
                        margin-top: 10px;
                    }
                    .total-steps, .best-day {
                        h4 {
                            margin-bottom: 5px;
                        }
                    }

                    /* Insights Drawer Styles */
                    .insights-drawer {
                        display: none;
                        position: absolute;
                        top: 50px;
                        right: 0;
                        width: 300px;
                        height: 400px;
                        background: white;
                        border-radius: 12px;
                        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
                        transition: all 0.3s ease-in-out;
                        z-index: 1000;
                        overflow: hidden;
                    }

                    .insights-drawer.open {
                        display: block;
                        animation: slideInRight 0.3s ease-out;
                    }

                    @keyframes slideInRight {
                        from {
                            opacity: 0;
                            transform: translateX(20px);
                        }
                        to {
                            opacity: 1;
                            transform: translateX(0);
                        }
                    }

                    .insights-header {
                        background: #f8f9fa;
                        padding: 20px;
                        border-bottom: 1px solid #e9ecef;
                        display: flex;
                        align-items: center;
                        gap: 12px;
                    }

                    .insights-header i {
                        color: #ffc107;
                        font-size: 20px;
                    }

                    .insights-header h3 {
                        margin: 0;
                        font-size: 18px;
                        font-weight: 600;
                        color: #333;
                    }

                    .insights-content {
                        padding: 20px;
                        height: calc(100% - 80px);
                        overflow-y: auto;
                    }

                    .insight-card {
                        background: white;
                        border-radius: 12px;
                        padding: 20px;
                        margin-bottom: 20px;
                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
                        position: relative;
                        border-left: 4px solid transparent;
                        transition: transform 0.2s ease, box-shadow 0.2s ease;
                    }

                    .insight-card:hover {
                        transform: translateY(-2px);
                        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
                    }

                    .insight-card.motivation {
                        border-left-color: #4BC0C0;
                    }

                    .insight-card.health-goal {
                        border-left-color: #FF6384;
                    }

                    .insight-card.analysis {
                        border-left-color: #36A2EB;
                    }

                    .insight-accent {
                        position: absolute;
                        left: 0;
                        top: 0;
                        bottom: 0;
                        width: 4px;
                        border-radius: 2px;
                    }

                    .insight-card.motivation .insight-accent {
                        background: #4BC0C0;
                    }

                    .insight-card.health-goal .insight-accent {
                        background: #FF6384;
                    }

                    .insight-card.analysis .insight-accent {
                        background: #36A2EB;
                    }

                    .insight-content h4 {
                        margin: 0 0 12px 0;
                        font-size: 16px;
                        font-weight: 600;
                        color: #333;
                        line-height: 1.3;
                    }

                    .insight-content p {
                        margin: 0 0 15px 0;
                        font-size: 14px;
                        color: #666;
                        line-height: 1.5;
                    }

                    .insight-tag {
                        display: inline-block;
                        padding: 6px 12px;
                        background: #4BC0C0;
                        color: white;
                        font-size: 12px;
                        font-weight: 500;
                        border-radius: 20px;
                        text-transform: uppercase;
                        letter-spacing: 0.5px;
                    }

                    .insight-card.health-goal .insight-tag {
                        background: #FF6384;
                    }

                    /* Make fitbit-data-item relative for absolute positioning */
                    .fitbit-data-item {
                        position: relative;
                    }

                    /* Make fitbit-data-item-title simple */
                    .fitbit-data-item-title {
                        margin-bottom: 10px;
                    }

                    /* Insights container positioning */
                    .insights-container {
                        position: absolute;
                        top: 20px;
                        right: 20px;
                        z-index: 1001;
                    }

                    /* Add toggle button for insights drawer */
                    .insights-toggle {
                        background: #4BC0C0;
                        color: white;
                        border: none;
                        border-radius: 50%;
                        width: 40px;
                        height: 40px;
                        cursor: pointer;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 16px;
                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
                        transition: all 0.2s ease;
                    }

                    .insights-toggle:hover {
                        background: #3aa8a8;
                        transform: scale(1.05);
                    }

                    .insights-toggle i {
                        transition: transform 0.3s ease;
                    }

                    .insights-toggle.active i {
                        transform: rotate(180deg);
                    }

                    /* Responsive adjustments for insights */
                    @media (max-width: 768px) {
                        .insights-drawer {
                            width: 280px;
                            height: 350px;
                        }
                    }
                }
            }
        }
        &[data-content-type=connect-wearables] {
            .fitbit-device-logo-wrapper {
                position: relative;

                .fitbit-device-button {
                    display: flex; 
                    align-items: center;
                    gap: 10px;

                    .list-col-controls {
                        position: absolute;
                        right: 5px;
                    }
                }
            }
        }
    }

    .content-program-member-wrapper {
        .content-program-member {
            position: relative;
            &.active {
                &[data-status=completed], &[data-status=rest] {
                    &:has(.instructions-wrapper:not(.hidden-content)[data-status=completed]), &:has(.instructions-wrapper:not(.hidden-content)[data-status=rest]) {
                        .top-complete-btns {
                            justify-content: center;
                        }
                        .day-module-action {
                            &[data-status=""] {
                                display: block;
                            }
                            &:not([data-status=""]) {
                                display: none;
                            }
                        }
                        .content-program-member-overlay {
                            display: block;
                        }
                    }
                }
                &[data-status=program_completed] {
                    .content-program-member-overlay {
                        display: block;
                        top: -10px;
                        height: calc(100% + 20px);
                    }
                    .top-complete-btns {
                        .day-module-action {
                            display: none;
                        }
                    }
                }
                .day-module-action {
                    &:not([data-status=""]) {
                        display: block;
                    }
                }
            }
            &:not(.active) {
                display: none;
            }
            .content-options {
                position: relative;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                gap: 20px;
                .content-day-program {
                    position: relative;
                    display: flex;
                    flex-direction: row;
                    justify-content: left;
                    align-items: center;
                    gap: 20px;
                    .title-status {
                        display: flex;
                        > .title {
                            font-weight: 500;
                            font-size: 15px;
                        }
                        .status {
                            position: relative;
                            font-size: 12px;
                            color: #db3b3b;
                            margin-top: 10px;
                        }
                    }
                }
                .more-options-holder {
                    position: relative;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: flex-end;
                    .level {
                        position: relative;
                        color: #ff9432;
                        font-size: 12px;
                        font-weight: 600;
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        &:has(.challenge_level_list .list-item-level:only-child) {
                            display: none;
                        }
                        &[data-open=true] {
                            .challenge_level_list {
                                opacity: 1;
                                transform: translate(0, 0) scale(1);
                                pointer-events: auto;
                                cursor: pointer;
                            }
                        }
                        .level-icon {
                            position: relative;
                            display: flex;
                            display: none;
                            margin-left: 5px;
                            transform: scale(1.1, 1.1);
                            &.active {
                                svg path {
                                    fill: #ff9432;
                                }
                            }
                            &.v2 {
                                margin-left: 6px;
                            }
                            svg path {
                                fill: #757575;
                            }
                        }
                        .challenge_level_list {
                            position: absolute;
                            z-index: 900;
                            background-color: #e8eaf6;
                            border-radius: 4px;
                            box-shadow: 1px 1px 6px rgba(0, 0, 0, .45);
                            opacity: 0;
                            transform: translate(0, 15px) scale(0.95);
                            transition: transform .1s ease-out, opacity .1s ease-out;
                            pointer-events: none;
                            overflow: hidden;
                            display: flex;
                            flex-direction: column;
                            width: 130px;
                            -webkit-border-radius: 14px;
                            -moz-border-radius: 14px;
                            border-radius: 14px;
                            .list-item-level {
                                position: relative;
                                padding: 8px 8px;
                                font-size: 14px;
                                color: #2e358f;
                                background-color: #e8eaf6;
                                -webkit-transition: background-color .3s linear, color .3s linear;
                                -moz-transition: background-color .3s linear, color .3s linear;
                                -ms-transition: background-color .3s linear, color .3s linear;
                                -o-transition: background-color .3s linear, color .3s linear;
                                transition: background-color .3s linear, color .3s linear;
                                &:hover, &.active {
                                    background-color: #ff9432;
                                    color: #fff;
                                }
                            }
                        }
                        .level-name {
                            position: relative;
                            display: flex;
                            margin-left: 10px;
                            min-width: 120px;
                            justify-content: center;
                            &:after {
                                content: '';
                                display: flex;
                                align-self: center;
                                border-top: 8px solid;
                                border-left: 4px solid transparent;
                                border-right: 4px solid transparent;
                            }
                            span {
                                margin-right: 4px;
                            }
                        }
                    }
                    .change {
                        position: relative;
                        height: 48px;
                        line-height: 32px;
                        text-align: center;
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        &:hover {
                            svg path {
                                stroke: #fff;
                            }
                        }
                        .icon {
                            position: relative;
                            width: 13px;
                            height: 16px;
                            svg {
                                display: flex;
                                path {
                                    -webkit-transition: stroke .15s linear;
                                    -moz-transition: stroke .15s linear;
                                    -ms-transition: stroke .15s linear;
                                    -o-transition: stroke .15s linear;
                                    transition: stroke .15s linear;
                                }
                            }
                        }
                        .name {
                            position: relative;
                            margin-left: 10px;
                        }
                    }
                    .more-options {
                        position: relative;
                        height: 48px;
                        line-height: 32px;
                        text-align: center;
                        min-width: auto;
                        margin-left: 10px;
                        display: flex;
                        align-items: center;
                        &:hover {
                            .icon {
                                svg circle {
                                    fill: #fff;
                                }
                            }
                        }
                        .icon {
                            svg {
                                display: flex;
                                circle {
                                    -webkit-transition: fill .15s linear;
                                    -moz-transition: fill .15s linear;
                                    -ms-transition: fill .15s linear;
                                    -o-transition: fill .15s linear;
                                    transition: fill .15s linear;
                                }
                            }
                        }
                    }
                }
            }
            .day {
                position: relative;
                display: flex;
                flex-direction: column;
                text-align: center;
                align-items: center;
                padding: 10px;
                background-color: #e8eaf6;
                -webkit-border-radius: 14px;
                -moz-border-radius: 14px;
                border-radius: 14px;
                height: 56px;
                min-width: 100px;
                font-size: 14px;
                color: #2e358f;
                font-weight: 600;
                line-height: 1.2;
            }
            > .title-status {
                display: none;
                padding-top: 20px;
            }
            .title-status {
                flex-direction: column;
                align-items: flex-start;
                gap: 5px;
                .title {
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                    flex-grow: 1;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .program-document {
                    display: flex;
                    align-items: center;
                    gap: 5px;
                    font-size: clamp(12px, 3vw, 14px);
                    -webkit-transition: color .15s linear;
                    -moz-transition: color .15s linear;
                    -ms-transition: color .15s linear;
                    -o-transition: color .15s linear;
                    transition: color .15s linear;
                    &:hover {
                        color: #ff9432;
                        .icon svg path {
                            fill: #ff9432;
                        }
                    }
                    .icon {
                        width: 20px;
                        line-height: 1;
                    }
                    .title {
                        display: -webkit-box;
                        -webkit-line-clamp: 1;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }
            .top-complete-btns {
                position: relative;
                display: flex;
                justify-content: flex-end;
                gap: 20px;
                padding-top: 20px;
                .day {
                    position: absolute;
                    display: none;
                    top: 12px;
                    left: 0;
                }
                > .fit-button {
                    z-index: 5;
                    margin-left: 0px !important;
                }
            }
            .day-module-action {
                display: none;
            }
            .content-instructions {
                .instructions-wrapper {
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    gap: 20px;
                    padding: 20px 0 0 0;
                    &.hidden-content {
                        display: none;
                    }
                    .fit-field {
                        .submodule-media-wrapper {
                            &:has(.media-playlist[data-type=images] > .playlist-header:only-child) {
                                .submodule-media {
                                    border-width: 1px;
                                }
                            }
                            &:has(.media-playlist) {
                                .submodule-media {
                                    border-width: 1px 1px 0 1px;
                                    border-radius: 14px 14px 0 0;
                                    .thumbnail {
                                        border-radius: 14px 14px 0 0;
                                    }
                                }
                            }
                            .submodule-media {
                                border-style: solid;
                                border-color: #a3a3a3;
                                border-width: 1px;
                                border-radius: 14px;
                                .thumbnail {
                                    border-radius: 14px;
                                }
                                .item-video {
                                    .video {
                                        width: 100%;
                                        height: 100%;
                                        display: flex;
                                        padding-top: 56.25%;
                                        &:has(iframe, .fit-error) {
                                            padding-top: unset;
                                        }
                                        > div {
                                            width: 100%;
                                            background-color: #2e358f;
                                            border-top-left-radius: 14px;
                                            border-top-right-radius: 14px;
                                            > .fit-error {
                                                position: absolute;
                                                top: 50%;
                                                left: 50%;
                                                display: flex;
                                                flex-direction: column;
                                                align-items: center;
                                                color: #fff;
                                                transform: translate(-50%, -50%);
                                                .title {
                                                    font-size: 34px;
                                                    font-weight: 700;
                                                }
                                                .msg {
                                                    text-align: center;
                                                }
                                            }
                                            iframe {
                                                border-top-left-radius: 14px;
                                                border-top-right-radius: 14px;
                                            }
                                        }
                                    }
                                }
                            }
                            .item-thumbnail {
                                display: flex;
                                .thumbnail {
                                    width: 100%;
                                    background-color: #fff;
                                    object-fit: cover;
                                    object-position: center;
                                    color: #e5e5e5;
                                }
                            }
                            .media-playlist {
                                position: relative;
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                background-color: var(--fit-blue);
                                color: #c7c7c7;
                                border-style: solid;
                                border-color: #a3a3a3;
                                border-width: 0 1px 1px 1px;
                                border-radius: 0 0 14px 14px;
                                &[data-type=images]:has(> .playlist-header:only-child) {
                                    display: none;
                                }
                                &[data-type=videos] {
                                    .playlist-header.now-playing {
                                        .item {
                                            .item-thumbnail {
                                                .animated-bars {
                                                    display: flex;
                                                }
                                            }
                                        }
                                    }
                                }
                                .playlist-header {
                                    position: relative;
                                    &:only-child {
                                        &.now-playing .item {
                                            border-bottom-left-radius: 14px;
                                            border-bottom-right-radius: 14px;
                                            &[data-completed=true] .item-info .item-extras .action-btns .next {
                                                display: none;
                                            }
                                        }
                                    }
                                    &.now-playing, &.upcoming, &.default {
                                        > .title {
                                            display: flex;
                                            justify-content: center;
                                            font-weight: 700;
                                            &:before, &:after {
                                                content: '';
                                                height: 2px;
                                                display: flex;
                                                align-self: center;
                                                flex-grow: 1;
                                                background-color: #c7c7c7;
                                            }
                                            &:before {
                                                margin-right: 10px;
                                            }
                                            &:after {
                                                margin-left: 10px;
                                            }
                                        }
                                    }
                                    &.now-playing, &.upcoming {
                                        .item {
                                            border-radius: 0;
                                            .item-number {
                                                color: unset;
                                            }
                                            .item-thumbnail {
                                                max-width: 85px;
                                                border-radius: 14px;
                                            }
                                            .item-completed, .icon {
                                                &.item-completed {
                                                    display: none;
                                                }
                                                svg.check-svg, svg.next-svg {
                                                    fill: var(--fit-white);
                                                    .stop1 {
                                                        stop-color: var(--fit-orange);
                                                    }
                                                    .stop2 {
                                                        stop-color: var(--fit-white);
                                                    }
                                                }
                                            }
                                        }
                                    }
                                    &:not(.now-playing, .upcoming) {
                                        .item {
                                            &:hover, &.selected {
                                                color: #2e358f;
                                                background-color: #2e358f0a;
                                                .item-number {
                                                    color: #2e358f;
                                                }
                                                .item-thumbnail .thumbnail {
                                                    color: #2e358f;
                                                    scale: 1.5;
                                                }
                                            }
                                        }
                                    }
                                    &.now-playing {
                                        margin-top: 10px;
                                        .item {
                                            .item-extras {
                                                padding-top: 10px;
                                                .item-time-reps {
                                                    border-top: 1px solid #e5e5e5;
                                                }
                                                .action-btns {
                                                    display: flex;
                                                }
                                            }
                                        }
                                    }
                                    &.upcoming {
                                        .item {
                                            padding-bottom: 20px;
                                        }
                                    }
                                    &.upcoming:has(.item[data-id=""]) {
                                        display: none;
                                    }
                                    &.default {
                                        background-color: var(--fit-white);
                                        color: initial;
                                        border-bottom-left-radius: 12px;
                                        border-bottom-right-radius: 12px;
                                        .item {
                                            border-top: 1px solid #e5e5e5;
                                            &:first-child {
                                                border-color: #a3a3a3;
                                            }
                                            .item-info .read-more-wrapper {
                                                display: none;
                                            }
                                        }
                                    }
                                    .title {
                                        text-transform: uppercase;
                                    }
                                }
                                .item {
                                    display: flex;
                                    flex-direction: row;
                                    align-items: center;
                                    gap: 20px;
                                    padding: 10px;
                                    font-size: 12px;
                                    transition: color .3s linear;
                                    &:last-child {
                                        border-bottom-left-radius: 14px;
                                        border-bottom-right-radius: 14px;
                                    }
                                    &.selected {
                                        cursor: default;
                                    }
                                    &[data-completed=true] {
                                        .item-info .item-extras .action-btns .next {
                                            display: flex;
                                        }
                                        .item-completed {
                                            display: flex;
                                        }
                                    }
                                    .item-number {
                                        width: 25px;
                                        height: 25px;
                                        display: flex;
                                        flex-shrink: 0;
                                        justify-content: center;
                                        align-items: center;
                                        color: #c9c9c9;
                                        border: 1px solid;
                                        border-radius: 50%;
                                        transition: background-color .3s linear, color .3s linear;
                                    }
                                    .item-thumbnail {
                                        position: relative;
                                        max-width: 40px;
                                        flex-shrink: 0;
                                        border: 1px solid;
                                        border-radius: 8px;
                                        overflow: hidden;
                                        .thumbnail {
                                            margin-top: 0;
                                            transition: scale .3s linear, color .3s linear;
                                        }
                                        .animated-bars {
                                            position: absolute;
                                            width: 100%;
                                            height: 100%;
                                            display: none;
                                            justify-content: center;
                                            align-items: flex-end;
                                            background-color: #edf0ff8a;
                                            svg {
                                                width: 100%;
                                                height: 100%;
                                                mask {
                                                    rect {
                                                        fill: #edf0ff;
                                                    }
                                                }
                                                rect.background {
                                                    fill: #edf0ff8a;
                                                }
                                                > g {
                                                    fill: #2e358f95;
                                                }
                                            }
                                        }
                                    }
                                    .item-video {
                                        display: none;
                                    }
                                    .item-info {
                                        display: flex;
                                        flex-direction: column;
                                        flex-grow: 1;
                                        .item-title {
                                            display: -webkit-box;
                                            -webkit-line-clamp: 1;
                                            -webkit-box-orient: vertical;
                                            font-weight: 700;
                                            text-overflow: ellipsis;
                                            overflow: hidden;
                                        }
                                        .read-more-wrapper {
                                            .read-more {
                                              color: var(--fit-white);
                                              &:hover {
                                                color: var(--fit-orange);
                                              }
                                            }
                                        }
                                        .item-extras {
                                            display: flex;
                                            justify-content: space-between;
                                            gap: 20px;
                                            flex-wrap: wrap;
                                            &:not(:has(.item-time-reps)) {
                                                justify-content: flex-end;
                                            }
                                            .item-time-reps {
                                                display: flex;
                                                gap: 5px;
                                                flex-shrink: 0;
                                                flex-wrap: wrap;
                                                .time {
                                                    display: flex;
                                                }
                                                .sets-reps {
                                                    display: flex;
                                                    gap: 10px;
                                                }
                                            }
                                            .action-btns {
                                                display: none;
                                                align-self: flex-end;
                                                gap: 20px;
                                                border-top: 1px solid #e5e5e5;
                                                .complete, .next {
                                                    display: flex;
                                                    align-items: center;
                                                    gap: 5px;
                                                    flex-shrink: 0;
                                                    padding: 0 5px;
                                                    color: var(--fit-white);
                                                    border-radius: 7px;
                                                    transition: color .5s ease-in-out;
                                                    &:hover {
                                                        color: var(--fit-orange);
                                                    }
                                                    .icon {
                                                        display: flex;
                                                        width: 14px;
                                                        height: 14px;
                                                        .circle {
                                                            fill: unset;
                                                        }
                                                    }
                                                }
                                                .complete {
                                                    &:hover .icon svg .circle {
                                                        fill: var(--fit-orange);
                                                    }
                                                    .icon svg .circle {
                                                        transition: fill .5s ease-in-out;
                                                    }
                                                }
                                                .next {
                                                    display: none;
                                                }
                                                .profile-main-loader-btn {
                                                    background-color: #ffffffad;
                                                    border: 1px solid;
                                                    border-radius: 7px;
                                                }
                                            }
                                        }
                                    }
                                    .item-completed, .icon {
                                        position: relative;
                                        display: none;
                                        flex-shrink: 0;
                                        width: 14px;
                                        svg.check-svg, svg.next-svg {
                                            fill: #a3a3a3;
                                            .stop1 {
                                                stop-color: #2e358f;
                                            }
                                            .stop2 {
                                                stop-color: #a3a3a3;
                                            }
                                            .circle {
                                                fill: #ff9432;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        &.wysiwyg {
                            font-size: 12px;
                            ol, ul {
                                list-style: revert;
                                padding: revert;
                            }
                            table {
                                max-width: 100%;
                            }
                            td {
                                border: 1px solid #bbb;
                            }
                            .content-nav-title.submodule {
                                > .title {
                                    font-weight: 500;
                                    font-size: 14px;
                                }
                            }
                        }
                    }
                }
            }
            .content-program-member-overlay {
                position: absolute;
                display: none;
                top: 10px;
                left: -10px;
                width: calc(100% + 21px);
                height: 100%;
                border-radius: 14px;
                background-color: rgba(46,53,143,.27);
                backdrop-filter: blur(20px);
                z-index: 3;
                .overlay-label {
                    position: absolute;
                    text-align: center;
                    top: 75px;
                    left: 50%;
                    width: 100%;
                    color: #fff;
                    font-family: tuskergrotesk, 'montseratt', sans-serif;
                    font-size: clamp(16px, 8vw, 50px);
                    font-weight: 700;
                    text-transform: uppercase;
                    transform: translateX(-50%);
                }
            }
        }
    }

    .content-wellness {
        &.member-challenges {
            &.partner-view {
                .user-list-item {
                    .list-col-info {
                        > .col2:has(.custom_fit_button) {
                            display: none;
                        }
                    }
                    .list-col-controls {
                        display: none;
                    }
                }
            }
            .user-list-item {
                &:not(.empty-slot) {
                    padding: 0;
                }
                &.ch1 {
                    .list-col-info .col1 .row.title > .ch-dot:before {
                        background-color: var(--ch1-color);
                    }
                }
                &.ch2 {
                    .list-col-info .col1 .row.title > .ch-dot:before {
                        background-color: var(--ch2-color);
                    }
                }
                &.ch3 {
                    .list-col-info .col1 .row.title > .ch-dot:before {
                        background-color: var(--ch3-color);
                    }
                }
                .list-col-info {
                    flex-grow: 1;
                    flex-basis: unset;
                    flex-wrap: wrap;
                    gap: 20px;
                    padding: 10px;
                    .col1 {
                        flex-direction: column;
                        flex-basis: unset;
                        flex-grow: 1;
                        > .row {
                            &.title {
                                font-weight: 700;
                                > .ch-dot {
                                    display: inline-block;
                                    width: 20px;
                                    &:before {
                                        content: "";
                                        position: absolute;
                                        top: 3px;
                                        left: 0;
                                        width: 15px;
                                        height: 15px;
                                        border-radius: 50%;
                                        -webkit-transform: scale(1);
                                        -moz-transform: scale(1);
                                        -ms-transform: scale(1);
                                        -o-transform: scale(1);
                                        transform: scale(1);
                                        -webkit-transition: transform .18s linear;
                                        -moz-transition: transform .18s linear;
                                        -ms-transition: transform .18s linear;
                                        -o-transition: transform .18s linear;
                                        transition: transform .18s linear;
                                    }
                                }
                            }
                            &.list-col-info-details {
                                display: flex;
                                flex-wrap: wrap;
                                gap: 5px;
                                .col1 {
                                    min-width: 150px;
                                    flex-direction: column;
                                    flex-basis: 25%;
                                    font-weight: 500;
                                    .challenge-info {
                                        display: flex;
                                        flex-direction: column;
                                        min-width: 150px;
                                        font-size: 12px;
                                    }
                                }
                                .col2 {
                                    flex-grow: 1;
                                    flex-basis: unset;
                                    > .fit-button[data-id=complete_ch] {
                                        min-width: 160px;
                                    }
                                }
                            }
                        }
                    }
                    .col2 {
                        flex-basis: unset;
                    }
                    .chart-item-wrapper {
                        .percentage {
                            text-align: center;
                            line-height: 1;
                            color: #2e358f;
                            font-size: 14px;
                            font-weight: 500;
                            .success-placeholder {
                                padding-bottom: 5px;
                                font-size: 10px;
                            }
                        }
                    }
                }
                .list-col-controls {
                    align-items: flex-start;
                    flex-basis: 6%;
                    .list-item-more-option {
                        min-width: 35px;
                        border-radius: 0 14px;
                    }
                }
            }
        }
        &.partner-challenges {
            .group-title {
                margin: 20px 0 5px 0;
                padding-left: 10px;
                color: var(--fit-blue);
                font-weight: 700;
                font-size: 12px;
            }
            .user-list-item {
                flex-wrap: nowrap;
                &:not(.empty-slot) {
                    padding: 0;
                }
                .list-col-info {
                    flex-basis: unset;
                    flex-wrap: wrap;
                    gap: 20px;
                    padding: 10px;
                    .col1 {
                        display: flex;
                        flex-direction: column;
                        flex-grow: 1;
                        flex-basis: unset;
                        .row {
                            &.title {
                                padding-bottom: 5px;
                                font-weight: 500;
                            }
                            &.challenge-info {
                                display: flex;
                                flex-grow: 1;
                                flex-wrap: wrap;
                                gap: 10px;
                                .ch-col {
                                    display: flex;
                                    &.col1 {
                                        min-width: 150px;
                                        flex-basis: unset;
                                        .row {
                                            font-size: 12px;
                                        }
                                    }
                                    &.col2 {
                                        align-items: center;
                                        flex-shrink: 0;
                                        flex-basis: unset;
                                        .participants {
                                            width: 200px;
                                            padding: 5px 20px;
                                            text-align: center;
                                            color: #2e358f;
                                            border-color: #2e358f;
                                            border-width: 1px;
                                            border-style: solid;
                                            border-radius: 14px;
                                            .number-participants {
                                                font-size: 12px;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                    .col2 {
                        flex-grow: 1;
                        flex-shrink: 0;
                        flex-basis: unset;
                    }
                }
                .list-col-controls {
                    align-items: flex-start;
                    flex-basis: unset;
                    .list-item-more-option {
                        min-width: 35px;
                        border-radius: 0 14px;
                    }
                }
            }
        }
    }

    .view-details-wrapper {
        display: flex;
        flex-direction: column;
        height: 0;
        overflow: hidden;
        ul {
            padding: 20px;
            counter-reset: day;
            li {
                display: flex;
                flex-direction: column;
                font-size: 12px;
                color: #222;
                padding-bottom: 5px;
                .row2 {
                    padding-left: 2em;
                }
                .level {
                    .level-label {
                        cursor: pointer;
                    }
                    .level-preview {
                        position: absolute;
                        display: flex;
                        flex-direction: column;
                        gap: 20px;
                        align-items: center;
                        width: 280px;
                        min-height: 180px;
                        background-color: #fff;
                        padding: 10px;
                        border-radius: 15px;
                        box-shadow: 1px 1px 5px, -1px -1px 5px;
                        z-index: 1;
                        visibility: hidden;
                        overflow: hidden;
                        .thumbnail {
                            border-radius: 15px;
                        }
                        .title {
                            text-align: center;
                            font-weight: 600;
                        }
                    }
                }
                .separator {
                    position: relative;
                    padding: 0 5px;
                    font-size: 13px;
                    color: #2e358f;
                }
            }
            .row1 {
                display: flex;
                align-items: center;
                &::before {
                    display: inline-block;
                    min-width: 2em;
                    counter-increment: day;
                    content: counter(day) ": ";
                }
            }
        }
    }

    .days-dropdown-wrapper {
        .section-options {
            display: flex;
            flex-direction: column;
            gap: 5px;
            .section-container {
                display: flex;
                align-items: center;
                gap: 20px;
                width: 100%;
                height: 100%;
                .remove-days-dropdown.hide { 
                    display: none;
                }
                .section-number-indicator {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 30px;
                    height: 30px;
                    color: #A3A3A3;
                    text-align: center;
                    border: 1px solid #A3A3A3;
                    border-radius: 50%;
                }
                .section-option {
                    width: 93%;
                    height: 100%;
                    margin-top: unset;
                }
                .remove-days-dropdown {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 30px;
                    height: 30px;
                    color: #a3a3a3;
                    border: 1px solid #a3a3a3;
                    border-radius: 50%;
                    &:hover {
                        color: #2e358f;
                        border-color: #2e358f;
                        -webkit-transition: border-color .15s linear, color .15s linear;
                        -moz-transition: border-color .15s linear, color .15s linear;
                        -ms-transition: border-color .15s linear, color .15s linear;
                        -o-transition: border-color .15s linear, color .15s linear;
                        transition: border-color .15s linear, color .15s linear;
                    }
                    .select-close {
                        font-size: 20px;
                        font-weight: bold;
                    }
                }
            }
        }
        .add-days-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
        }
    }

    .upload-clear-all {
        position: absolute;
        right: 0;
        z-index: 1;
        &.hide-btn > div {
            display: none !important;
        }
        > .fit-button {
            min-height: unset;
            line-height: unset;
            font-size: 12px;
        }
    }
    .upload-file-list {
        &.loading .file .thumbnail .info .tag-loader {
            opacity: 1;
            right: -40px;
        }
        .file {
            position: relative;
            display: flex;
            align-self: center;
            max-width: 200px;
            .thumbnail {
                width: 160px;
                object-fit: cover;
                object-position: center;
                border: 1px solid #e5e5e5;
                border-radius: 14px;
            }
            .thumbnail-wrapper {
                position: relative;
                .info {
                    position: absolute;
                    bottom: 8px;
                    width: 100%;
                    padding: 5px 5px 2px 5px;
                    background-color: #edf0ffc4;
                    border-bottom-left-radius: 14px;
                    border-bottom-right-radius: 14px;
                    .tag-label {
                        display: -webkit-box;
                        font-size: 12px;
                        font-weight: 700;
                        color: #2e358f;
                        -webkit-line-clamp: 1;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        word-break: break-all;
                    }
                    .tag-loader {
                        position: absolute;
                        display: block;
                        opacity: 0;
                        width: 30px;
                        height: 100%;
                        -webkit-border-radius: 14px;
                        -moz-border-radius: 14px;
                        border-radius: 14px;
                        background-color: #e8eaf6;
                        overflow: hidden;
                        right: -35px;
                        top: 0;
                        transform: scaleY(-1);
                        -webkit-transition: right .25s linear, opacity .2s linear;
                        -moz-transition: right .25s linear, opacity .2s linear;
                        -ms-transition: right .25s linear, opacity .2s linear;
                        -o-transition: right .25s linear, opacity .2s linear;
                        transition: right .25s linear, opacity .2s linear;
                        .progress {
                            display: block;
                            height: 0;
                            width: 100%;
                            background-color: #ff9432;
                            -webkit-transition: height .2s linear;
                            -moz-transition: height .2s linear;
                            -ms-transition: height .2s linear;
                            -o-transition: height .2s linear;
                            transition: height .2s linear;
                        }
                    }
                }
            }
        }
    }

    .options-holder:has(> .option > .opt-range-field-wrapper) {
        position: relative;
        display: flex;
        flex-grow: 1;
        width: 100%;
        .option {
            position: relative;
            display: flex;
            gap: 10px;
            width: 100%;
        }
    }
    .opt-range-field-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        flex-grow: 1;
        gap: 10px;
        &.normal .opt-range-field {
            width: 400px;
        }
        &.large .opt-range-field {
            width: 500px;
        }
        .opt-range-field {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            gap: 3px;
            &:focus {
                outline: 2px solid #ff9432;
            }
            > .label {
                font-size: 12px;
            }
            > input {
                display: none;
            }
            .rangeSlider {
                background: #e8eaf6;
                .rangeSlider__fill__horizontal {
                    background-color: #ff9432;
                }
            }
        }
        .opt-range-stepper {
            position: relative;
            .range-plus, .range-minus {
                position: absolute;
                right: 1px;
                width: 34px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #e8eaf6;
                color: #2e358f;
                line-height: 22px;
                font-size: 12px;
                z-index: 1;
                cursor: pointer;
                -webkit-transition: color .15s linear, background-color .15s linear;
                -moz-transition: color .15s linear, background-color .15s linear;
                -ms-transition: color .15s linear, background-color .15s linear;
                -o-transition: color .15s linear, background-color .15s linear;
                transition: color .15s linear, background-color .15s linear;
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                &:hover {
                    color: #fff;
                    background-color: #ff9432;
                }
                &.range-plus {
                    top: 1px;
                    height: 49%;
                    border-bottom: 1px solid rgba(0, 0, 0, .08);
                    border-top-right-radius: 14px;
                }
                &.range-minus {
                    bottom: 1px;
                    height: 48%;
                    border-bottom-right-radius: 14px;
                }
            }
            .opt-range-field-value {
                position: relative;
                display: flex;
                width: 80px;
                padding: 12px;
                font-size: 16px;
                border: 1px solid #c4c4c4;
                border-radius: 14px;
                appearance: textfield;
                &.length {
                    min-width: 25px;
                    color: #2e358f;
                }
            }
        }
    }

    .tags-list-wrapper {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 20px;
        &[data-id=wellness-modules-list], &[data-type=goals-new-ch] {
            .tags-list > .tag {
                flex-grow: 1;
                font-size: 12px;
                font-weight: 700;
                cursor: pointer;
                background-color: unset;
                -webkit-transition: background-color .15s linear, color .15s linear;
                -moz-transition: background-color .15s linear, color .15s linear;
                -ms-transition: background-color .15s linear, color .15s linear;
                -o-transition: background-color .15s linear, color .15s linear;
                transition: background-color .15s linear, color .15s linear;
                &:hover {
                    color: var(--fit-white);
                    background-color: var(--fit-blue);
                }
                &.active {
                    color: var(--fit-white);
                    background-color: var(--fit-orange);
                    border-color: var(--fit-orange);
                }
            }
        }
        .edit-wrapper {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(255, 255, 255, .8);
            border-radius: 14px;
            opacity: 0;
            transform: translate(-50%, -50%);
            -webkit-transition: all .15s linear;
            -moz-transition: all .15s linear;
            -ms-transition: all .15s linear;
            -o-transition: all .15s linear;
            transition: all .15s linear;
            &:hover, &[data-editing=true] {
                opacity: 1;
                &:hover {
                    .edit {
                        background-color: var(--fit-orange);
                    }
                }
                &[data-editing=true] {
                    background-color: #e8eaf6;
                    .edit {
                        display: none;
                    }
                    input {
                        color: var(--fit-blue);
                        background-color: #e8eaf6;
                        font-weight: 700;
                        border: none;
                    }
                    .accept {
                        position: absolute;
                        bottom: -12px;
                        min-width: unset;
                        min-height: unset;
                        margin-left: unset;
                        padding: 5px;
                        line-height: unset;
                        font-size: 9px;
                        color: #fff;
                        background-color: var(--fit-blue);
                        border-radius: 50%;
                        &:hover {
                            background-color: var(--fit-orange);
                        }
                        > i {
                            font-size: 15px;
                        }
                    }
                }
            }
            .edit {
                width: max-content;
                min-width: unset;
                height: max-content;
                padding: 5px;
                line-height: 15px;
                color: var(--fit-white);
                background-color: var(--fit-blue);
                border-radius: 50%;
                z-index: 1;
                > i {
                    font-size: 15px;
                }
            }
        }
        .tags-list-type {
            margin-top: 20px;
            .title {
                margin-bottom: 10px;
                font-size: clamp(12px, 3vw, 16px);
                font-weight: 700;
            }
        }
        .tags-list {
            position: relative;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 20px;
            > .tag {
                position: relative;
                display: flex;
                justify-content: center;
                padding: 10px 30px;
                color: var(--fit-blue);
                background-color: #e8eaf6;
                font-size: 12px;
                font-weight: 700;
                border: 1px solid var(--fit-blue);
                border-radius: 14px;
                &:hover {
                    > .drag-handle {
                        display: flex;
                    }
                }
                &[data-archived=true] {
                    color: #c9c9c9;
                    background-color: #fbfbfb;
                    border-color: #c9c9c9;
                    > .drag-handle {
                        display: none;
                    }
                    > .edit-wrapper {
                        display: none;
                    }
                    > .tag-delete {
                        display: none;
                    }
                }
                > .drag-handle {
                    display: none;
                    top: 50%;
                    width: 30px;
                    height: 30px;
                    background-color: unset;
                    border-radius: 14px;
                    transform: translateY(-50%);
                }
                > .tag-label {
                    font-size: 12px;
                    font-weight: 700;
                }
                > .tag-delete {
                    position: absolute;
                    top: -12px;
                    right: -12px;
                    width: 24px;
                    height: 24px;
                    line-height: 24px;
                    font-size: 12px;
                    font-weight: 700;
                    text-align: center;
                    color: var(--fit-white);
                    background-color: var(--fit-blue);
                    cursor: pointer;
                    border-radius: 50%;
                    -webkit-transition: color .15s linear, background-color .15s linear;
                    -moz-transition: color .15s linear, background-color .15s linear;
                    -ms-transition: color .15s linear, background-color .15s linear;
                    -o-transition: color .15s linear, background-color .15s linear;
                    transition: color .15s linear, background-color .15s linear;
                    &:hover, &.active {
                        color: var(--fit-white);
                        background-color: var(--fit-orange);
                    }
                }
            }
        }
        > .no-tags {
            font-size: 14px;
        }
        > .add-new-tag-wrapper {
            position: relative;
            > .add-new-tag-title {
                position: relative;
                margin-bottom: 10px;
                font-size: 13px;
                font-weight: 600;
                color: #757575;
            }
            .add-new-tag-fields-wrapper {
                .add-new-tag-fields {
                    position: relative;
                    display: flex;
                    flex-direction: row;
                    gap: 20px;
                    > .add-tag-input {
                        position: relative;
                        input {
                            min-width: 300px;
                            padding: 16px 20px;
                            line-height: 16px;
                            font-size: 12px;
                            font-weight: normal;
                            border: 1px solid #c4c4c4;
                            border-radius: 14px;
                        }
                    }
                }
                > .notice-error {
                    padding: 5px;
                    color: red;
                    font-size: 12px;
                }
            }
            .wellness-components-dropdown .select2-wellness textarea {
                padding: 23px 10px;
                font-size: 12px;
            }
        }
    }

    .draggable-list {
        &:has(.item.sortable-ghost .dragging-overlay) {
            .empty-msg {
                display: none;
            }
        }
        .item {
            &[data-status=opened] {
                .drag-handle {
                    display: none;
                }
            }
            &.sortable-ghost .dragging-overlay {
                position: absolute;
                top: 0;
                width: 100%;
                height: 100%;
                background-color: #f3f3f3;
                border-radius: 14px;
                z-index: 1;
            }
            .drag-handle {
                position: absolute;
                top: 0;
                left: 0;
                width: 37px;
                height: 37px;
                padding: 5px;
                background-color: #e4e8f4;
                cursor: grab;
                border-radius: 14px 0;
                z-index: 1;
                &:hover {
                    svg {
                        fill: var(--fit-orange);
                        stroke: var(--fit-orange);
                    }
                }
                &.inline {
                    position: relative;
                    top: unset;
                    left: unset;
                    display: flex;
                    padding: 8px;
                    z-index: unset;
                }
                svg {
                    fill: var(--fit-blue);
                    stroke: var(--fit-blue);
                }
            }
        }
    }

    *:has(> .cur-chars-wrapper) {
        flex-direction: column;
        .cur-chars-wrapper {
            display: flex;
            justify-content: flex-end;
            margin-top: 5px;
            font-size: clamp(12px, 3vw, 12px);
            .cur-chars {
                margin-right: 5px;
            }
        }
    }

    .read-more-wrapper {
        display: grid;
        grid-template-columns: auto auto;
        .read-more-el {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            .read-more.visible {
                display: inline-block;
                .arrow {
                    display: inline-flex;
                    transform: rotate(-180deg);
                }
            }
        }
        .read-more {
            display: none;
            gap: 3px;
            padding-left: 5px;
            color: var(--fit-blue);
            transition: color .3s linear;
            &:hover {
                color: var(--fit-orange);
            }
            &.visible {
                display: flex;
            }
        }
    }

    .custom_toggle_element {
        display: none;
        flex-direction: column;
        margin-left: 0;
        height: 0;
        overflow: hidden;
        &.visible {
            gap: 20px;
        }
    }

    .fit-toggle-wrapper {
        overflow: hidden;
    }
    div:has(> .fit-toggle) {
        z-index: 2;
    }
    .fit-toggle {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        width: 60px;
        height: 45px;
        &:has(> input:focus) .slider {
            box-shadow: 0 0 1px #2196F3;
        }
        &:has(> input:checked) {
            &.viewer-library {
                .slider {
                    &:not(.manage-notification) {
                        background-color: #ccc;
                    }
                    &:has(.manage-notification) {
                        background-color: var(--fit-blue);
                    }
                }
            }
            .slider {
                background-color: #2e358f;
                &:before {
                    transform: translateX(34px);
                }
            }
        }
        input { 
            display: none;
        }
        .slider {
            position: relative;
            width: 60px;
            height: 25px;
            background-color: #ccc;
            border-radius: 34px;
            transition: .4s;
            cursor: pointer;
            &:before {
                content: "";
                position: absolute;
                left: 4px;
                bottom: 4px;
                height: 17px;
                width: 17px;
                background-color: #fff;
                border-radius: 50%;
                transition: .4s;
            }
        }
        .label {
            position: absolute;
            top: -20px;
            font-size: 12px;
            &.left {
                transform: translateX(-30%);
            }
            &.right {
                right: 0;
                transform: translateX(30%);
            }
        }
    }
    
    .fit-timer {
        height: 100%;
        display: inline-flex;
        align-items: center;
        > input {
            width: 100px;
            height: 100%;
            margin: 0 5px;
            text-align: center;
        }
        > span {
            font-weight: 700;
        }
    }

    .select-all-clear-btns {
        justify-content: space-between;
        gap: 20px;
        .clear {
            font-size: 14px;
            color: #a3a3a3;
            transition: color .3s linear;
            cursor: not-allowed;
        }
    }

    .select-all-wrapper {
        position: relative;
        display: flex;
        justify-self: flex-start;
        + .regular-list {
            margin-top: 20px;
        }
        &:not(.disabled):hover {
            .checkbox, .label {
                color: var(--fit-orange);
                transition: color .3s linear;
                svg path {
                    stroke: var(--fit-orange);
                    transition: stroke .3s linear;
                }
            }
        }
        &.disabled {
            color: #a3a3a3;
            cursor: not-allowed;
        }
        .checkbox {
            position: relative;
            display: flex;
            align-items: center;
            svg {
                width: 15px;
                height: 15px;
            }
        }
        .label {
            position: relative;
            margin-left: 5px;
            font-size: 14px;
        }
    }

    .regular-list {
        display: flex;
        flex-direction: column;
        gap: 20px;
        > .group-wrapper {
            position: relative;
            padding: 20px;
            border: 1px solid #757575;
            border-radius: 14px;
            > .group-label {
                position: absolute;
                top: -10px;
                left: 10px;
                padding: 0 10px;
                background-color: var(--fit-white);
                font-size: 13px;
                font-weight: 600;
                color: #757575;
            }
            > .group {
                display: flex;
                flex-direction: column;
                gap: 10px;
                &:after {
                    display: none;
                }
            }
        }
        .item {
        }
    }

    .challenge-summary .section-options:has(> .section-title + .config-wrapper) > .section-title {
        display: none;
    }
    .config-wrapper {
        display: grid;
        display: none;
        grid-auto-columns: minmax(0, 1fr) min-content;
        grid-auto-flow: column;
        padding: 10px 0;
        transition: height .3s linear;
        .config-module-wrapper {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1;
            gap: 10px;
            .config-module {
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                &:has(.ch-days-dropdown > .select2-hidden-accessible) .divider {
                    display: block;
                }
                .ch-programs-dropdown, .ch-days-dropdown {
                    width: 100%;
                    select.select2-wellness:not(.select2-hidden-accessible) {
                        display: none;
                    }
                }
                .select2-wellness {
                    max-width: unset;
                    width: 100%;
                    > .select2-selection__rendered:has(.select2-selection__choice) {
                        margin: 5px;
                    }
                }
                .divider {
                    display: none;
                    width: 2px;
                    height: 40px;
                    margin: 1px;
                    &:before, &:after {
                        border-left: 1px solid transparent;
                        border-right: 1px solid transparent;
                    }
                    &:before {
                        top: -2px;
                        border-bottom: 2px solid #e5e5e5;
                    }
                    &:after {
                        bottom: -2px;
                        border-top: 2px solid #e5e5e5;
                    }
                }
                .submodules-wrapper {
                    /* TBD */
                    &:has(.profile-main-loader-btn) {
                        height: 150px;
                    }
                }
            }
            .profile-main-loader-btn {
                background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
                background-size: 200% 100%;
                animation: loading 1.5s infinite;
            }
        }
        .divider {
            position: relative;
            width: 6px;
            margin: 0 20px;
            background-color: #e5e5e5;
            &:before, &:after {
                content: '';
                position: absolute;
                left: 50%;
                border-left: 3px solid transparent;
                border-right: 3px solid transparent;
                transform: translateX(-50%);
            }
            &:before {
                top: -6px;
                border-bottom: 6px solid #e5e5e5;
            }
            &:after {
                bottom: -6px;
                border-top: 6px solid #e5e5e5;
            }
        }
    }

    .fit-tabs-content {
        width: 100%;
        .fit-tab-content {
            position: absolute;
            width: 100%;
            opacity: 0;
            visibility: hidden;
        }
    }

    .wellness-viewer-wrapper {
        &:has(.wellness-viewer-dropdown .select2-wellness[data-loading=true]) .fit-toolbar .layout-list-wrapper .layout-item {
            opacity: 0.2 !important;
            pointer-events: none;
        }
        &:has(.wellness-viewer-uploader[data-opened=false]) .fit-toolbar .upload > .minus {
            display: none;
        }
        &:has(.wellness-viewer-uploader[data-opened=true]) .fit-toolbar .upload > .plus {
            display: none;
        }
        .wellness-viewer-uploader {
            height: 0;
            overflow: hidden;
            .fit-upload-wrapper .fit-upload-list {
                display: none;
            }
        }
        .fit-toolbar {
            display: flex;
            justify-content: space-between;
            margin: 0 5px 5px 5px;
            > .left, > .right {
                display: flex;
                align-items: center;
                flex-grow: 1;
                &.right {
                    justify-content: flex-end;
                }
            }
            .upload {
                padding: 10px;
                background-color: unset;
                &:hover svg {
                    .circle {
                        fill: var(--fit-blue);
                        stroke: var(--fit-blue);
                        stroke-width: 7px;
                    }
                    :not(.circle) {
                        fill: #fff;
                    }
                }
                svg {
                    width: 30px;
                    height: 30px;
                    vertical-align: middle;
                    > path {
                        -webkit-transition: fill .3s ease;
                        -moz-transition: fill .3s ease;
                        -ms-transition: fill .3s ease;
                        -o-transition: fill .3s ease;
                        transition: fill .3s ease;
                    }
                    .circle {
                        fill: transparent;
                    }
                    :not(.circle) {
                        fill: var(--fit-blue);
                    }
                }
            }
        }
        .wellness-viewer-dropdown {
            position: relative;
        }
    }

    .feed-add-post-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        .feed-add-title {
            position: relative;
            display: flex;
            margin-bottom: 20px;
            font-size: 16px;
            font-weight: 500;
            color: var(--fit-blue);
        }
        .feed-write-post-wrapper {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 10px;
            margin-top: 20px;
            margin-bottom: 20px;
            .profile-picture {
                position: relative;
                width: 45px;
                min-width: 45px;
                height: 45px;
                display: table-cell;
                object-fit: cover;
                object-position: center;
                border: 1px solid #6e6e6e;
                border-radius: 50%;
            }
            .feed-write-post {
                position: relative;
                width: 100%;
                min-height: 60px;
                flex-direction: column;
                padding: 20px;
                background-color: var(--fit-white);
                white-space: pre-wrap;
                cursor: text;
                border: 1px solid #a4a4a4;
                -webkit-border-radius: 14px;
                -moz-border-radius: 14px;
                border-radius: 14px;
                &[contenteditable=false] {
                    padding: 15px;
                    background-image: repeating-linear-gradient(
                        -45deg, 
                        #f1f1f1, 
                        #f1f1f1 10px, 
                        #e0e0e0 10px, 
                        #e0e0e0 20px
                    );
                    cursor: not-allowed;
                    &:empty:before {
                        padding: 5px;
                        color: #727272;
                        font-weight: 700;
                        background-color: rgb(227, 227, 227);
                        text-shadow: 1px 1px 2px rgba(255, 255, 255, .5);
                        border-radius: 14px;
                    }
                }
                &:focus {
                    cursor: text;
                }
                &[contenteditable=false]:focus {
                    cursor: not-allowed;
                }
                &:empty:before {
                    content: attr(data-placeholder);
                    display: block;
                    color: #a4a4a4;
                    pointer-events: none;
                }
            }
        }
        .feed-add-post-options {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            gap: 20px;
            .fit_post_upload_image {
                /*background: url("../images/btns/upload_image.svg") center no-repeat;
                width: 32px;*/
                align-self: center;
                fill: #2e358e;
                cursor: pointer;
                transition: all ease 0.3s;
                &:hover {
                    fill: var(--fit-orange);
                    transition: all ease 0.3s;
                }
            }
            &.disabled {
                cursor: not-allowed;
                .fit-checkbox-wrapper {
                    color: #f1f1f1;
                    pointer-events: none;
                    + span {
                        color: #f1f1f1;
                    }
                    .fit-checkbox {
                        border-color: #f1f1f1;
                    }
                }
                .fit_post_upload_image {
                    fill: #f1f1f1;
                    cursor: not-allowed;
                }
                .post-btn {
                    background-color: #f1f1f1;
                    cursor: not-allowed;
                }
            }
        }
    }
}

#optasy-dashboard-wrapper {
    > .celebration {
        position: absolute;
        display: none;
        z-index: 9999;
        transform: translate(-50%, -50%);
        .title {
            position: absolute;
            top: 50%;
            left: 50%;
            font-family: fantasy, sans-serif;
            letter-spacing: 1px;
            background: linear-gradient(-45deg, #2e358f, #ff9432, #2e358f);
            background-size: 200% 200%;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: gradient-shift .5s ease infinite;
            text-transform: uppercase;
            z-index: 1;
        }
        .content {
            z-index: 2;
            svg.fireworks {
                overflow: visible;
                path {
                    &:nth-child(odd) {
                        fill: #2e358f;
                    }
                    &:nth-child(even) {
                        fill: #ff9432;
                    }
                }
            }
        }
    }
}
@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/******************************** END OF NESTED CSS *********************************/

/* Bar Graph Horizontal */
/* ========================================================================================== */
#optasy-dashboard .bar-graph-horizontal {
    width: 100%;
    min-width: 240px;
    height: 100px;
}