* {
    padding: 0;
    margin: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
}

picture {
    display: block;
}

@media screen {

    /* Body locked; scrolling happens in .app */
   html, body {
        height: 100%;       /* ensures the viewport is filled */
        min-height: 100%;   /* allows expansion beyond 100% */
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden; /* prevents horizontal scroll */
    }

    body {
        text-align: center;
        font-family: 'Poppins', Arial, Verdana, sans-serif;
        font-size: 16px;
        -webkit-text-size-adjust: 100%;
        background: black;
        overscroll-behavior: contain; /* avoids rubber-band + snap scrolls */
        overflow-y: auto; /* ensures vertical scrolling */
    }

    .light_mode,
    .light_mode_alt {
        --nav-background: #000000;
        --nav-border: rgb(40, 39, 44);
        --nav-color: #ffffff;
        --menu-background: #1c1a1d;
        --menu-border: rgb(40, 39, 44);
        --menu-label: #ffffff;
        /*  */
        --input-read-only-bg: #f8f7fa;
        /*  */
        --background-color: #f2f0f6;
        --foreground-color: #ffffff;
        --foreground-color-opacity: rgba(255, 255, 255, 0.4);
        --foreground-offset-color: #f8f8ff;
        /* --foreground-offset-color: #f5f5fb; */
        --paybook-border-arrows: rgb(201, 204, 216);
        --playbook-button-02: #fff;
        --playbook-button-05: #fff;
        --border-color: #f2f0f6;
        --active-color: #0783fe;
        --active-color-opacity: rgba(7, 131, 254, 0.5);
        --label-color: #000000;
        --label-dim-color: #666;
        --label-disabled-color: #333;
        --background-disabled: #0e0d0e;
        --label-referral-link: #666;
        --background-referral-link: #f8f7fa;
        --placeholder-focus: rgba(102, 102, 102, 0.5);
        --label-offset-color: #555555;
        --label-invert-color: #ffffff;
        --icon-color: #ffffff;
        --color-yellow: #afd600;
        --color-green: #00a41c;
        --color-red: #f82f1c;
        --color-red-hover: #c42415;
        --color-orange: #d79700;
        --color-white: #ffffff;
        --color-blue: #0783fe;
        --color-blue-hover: blue;
        --color-logout: #DB5252;
        /* --color-dim: #666; */
        --color-dim: #d9d9d9;
        --color-img-background: #ccc;
        --color-dim-hover: #444;
        --button-background-hover: blue;
        --form-validation-error: #c42415;
        --form-validation-green: green;
        --form-validation-success: green;
        --form-validation-blue: blue;
        --form-validation-orange: orange;
        --form-validation-purple: purple;
        /*  */
        --modal-background: #c6c2caf2;
        --modal-border: #f2f0f6;
        --modal-border-offset: #f2f0f6;
        /*  */
        --sub-list-border: #ccc;
        /*  */
        --switch-background: transparent;
        --switch-border: #bbb;
        --switch-active-background: #00a41c;
        --switch-active-border: rgba(0, 0, 0, 0.1);
        /*  */
        --action-reveal-background: #e3e3ee;
        --action-reveal-label: #000000;
        /* alerts */
        --color-success: #00a41c;
        --color-warning: #ffc700;
        --color-attention: #ff1600;
        /*  */
        --deal-color-0: #0783fe;
        --deal-color-1: #3bb53b;
        --deal-color-2: blue;
        --deal-color-3: MediumSlateBlue;
        --deal-color-4: Orange;
        --deal-color-5: #cec317;
        --deal-color-6: var(--color-red);
        --deal-color-7: LightGrey;
        --deal-color-8: Grey;
        --deal-color-9: Purple;
        /*  */
        --pt-color: blue;
        --oc-color: green;
        --gp-color: Purple;
        /*  */
        --appointment-background: #fff;
        --appointment-bg-completed: #ededed;
        --appointment-bg-completed-hover: #cdcdcd;
        --appointment-clr-completed: #888;
        --appointment-bg-upcoming: #0783fe;
        --appointment-bg-upcoming-hover: blue;
        --appointment-clr-upcoming: #fff;
        --appointment-boder-color: #666;
        --appointment-event-border-eval : rgb(108, 0, 0);
        --appointment-event-border-pt : rgb(0, 0, 132);
        --appointment-event-border-oc : #008000;
        --appointment-event-border-gp : rgb(81, 0, 81);
        /*  */
        --cart-header-title: #888;
        /*  */
        --cal-boder-color: #c4c2c2;
        /*  */
        --cart-input-bg: #fff;
        /*  */
        --task-icon-completed: #00a41c;
        --task-icon-overdue: var(--color-red);
        /*  */
        --select-custom-background: #e3e3ee;
        --select-custom-label: #000000;
        /*  */
        --ntf-text: #333;
        --ntf-green: green;
        --ntf-blue: blue;
        /*  */
        --label-dim-editor: #aaa;
        /*  */
        --loader-color: #666;
        /*  */
        --content-prompt-bg: rgba(255, 255, 255, 1);
        /*  */
        --color-bar-green: #48fb47;
        --color-bar-yellow: #d9d900;
        --color-bar-red: red;
        /*  */
        --video-background: rgba(0, 0, 0, 0.6);
        /*  */
        --progress-bar-striped-bg: blue;
        /*  */
        --task-action-bg-green: #00b01f;
        --task-action-bg-green-hover: #00d227;
    }

    .dark_mode,
    .dark_mode_alt {
        --nav-background: #000000;
        --nav-border: rgb(40, 39, 44);
        --nav-color: #ffffff;
        --menu-background: #1c1a1d;
        --menu-border: rgb(40, 39, 44);
        --menu-label: #ffffff;
        /*  */
        --input-read-only-bg: #0d0c0e;
        /*  */
        --background-color: #000000;
        --foreground-color: #1c1a1d;
        --foreground-color-opacity: rgba(28, 26, 29, 0.4);
        --foreground-offset-color: #312e33;
        --paybook-border-arrows: rgb(93, 96, 102);
        --playbook-button-02: #312e33;
        --playbook-button-05: #f2f0f6;
        --border-color: rgb(40, 39, 44);
        --active-color: #0783fe;
        --active-color-opacity: rgba(7, 131, 254, 0.5);
        --label-color: #ffffff;
        --label-offset-color: #ddd;
        --label-dim-color: #888;
        --label-disabled-color: #eee;
        --label-referral-link: #828282;
        --background-referral-link: #0e0d0e;
        --placeholder-focus: rgba(136, 136, 136, 0.5);
        --label-invert-color: #000000;
        --icon-color: #ffffff;
        --color-yellow: yellow;
        --color-green: #00ce24;
        --color-red: #f82f1c;
        --color-red-hover: #c42415;
        --color-orange: #d79700;
        --color-white: #ffffff;
        --color-blue: #0783fe;
        --color-blue-hover: blue;
        --color-logout: #DB5252;
        --button-background-hover: blue;
        --color-dim: #322f33;
        --color-img-background: #322f33;
        --color-dim-hover: #4b444d;
        --form-validation-error: #c42415;
        --form-validation-green: green;
        --form-validation-success: green;
        --form-validation-blue: blue;
        --form-validation-orange: orange;
        --form-validation-purple: purple;
        /*  */
        --modal-background: #544e59e8;
        --modal-border: #000;
        --modal-border-offset: var(--color-red);
        /*  */
        --sub-list-border: #666;
        /*  */
        --switch-background: transparent;
        --switch-border: #666;
        --switch-active-background: #00a41c;
        --switch-active-border: rgba(0, 0, 0, 0.5);
        /*  */
        --action-reveal-background: #27272b;
        --action-reveal-label: #000000;
        /* alerts */
        --color-success: #00a41c;
        --color-warning: #ffc700;
        --color-attention: #ff1600;
        /*  */
        --deal-color-0: #0783fe;
        --deal-color-1: #3bb53b;
        --deal-color-2: blue;
        --deal-color-3: MediumSlateBlue;
        --deal-color-4: Orange;
        --deal-color-5: #e8da00;
        --deal-color-6: FireBrick;
        --deal-color-7: LightGrey;
        --deal-color-8: Grey;
        --deal-color-9: Purple;
        /*  */
        --pt-color: blue;
        --oc-color: #00b900;
        --gp-color: Purple;
        /*  */
        --appointment-background: #353037;
        --appointment-bg-completed: #655c68;
        --appointment-bg-completed-hover: #7e7382;
        --appointment-clr-completed: #acacac;
        --appointment-bg-upcoming: #0783fe;
        --appointment-bg-upcoming-hover: blue;
        --appointment-clr-upcoming: #fff;
        --appointment-boder-color: #000;
        --appointment-event-border-eval : #faa;
        --appointment-event-border-pt : rgb(102, 102, 255);
        --appointment-event-border-oc : #35c935;
        --appointment-event-border-gp : rgb(200, 12, 200);
        /*  */
        --cart-header-title: #acacac;
        /*  */
        --cal-boder-color: #5b5b5b;
        /*  */
        --cart-input-bg: #161517;
        /*  */
        --task-icon-completed: #00a41c;
        --task-icon-overdue: var(--color-red);
        /*  */
        --select-custom-background: #27272b;
        --select-custom-label: #000000;
        /*  */
        --ntf-text: #bbb;
        --ntf-green: green;
        --ntf-blue: blue;
        /*  */
        --label-dim-editor: #666;
        /*  */
        --loader-color: #fff;
        /*  */
        --content-prompt-bg: rgba(28, 26, 29, 1);
        /*  */
        --color-bar-green: #48fb47;
        --color-bar-yellow: #d9d900;
        --color-bar-red: red;
        /*  */
        --video-background: rgba(0, 0, 0, 0.5);
        /*  */
        --progress-bar-striped-bg: blue;
        /*  */
        --task-action-bg-green: #00aa1e;
        --task-action-bg-green-hover: #00d227;
    }

    .highlight {
        background-color: var(--color-blue);
    }

    /* width */
    ::-webkit-scrollbar {
        width: 3px;
        height: 3px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
        border-radius: 10px;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: var(--label-dim-color);
        border-radius: 10px;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: var(--label-dim-color);
    }

    input[type="number"] {
        -webkit-appearance: textfield;
        -moz-appearance: textfield;
        appearance: textfield;
    }

    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        appearance: none;
    }

    input[type=date] {
        text-align-last: center;
        margin-left: auto;

        margin-right: auto;
    }

    .input_number_group {
        position: relative;
    }

    .input_number_arrow_group input {
        padding-right: 40px;
    }

    .input_number_arrow_group {
        position: absolute;
        top: 0;
        right: 0;
        width: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        border: 2px solid var(--background-color);
        border-radius: 6px 6px 6px 6px;
        overflow: hidden;
    }

    .input_number_arrow_group button {
        width: 30px;
        height: 50%;
        margin: 0;
        padding: 4px;
        font-size: 0;
        background: var(--foreground-color);
        border: 0;
        color: var(--label-dim-color);
        cursor: pointer;
    }

    .input_number_arrow_group button svg {
        width: 10px;
    }

    .input_number_arrow_group button:hover {
        background: var(--active-color);
        color: var(--color-white);
    }

    .input_number_arrow_group .input_number_arrow_up {
        border-bottom: 1px solid var(--background-color);
    }

    .input_number_arrow_group .input_number_arrow_down {
        border-top: 1px solid var(--background-color);
    }

    .select_custom,
    .dropdown_custom {
        position: relative;
        width: 100%;
    }

    .select_custom_wrapper,
    .dropdown_custom_wrapper {
        display: none;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        position: absolute;
        top: calc(100% + 2px);
        right: 0;
        width: 100%;
        background: var(--select-custom-background);
        margin-top: 2px;
        border-radius: 6px;
        -webkit-box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.1);
        box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.1);
        z-index: 999;
        max-width: 320px;
        /* height:100%; */
        max-height: 362px;
        min-width: 200px;
    }

    .select_custom_wrapper.select_date_picker {
        max-height: 380px;
        min-width: 230px;
    }

    .select_custom_wrapper.pos_l,
    .dropdown_custom_wrapper.pos_l {
        left: 0;
        right: auto;
    }

    .select_custom_wrapper.pos_r,
    .dropdown_custom_wrapper.pos_r {
        left: 50%;
        right: 0;
    }

    .select_custom_wrapper.pos_c,
    .dropdown_custom_wrapper.pos_c {
        left: 50%;
        transform: translateX(-50%);
    }

    .select_custom_title,
    .dropdown_custom_title {
        padding: 8px 12px;
        font-size: 10px;
        text-transform: uppercase;
        font-weight: bold;
        color: var(--label-dim-color);
        border-bottom: 1px solid var(--background-color);
    }

    .select_custom.open .select_custom_wrapper,
    .dropdown_custom.open .dropdown_custom_wrapper {
        display: flex;
        border-radius: 6px;
        overflow: hidden;
    }

    .select_custom_items,
    .dropdown_items {
        flex: 1fr;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scroll-snap-type: y mandatory;
    }

    .select_custom_wrapper ul,
    .dropdown_custom_wrapper ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .select_custom_wrapper li,
    .dropdown_custom_wrapper li {
        padding: 8px 12px;
        font-size: 12px;
        font-weight: bold;
        border-bottom: 1px solid var(--background-color);
        scroll-snap-align: start;
        cursor: pointer;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .select_custom_wrapper li .time,
    .dropdown_custom_wrapper li .time {
        width: 100%;
    }

    .select_custom_wrapper li .icon,
    .content_multilevel_menu .cm_active_content .head .select_custom_wrapper li .icon,
    .dropdown_custom_wrapper li .icon,
    .content_multilevel_menu .cm_active_content .head .dropdown_custom_wrapper li .icon {
        display: inline-block;
        width: 14px;
        background: transparent;
        margin-right: 8px;
        font-size: 0;
    }

    .cm_header_button_group{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .select_custom_wrapper li:hover,
    .dropdown_custom_wrapper li:hover {
        background: var(--active-color);
        color: var(--color-white);
    }

    .select_custom_wrapper li:last-child,
    .dropdown_custom_wrapper li:last-child {
        border-bottom: none;
        scroll-snap-align: end;
        border-radius: 0px 0px 6px 6px;
    }

    .select_custom_wrapper li:only-child,
    .dropdown_custom_wrapper li:only-child {
        border-bottom: none;
        scroll-snap-align: end;
        border-radius: 0px;
        /* border-bottom:1px solid var(--background-color); */
    }

    .select_custom_search,
    .dropdown_custom_search {
        padding: 8px;
        border-bottom: 1px solid var(--background-color);
    }

    .return_to_login,
    .forgot_password{
        text-align: center;
        margin-top: 4px;
    }
    .return_to_login a,
    .forgot_password a{
        font-size: 12px;
        text-decoration: none;
        color:var(--label-dim-color);
        padding: 8px;
    }
    .forgot_password a:hover{
        color: var(--label-color);
    }
    .return_to_login a{
        color: var(--label-color);
    }
    .return_to_login a:hover{
        color:var(--active-color);
    }

    .button_menu {
        width: 100%;
        height: 38px;
        border-radius: 6px;
        background: var(--background-color);
        border: none;
        cursor: pointer;
        color: var(--label-dim-color);
        font-weight: bold;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0px 16px;
    }

    .button_menu .icon {
        display: inline-block;
        width: 12px;
        font-size: 0;
        padding-top: 3px;
        color: var(--label-offset-color);
    }

    .select_date_picker_container .button_menu .icon {
        padding: 0px;
    }

    .input_date .button_menu .icon {
        padding: 0;
    }

    .button_menu.button_menu_fg {
        background: var(--foreground-color);
    }

    .select_custom.selected .button_menu,
    .dropdown_custom.selected .button_menu {
        color: var(--label-color);
    }

    .select_custom_search .input_search input[type="text"],
    .dropdown_custom_search .input_search input[type="text"] {
        padding-left: 38px;
    }

    .select_custom_label {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex:1;
        text-align: left;
    }

    .button_menu .select_custom_label .icon {
        display: inline-block;
        font-size: 0;
        width: 24px;
        margin-right: 8px;
        background: var(--foreground-color);
        margin-left: -8px;
        padding: 4px;
        border-radius: 4px;
        color: var(--color-white);
    }

    body.fixed {
        position: fixed;
        top: 0;
        left: 0;
        overflow: hidden;
        transition: all 0.4s;
    }

    /* body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    } */

    .btn-success {
        background-color: var(--color-success) !important;
        color: var(--color-white) !important;
    }

    .btn-warning {
        background-color: var(--color-warning) !important;
        color: var(--color-white) !important;
    }

    .btn-attention {
        background-color: var(--color-attention) !important;
        color: var(--color-white) !important;
    }

    .loader {
        width: 60px;
    }

    .loader-wheel {
        animation: spin 1s infinite linear;
        border: 2px solid rgba(30, 30, 30, 0.5);
        border-left: 4px solid #fff;
        border-radius: 50%;
        height: 50px;
        margin-bottom: 10px;
        width: 50px;
    }

    .loader-text {
        color: #fff;
        font-family: arial, sans-serif;
    }

    .loader-text:after {
        content: 'Loading';
        animation: load 2s linear infinite;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes load {
        0% {
            content: 'Loading';
        }

        33% {
            content: 'Loading.';
        }

        67% {
            content: 'Loading..';
        }

        100% {
            content: 'Loading...';
        }
    }

    .login_container {
        position: fixed;
        width: inherit;
        display: block;
        height: inherit;
        /* max-height:auto; */
        overflow: auto;
    }

    .login_window {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 100%;
        padding: 8px;
    }

    .login_content {
        margin: auto;
        flex-shrink: 1;
        flex-basis: auto;
        background: var(--foreground-color);
        width: 100%;
        max-width: 320px;
        border-radius: 8px;
    }

    .login_header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid var(--modal-border);
        padding: 16px;
    }

    .login_header h1{
        font-size: 14px;
        text-transform: uppercase;
    }

    .login_header .brand {
        width: 65px;
        margin-top: 8px;
    }

    .login_header .version {
        margin-top: 4px;
        font-size: 10px;
    }

    nav {
        width: 100%;
    }

    .icon_inline {
        display: inline-block;
    }

    main {
        width: 100%;
        height: 100%;
        max-height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .main_body {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: stretch;
        width: 50%;
    }

    .main_body section {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        display: flex;
    }

    aside.menu {
        position: fixed;
        top: 0;
        left: -302px;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        height: 100%;
        padding-bottom: 0px;
        /*  */
        width: 300px;
        min-width: 300px;
        background-color: var(--menu-background);
        z-index: 900;
        border-right: 1px solid var(--menu-borde);
        transition: left 0.4s ease;
        will-change: left;
    }

    aside.menu:before {
        content: "";
        position: fixed;
        top: 0;
        left: -300px;
        width: 300px;
        height: 100vh;
        background: var(--menu-background);
        z-index: 1;
        border-right: 1px solid var(--menu-border);
        transition: left 0.4s ease;
        will-change: left;
    }

    aside.menu .menu_bg_dismiss {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: var(--modal-background);
        z-index: 0;
        cursor: pointer;
    }

    aside.menu.open,
    aside.menu.open:before {
        left: 0px;
        transition: left 0.4s ease;
    }

    aside.menu.open .menu_bg_dismiss {
        display: block;
    }


    aside.menu>ul {
        position: relative;
        z-index: 10;
    }

    aside.menu ul {
        list-style: none;
    }

    aside.menu li {
        padding: 8px;
        border-bottom: 1px solid var(--menu-border);
        min-height: 54.4px;
    }

    aside li.multi_level {
        padding: 8px 8px 0px 8px;
    }

    aside.menu li:last-child {
        border: 0;
    }

    aside.menu li a {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        color: var(--menu-label);
        text-decoration: none;
        font-size: 14px;
        font-weight: bold;
        padding: 8px 16px;
        background: var(--menu-background);
        border-radius: 5px;
    }

    aside.menu li a span {
        display: inline-block;
    }

    aside.menu li .label {
        flex: 1;
        text-align: left;
    }

    aside.menu li a .icon {
        font-size: 0;
        width: 16px;
        margin-right: 16px;
    }

    .indicator {
        width: 12px;
        font-size: 0;
    }

    .indicator.open {
        display: block;
    }

    .indicator.close {
        display: none;
    }

    aside.menu li.profile .image {
        width: 34px;
        border-radius: 100px;
        overflow: hidden;
        margin-right: 8px;
        font-size: 0;
    }

    aside.menu li.profile .indicator {
        width: 16px;
        font-size: 0;
    }

    #menu_color_mode_light .indicator,
    #menu_color_mode_dark .indicator,
    #menu_color_mode_light_alt .indicator,
    #menu_color_mode_dark_alt .indicator {
        display: none;
    }

    aside .sub_menu {
        display: none;
    }

    aside .sub_menu li {
        background: var(--menu-background);
    }

    aside .sub_menu li {
        margin-left: 24px;
        padding: 8px 0px;
    }

    aside.menu ul>li.active>a,
    aside.menu li a:hover {
        background: var(--active-color);
        color: var(--color-white);
    }

    aside.menu ul>li.active>a .indicator.open {
        display: none;
    }

    aside.menu ul>li.active>a .indicator.close,
    aside.menu ul>li.active>.sub_menu {
        display: block;
    }

    aside.menu li a.logout {
        color: var(--color-logout);
    }

    aside.menu li a.logout:hover {
        color: var(--color-white);
        background: var(--color-logout);
    }

    aside.menu .sub_menu p {
        text-align: left;
    }

    /* GLOBALS */
    .responsive {
        width: 100%;
        height: auto;
    }

    svg {
        width: 100%;
    }

    .text_left {
        text-align: left;
    }

    .text_center {
        text-align: center;
    }

    .text_right {
        text-align: right;
    }

    .pad_0_8 {
        padding: 0 8px;
    }

    .menu_mobile {
        flex: 1;
        display: flex;
        flex-direction: row;
        min-width: -webkit-min-content;
        color: inherit;
        justify-content: flex-end;
        align-self: stretch;
        cursor: pointer;
    }

    .menu_mobile {
        max-height: 100%;
    }

    .menu_mobile button {
        border: 0;
        padding: 0;
        margin: 0;
        width: 50px;
        padding: 0 16px;
        color: inherit;
        background: transparent;
        cursor: pointer;
    }

    .menu_mobile button .bar {
        height: 2px;
        width: 100%;
        display: block;
        margin: 4px auto;
        position: relative;
        background-color: var(--nav-color);
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        -moz-transition: 0.4s;
        -o-transition: 0.4s;
        -webkit-transition: 0.4s;
        transition: 0.4s;
    }

    .menu_mobile.sBar01.open .bar:nth-of-type(1) {
        -moz-transform: translateY(9px) rotate(45deg);
        -ms-transform: translateY(9px) rotate(45deg);
        -webkit-transform: translateY(9px) rotate(45deg);
        transform: translateY(9px) rotate(45deg);
    }

    .menu_mobile.sBar01 .bar:nth-of-type(1) {
        -moz-animation: rotateR 1.5s cubic-bezier(0.5, 0.2, 0.2, 1);
        -webkit-animation: rotateR 1.5s cubic-bezier(0.5, 0.2, 0.2, 1);
        animation: rotateR 1.5s cubic-bezier(0.5, 0.2, 0.2, 1);
    }

    .menu_mobile.sBar01.open .bar:nth-of-type(2) {
        opacity: 0;
    }

    .menu_mobile.sBar01 .bar:nth-of-type(2) {
        -moz-animation: fade 1.5s cubic-bezier(0.1, 0.8, 0.1, 1);
        -webkit-animation: fade 1.5s cubic-bezier(0.1, 0.8, 0.1, 1);
        animation: fade 1.5s cubic-bezier(0.1, 0.8, 0.1, 1);
    }

    .menu_mobile.sBar01.open .bar:nth-of-type(3) {
        -moz-transform: translateY(-9px) rotate(-45deg);
        -ms-transform: translateY(-9px) rotate(-45deg);
        -webkit-transform: translateY(-9px) rotate(-45deg);
        transform: translateY(-9px) rotate(-45deg);
    }

    .menu_mobile.sBar01 .bar:nth-of-type(3) {
        -moz-animation: rotateL 1.5s cubic-bezier(0.5, 0.2, 0.2, 1);
        -webkit-animation: rotateL 1.5s cubic-bezier(0.5, 0.2, 0.2, 1);
        animation: rotateL 1.5s cubic-bezier(0.5, 0.2, 0.2, 1);
    }

    /* MODE Styles */
    body {
        background: var(--background-color);
        color: var(--label-color);
    }

    /* body.light_mode{
        background: #fff;
        color:#000;
    } */
    nav {
        position: relative;
        z-index: 0;
    }

    nav .header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        height: 50px;
        width: 100%;
    }

    nav.nav_application .header_app {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        height: 50px;
        width: 100%;
        padding: 0px 16px;
    }

    .nav_color_mode {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .nav_color_mode button {
        display: block;
        width: 30px;
        font-size: 0;
        color: #fff;
        background: transparent;
        border: none;
        padding: 5px;
        margin: 8px;
        cursor: pointer;
        opacity: 0.7;
    }

    .nav_color_mode button:hover {
        opacity: 1;
    }

    body nav {
        background-color: var(--nav-background);
        color: var(--nav-color);
        border-bottom: 1px solid var(--nav-border);
    }

    nav .title {
        width: 70%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex: 1;
        padding-left: 8px;
    }

    nav .header.dashboard .title {
        display: none;
    }

    nav .mobile_nav,
    nav .profile {
        width: 50px;
        height: 50px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    aside.menu .profile a {
        padding: 8px 14px 8px 8px;
    }

    nav .header .brand {
        display: none;
    }

    nav .header.dashboard .brand {
        display: block;
    }

    nav .brand,
    nav .logo {
        width: 90px;
        font-size: 0px;
    }

    nav .profile_group {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-direction: space-between;
    }

    nav .profile {
        padding-right: 16px;
    }

    nav .coach_profile {
        width: 40px;
        padding-right: 16px;
        font-size: 0;
    }

    nav .coach_profile a {
        color: var(--label-dim-color);
    }

    nav .coach_profile a:hover {
        color: var(--active-color);
    }

    nav .profile .image {
        border-radius: 100px;
        overflow: hidden;
        width: 34px;
        height: 34px;
        background: var(--color-img-background);
    }

    h1 {
        width: 100%;
        font-size: 18px;
        font-weight: normal;
    }

    h2 {
        font-size: 13px;
        text-transform: uppercase;
        font-weight: 400;
    }

    .cap {
        text-transform: capitalize;
    }

    h3 {
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 8px;
    }

    h4 {
        font-size: 9px;
        font-weight: 400;
    }

    .controls {
        padding: 8px 16px;
        background: var(--foreground-color);
        border-bottom: 1px solid var(--border-color);
        min-height: 38px;
    }

    .controls_header_scroll {
        overflow-y: hidden;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        padding: 8px 0px;
        background: var(--foreground-color);
        border-bottom: 1px solid var(--border-color);
        width: 100%;
        max-width: 100vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding: 8px 12px;
        -ms-overflow-style: none;
        /* Internet Explorer 10+ */
        scrollbar-width: none;
        /* Firefox */
        min-height: 54.5px;
    }

    .controls_header_scroll::-webkit-scrollbar {
        display: none;
        /* Safari and Chrome */
    }

    .controls_header_scroll a {
        display: inline-block;
    }

    section.controls .wrapper {
        padding: 8px 16px;
    }

    section .header {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        /* padding: 16px 0; */
    }

    section .wrapper {
        padding: 16px;
        width: 100%;
    }

    section .wrapper_flex {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
    }

    section .wrapper_stretch {
        min-width: 100%;
        width: 100vw;
        position: relative;
    }

    .body_widget {
        border-radius: 6px;
        background: var(--foreground-color);
    }

    .body_widget_spacer {
        width: 100%;
        content: " ";
        height: 80px;
    }

    .body_widget .bw_header {
        padding: 8px;
        border-bottom: 1px solid var(--background-color);
    }

    .body_widget .bw_header h3 {
        margin: 0;
    }

    .body_widget .bw_header .accent {
        color: var(--active-color);
        padding-left: 8px;
    }

    .body_widget .bw_content {
        padding: 8px;
    }

    .bw_content .button_radio_container:last-child {
        margin-bottom: 0px;
    }

    .cart_widget {
        border-radius: 6px;
        border: 1px solid var(--background-color);
        background: var(--background-color);
    }

    .cart_widget .cw_header {
        padding: 8px;
        border-bottom: 1px solid var(--foreground-offset-color);
    }

    .cart_widget .cw_header .accent {
        color: var(--active-color);
        padding-left: 8px;
    }

    .cart_widget .cw_header h3 {
        margin: 0;
    }

    .cart_widget .cw_content {
        padding: 8px;
    }

    .cart_widget .cw_content h4 {
        margin-bottom: 4px;
        font-size: 11px;
        text-transform: uppercase;
    }

    .cart_widget .input_container input,
    .cart_widget .button_radio_container input~.button_radio_mask {
        background: var(--cart-input-bg);
    }

    .fw_content .cart_item .cart_price {
        color: var(--label-color);
        font-size: 16px;
        margin-top: 8px;
    }

    .fw_book .image_book {
        background: var(--color-img-background);
    }

    .cart_item_button {
        width: 100%;
    }

    .button_radio_container {
        position: relative;
    }

    .button_radio_container input {
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
    }

    .button_radio_container input~.button_radio_mask {
        display: block;
        background: var(--background-color);
        border: 1px solid var(--background-color);
        padding: 8px;
        border-radius: 6px;
        cursor: pointer;
        user-select: none;
        color: var(--label-color);
        text-align: center;
        font-weight: bold;
        font-size: 13px;
    }

    .button_radio_container input[type="radio"]:checked~.button_radio_mask,
    .button_radio_container input[type="radio"]:hover~.button_radio_mask {
        background: var(--active-color);
        border: 1px solid var(--active-color);
    }

    .checkbox_container {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        font-size: 12px;
    }

    .checkbox_container_reverse {
        flex-direction: row-reverse;
    }

    .checkbox_container input {
        position: absolute;
        width: 0;
        height: 0;
        top: 0;
        left: 0;
        opacity: 0;
    }

    .checkbox_container .checkbox_mask {
        position: relative;
        display: inline-block;
        width: 16px;
        height: 16px;
        border: 2px solid var(--label-dim-color);
        background: var(--background-color);
        border-radius: 4px;
    }

    .checkbox_container input[type="checkbox"]:checked~.checkbox_mask {
        /* border:2px solid var(--active-color); */
        background: var(--label-color);
        -webkit-box-shadow: inset 0px 0px 0px 1px var(--background-color);
        box-shadow: inset 0px 0px 0px 1px var(--background-color);
    }

    .checkbox_container .label {
        margin-right: 8px;
        width: 100%;
        user-select: none;
    }

    .deal_new_task_container {
        display: none;
    }

    .checkbox_tasks {
        text-align: left;
        display: block;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .checkbox_tasks .label {
        margin: 0 8px;
        user-select: none;
        flex: 1;
    }

    .checkbox_tasks .label * {
        display: block;
    }

    .checkbox_tasks .label .title {
        font-size: 12px;
        font-weight: bold;
        color: var(--label-color);
    }

    .checkbox_tasks .task_icon {
        width: 18px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-size: 0;
        margin: 0 8px;
    }

    .checkbox_tasks .action {
        text-align: right;
    }

    .checkbox_tasks[data-status=overdue] .tasks_pending,
    .checkbox_tasks[data-status=pending] .tasks_pending,
    .checkbox_tasks[data-status=completed] .tasks_completed {
        display: block;
    }

    .checkbox_tasks[data-status=overdue] .tasks_completed,
    .checkbox_tasks[data-status=pending] .tasks_completed,
    .checkbox_tasks[data-status=completed] .tasks_pending {
        display: none;
    }

    .checkbox_tasks .tasks_pending {
        color: var(--label-dim-color);
    }

    .checkbox_tasks[data-status=overdue] .tasks_pending {
        color: var(--task-icon-overdue);
    }

    .checkbox_tasks .tasks_completed {
        color: var(--task-icon-completed);
    }

    .checkbox_tasks .status {
        font-size: 9px;
    }

    .checkbox_tasks .status.overdue {
        color: var(--task-icon-overdue);
    }

    .checkbox_tasks .status.completed {
        color: var(--task-icon-completed);
    }

    .checkbox_tasks .status.due {
        color: var(--active-color);
    }

    .radio_container {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        font-size: 12px;
    }

    .radio_container_reverse {
        flex-direction: row-reverse;
    }

    .radio_container input {
        position: absolute;
        width: 0;
        height: 0;
        top: 0;
        left: 0;
        opacity: 0;
    }

    .radio_container .radio_mask {
        position: relative;
        display: inline-block;
        width: 18px;
        height: 16px;
        border: 2px solid var(--label-dim-color);
        background: var(--background-color);
        border-radius: 40px;
    }

    .radio_container input[type="radio"]:checked~.radio_mask {
        /* border:2px solid var(--active-color); */
        background: var(--label-color);
        -webkit-box-shadow: inset 0px 0px 0px 1px var(--background-color);
        box-shadow: inset 0px 0px 0px 1px var(--background-color);
    }

    .radio_container .label {
        margin: 0 8px;
        width: 100%;
        user-select: none;
    }

    .input_container {
        position: relative;
    }

    .input_container input {
        display: block;
        background: var(--background-color);
        border: 1px solid var(--background-color);
        padding: 8px;
        border-radius: 7px;
        cursor: pointer;
        user-select: none;
        color: var(--label-color);
        text-align: center;
        font-weight: 400;
        font-size: 20px;
        width: 100%;
    }

    .input_container.input_currency input {
        text-align: right;
        padding-left: 24px;
    }

    .input_container.input_currency:before {
        position: absolute;
        top: 0;
        left: 8px;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        content: "$";
        color: var(--label-color);
        text-align: right;
        font-weight: 400;
        font-size: 20px;
    }

    .list_item {
        padding: 8px;
        border-radius: 6px;
        border: 1px solid var(--background-color);
        cursor: pointer;
    }

    .list_item.list_item_accent {
        border-color: var(--label-dim-color);
    }

    .list_item:hover {
        border: 1px solid var(--active-color);
    }

    body section .block {
        position: relative;
        background: var(--foreground-color);
    }

    body section.section_list .block {
        position: relative;
        background: transparent;
    }

    .block {
        position: relative;
        border-radius: 6px;
    }

    .block_end {
        height: 16px;
        background: transparent;
    }

    body section.section_list .grid_list {
        background: var(--foreground-color);
        border: 1px solid var(--foreground-color);
    }

    body section.section_list .grid_list .info .description {
        font-size: 11px;
        color: var(--label-dim-color);
    }

    body section.section_list .grid_list:hover {
        border: 1px solid var(--active-color);
    }

    body section.section_list .grid_list:hover .icon {
        color: var(--label-color);
    }

    body section.section_list .grid_list.post_item {
        background: transparent;
    }

    .grid_list .thumb {
        max-width: 50px;
        padding: 10px;
        font-size: 0;
    }

    .grid_list_thumb_group {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .grid_list_thumb_group .icon {
        width: 20px;
        font-size: 0;
        margin-right: 12px;
        color: var(--label-dim-color);
    }

    .grid_list .visits_info {
        line-height: 1.3;
    }

    .grid_list .visits_info .date {
        font-size: 13px;
        font-weight: bold;
        color: var(--label-color);
    }

    .grid_list .visits_info .time {
        font-size: 11px;
    }

    .grid_list .visits_info .description {
        font-size: 11px;
        color: var(--label-dim-color);
    }

    .grid_list .visits_info.status {
        font-size: 10px;
        color: var(--label-dim-color);
        text-transform: uppercase;
        font-weight: bold;
        color: var(--color-green);
    }

    .grid_list .visits_info.status.late {
        color: var(--color-red);
    }

    .automation_item {
        position: relative;
        background: var(--background-color);
        border: 1px solid var(--foreground-color);
        min-height: 44px;
        padding: 6px 8px;
        border-radius: 6px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        overflow: hidden;
    }

    .automation_description {
        flex: 1;
        color: var(--label-color);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .automation_description .icon {
        width: 24px;
        font-size: 0;
        color: var(--label-dim-color);
        margin-right: 8px;
        padding: 4px;
    }

    .automation_description .info {
        flex: 1;
    }

    .automation_description .title {
        font-size: 13px;
    }

    .automation_description .preview_content {
        font-size: 11px;
        color: var(--label-dim-color);
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .automation_divider {
        height: 32px;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
    }

    .automation_divider div {
        position: relative;
        border-left: 1px dotted var(--label-color);
    }

    .automation_divider div:after {
        content: '';
        position: absolute;
        left: -5.4px;
        bottom: 0;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid var(--label-color);
        clear: both;
    }

    .sub_block {
        position: relative;
        padding-left: 8px;
        border-left: 1px dotted var(--sub-list-border);
    }

    .sub_block .block:before {
        content: "";
        width: 8px;
        height: 0px;
        border-top: 1px dotted var(--sub-list-border);
        position: absolute;
        left: -8px;
        top: 50%;
    }

    .block.widget {
        padding: 8px;
    }

    .block .widget_content {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .block .widget_content .icon {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-right: 4px;
        width: 50px;
        height: auto;
        max-width: 50px;
        max-height: 50px;
        border-radius: 6px;
        font-size: 0;
        padding: 10px;
        background: var(--active-color);
    }

    body section .icon {
        background: transparent;
        color: var(--icon-color);
    }

    .dash_widget_action {
        padding: 8px;
        cursor: pointer;
        height: 100%;
    }

    .dash_widget_action_container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding: 8px;
        border-radius: 4px;
        height: 100%;
    }

    .dash_widget_container {
        padding: 16px;
    }

    .dash_widget_header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .dash_widget_action .thumb,
    .dash_widget_header .icon {
        width: 40px;
        border-radius: 6px;
        background: var(--background-color);
        color: var(--label-color);
        font-size: 0;
        padding: 8px;
    }

    .dash_widget_action .thumb {
        background-color: var(--active-color);
    }

    .dash_widget_action .info,
    .dash_widget_header .info {
        flex: 1;
        text-align: left;
        padding: 0 16px;
        line-height: 1.2;

    }

    .dash_widget_action .info h3,
    .dash_widget_header .info h3 {
        font-size: 20px;
        margin: 0;
        font-weight: 300;
    }

    .dash_widget_action .info p,
    .dash_widget_header .info p {
        color: var(--label-dim-color);
        font-size: 13px;
    }

    .dash_widget_action .info sup,
    .dash_widget_header .info sup {
        font-size: 13px;
        padding-left: 4px;
    }

    .dash_widget_body {
        padding-top: 8px;
    }

    .dash_widget_action:hover .dash_widget_action_container {
        background: var(--active-color);
    }

    .dash_widget_action .indicator {
        align-self: center;
    }

    .dash_widget_action .indicator .icon {
        color: var(--label-color);
    }

    .dash_widget_action:hover .indicator .icon,
    .dash_widget_action:hover .info h3,
    .dash_widget_action:hover .info p {
        color: var(--color-white);
    }

    .dash_widget_action:hover .thumb {
        background: var(--background-color);
        color: var(--label-color);
    }

    .dash_widget_action:hover .thumb .icon {
        color: var(--label-color);
    }

    .dash_widget_progress {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        height: 100%;
        width: 100%;
    }

    .dash_widget_progress_body {
        padding-bottom: 32px;
        flex: 1;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
    }

    .dash_widget_progress_title {
        width: 100%;
        padding: 8px 16px;
        border-bottom: 1px solid var(--background-color);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .dash_widget_progress_title .button_widget{
        border-radius: 4px;
        border:none;
        background: var(--active-color);
        cursor: pointer;
        color:white;
        padding: 0 4px;
        margin-right: -8px;
    }
    .dash_widget_progress_title .button_widget:hover{
        background: var(--button-background-hover);
    }
    .dash_widget_progress_title .button_widget .icon{
        padding: 4px;
        width: 20px;
        font-size: 0;
    }
    .dash_widget_progress_title .button_widget .text{
        padding: 4px;
    }

    .block_invert .dash_widget_progress_title{
        border-color: var(--foreground-color);
    }

    .dash_widget_progress_title h3 {
        margin: 0;
        text-align: left;
    }

    .dash_widget_progress_metrics .title {
        font-size: 14px;
        min-height: 50px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;

    }

    .dash_widget_progress_metrics .title h4 {
        font-size: 12px;
    }

    .dash_widget_progress_metrics {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 12px;
    }

    .action_reveal_container input {
        position: fixed;
        visibility: none;
        width: 0;
        height: 0;
        top: 0;
        left: 0;
        opacity: 0;
    }

    .action_reveal {
        display: flex;
        position: absolute;
        top: 0;
        right: -240px;
        height: 100%;
        background: var(--action-reveal-background);
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0 4px;
        z-index: 100;
        max-width: 240px;
        transition: right 0.4s ease;
        will-change: right;
        -webkit-box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.1);
        box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.1);
    }

    .light_mode .action_reveal,
    .light_mode_alt .action_reveal {
        -webkit-box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.1);
        box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.1);
    }

    .action_reveal .icon {
        display: inline-block;
        width: 28px;
        height: 28px;
        padding: 0 8px;
        font-size: 0;
        background: transparent;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        cursor: pointer;
        color: var(--action-reveal-label);
        margin: 0 4px;
    }

    .toggle_action_reveal:checked~.action_reveal_call,
    .toggle_action_reveal:checked~.icon.action_reveal_call {
        display: none;
    }

    .toggle_action_reveal:checked~.action_reveal {
        right: 0px;
        transition: right 0.4s ease;
        will-change: right;
    }


    /* .block .widget_content .icon.icon_green{
        background-color: #61a66d;
    }

    .block .widget_content .icon.icon_text{
        font-size:16px;
    } */

    .block .widget_content .info {
        width: 100%;
        text-align: center;
    }

    body .widget_content p {
        color: var(--label-color);
    }

    body .widget_content p small {
        font-size: 10px;
    }

    .block .widget_content .info h3 {
        margin: 0;
    }

    .block .widget_content .info .number {
        font-size: 18px;
    }

    .block .widget_content .info .label {
        font-size: 12px;
    }

    body section .label {
        color: var(--active-color);
    }

    .block .widget_content .image {
        width: 40px;
        font-size: 0;
        margin: 0 8px;
        border-radius: 100px;
        overflow: hidden;
    }

    .block .widget_content .caret {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 14px;
        color: #fff;
    }

    .input_controls {
        position: relative;
        width: 100%;
    }

    .input_search {
        position: relative;
        width: 100%;
        height: 38px;
    }

    .input_search .icon {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 100%;
        padding: 9px;
        background: transparent;
    }

    .input_search_reverse .icon {
        left: auto;
        right: 0;
    }

    body .input_search .icon {
        color: var(--label-offset-color);
    }

    .input_search input {
        width: inherit;
        height: inherit;
        border-radius: 6px;
        background: var(--background-color);
        border: none;
        padding-left: 38px;
        color: var(--label-offset-color);
        font-size: 14px;
        font-weight: bold;
    }

    .input_search_reverse input {
        padding-left: 0px;
        padding-right: 38px;
    }

    .input_controls input {
        width: inherit;
        height: inherit;
        border-radius: 6px;
        background: var(--background-color);
        border: none;
        color: var(--label-offset-color);
        font-size: 14px;
        font-weight: bold;
        padding: 10.5px 12px;
    }

    .input_search input::placeholder,
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    .input_controls input::placeholder {
        /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: var(--label-dim-color);
        opacity: 1;
        /* Firefox */
    }

    .input_search input:-ms-input-placeholder,
    /* Internet Explorer 10-11 */
    .input_controls input:-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: var(--label-dim-color);
    }

    .input_search input::-ms-input-placeholder,
    /* Microsoft Edge */
    .input_controls input::-ms-input-placeholder {
        /* Microsoft Edge */
        color: var(--label-dim-color);
    }

    .input_search input:focus::placeholder,
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    .input_controls input:focus::placeholder {
        /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: var(--label-dim-color);
        opacity: 0.5;
        /* Firefox */
    }

    .input_search input:focus:-ms-input-placeholder,
    /* Internet Explorer 10-11 */
    .input_controls input:focus:-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: var(--placeholder-focus);
    }

    .input_search input:focus::-ms-input-placeholder,
    /* Microsoft Edge */
    .input_controls input:focus::-ms-input-placeholder {
        /* Microsoft Edge */
        color: var(--placeholder-focus);
    }

    .button,
    .button_el {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background: var(--active-color);
        color: var(--color-white);
        height: 38px;
        min-width: 38px;
        border: none;
        padding: 0px 8px;
        font-weight: bold;
        border-radius: 6px;
        cursor: pointer;
    }

    .button.close_content {
        color: var(--label-color);
    }

    .button.button_strech {
        width: 100%;
    }

    .button.button_affirm{
        background: #4a4af4;
        border:1px solid #7676ff;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: center;
        gap: 8px;
        height: auto;
        padding: 12px 8px 8px 8px;
        font-size: 18px;
        color: white;
    }
    .button.button_affirm:hover{
        background: blue;
    }
    .button_affirm i {
        width: 60px;
    }
    .button.button_affirm._processing:hover,
    .button.button_affirm._processing{
        cursor: not-allowed;
        border:1px solid #4a4af4;
        background: #4a4af476;
        color: var(--label-color);
    }
    .button.button_affirm._processing .loading_icon{
        width: 23px;
        font-size: 5px;
    }

    .button.processing {
        pointer-events: none;
        touch-action: none;
        background: var(--nav-background);
    }

    .button.button_select {
        border: 1px solid var(--label-dim-color);
        background: transparent;
        text-decoration: none;
        color: var(--label-dim-color);
        height: 28px;
        min-height: 28px;
    }

    .stats_action_group .button.button_select .icon {
        width: 18px;
        min-width: 18px;
        padding: 0 0 0 8px;
        margin: 0;
        color: inherit;
    }

    .button.button_select:hover {
        border: 1px solid var(--active-color);
        background: var(--active-color);
        color: var(--color-white);
    }

    .button.button_cart {
        border: 1px solid var(--label-dim-color);
        background: transparent;
        text-decoration: none;
        color: var(--label-dim-color);
    }

    .button.button_cart.active {
        background: var(--background-color);
        color: var(--label-color);
    }

    .button.button_cart:hover,
    .button.button_cart.active:hover {
        background: var(--active-color);
        color: var(--color-white);
        border: 1px solid var(--active-color);
    }

    .button.close_chat,
    .button.close_content {
        background: transparent;
    }

    .button_label {
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
        /* width: 100%; */
        /* max-width: 74px; */
    }

    .button_cart .button_label {
        justify-content: space-between;
        width: 100%;
    }

    .button .icon,
    .button_el .icon {
        display: inline-block;
        width: 16px;
        font-size: 0;
        margin: 0 8px;
    }

    .button .icon.small,
    .button_el .icon.small {
        display: inline-block;
        width: 12px;
        font-size: 0;

    }

    .button.btn_transparent,
    .button.btn_transparent .icon,
    .button_el.btn_transparent,
    .button_el.btn_transparent .icon {
        background: transparent;
    }

    .button.large .icon,
    .button_el.large .icon {
        width: 18px;
    }

    .button .text {
        padding: 8px;
    }

    .wrapper_header .info,
    .wrapper_header .info_alt {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        font-size: 10px;
        height: 100%;
        padding: 8px;
        font-weight: bold;
    }

    .wrapper_header .info_alt .icon{
        width: 15px;
        margin-right: 4px;
        color: var(--label-dim-color);
    }
    .wrapper_header .info_alt .label{
        font-size: 10px;
        color: var(--label-dim-color);
    }

    body .wrapper_header .info,
    body .wrapper_header .info_alt {
        background: var(--foreground-color);
        color: var(--label-color);
    }

    body .wrapper_header .info.icon svg {
        width: 13px;
        color: var(--label-dim-color);
    }

    body .deals_content .wrapper_header .info {
        background: var(--background-color);
        color: var(--label-color);
    }

    body .deals_content .deals_block {
        background: var(--background-color);
        color: var(--label-color);
        border-radius: 6px;
    }

    .wrapper_header .info span {
        display: inline-block;
        width: 100%;
        padding: 0 8px;
        text-align: left;
    }

    .header_tabs {
        min-height: 38px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        overflow-y: auto;
        overflow-y: hidden;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        border-radius: 4px;
    }

    .button_tab {
        padding: 8px 16px;
        margin: 0 4px;
        background: var(--background-color);
        color: var(--label-offset-color);
        border: none;
        border-radius: 4px;
        line-height: 1;
        text-transform: uppercase;
        font-size: 12px;
        font-weight: bold;
        text-decoration: none;
        height: 38px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .button_tab:hover,
    .button_tab.active {
        background: var(--active-color);
        color: var(--color-white);
    }

    .button_tab span {
        display: inline-block;
        white-space: nowrap;
    }

    .grid_list {
        position: relative;
        overflow: hidden;
        border-radius: inherit;
    }

    .grid_list,
    .client_stats {
        padding: 8px;
    }

    .list_divider {
        border-top: 1px solid var(--background-color);
    }

    .grid_list .stats,
    .client_stats .stats {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 11px;
    }

    .grid_list .stats_alt,
    .client_stats .stats_alt {
        font-weight: bold;
        font-size: 11px;
    }

    .stats_action_absolute {
        position: absolute;
        top: 8px;
        right: 4px;
        grid-column: auto;
    }

    .stats_action_absolute .action_reveal {
        height: 50px;
        border-radius: 6px;
        margin-right: 3px;
    }

    .grid_list .stats p,
    .client_stats .stats p {
        width: 100%;
    }

    .header_tabs .user,
    .grid_list .user,
    .client_stats .client {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .client_progress_fotos .info_container {
        font-size: 12px;
        text-transform: uppercase;
        color: var(--label-color);
        padding: 8px;
    }

    .client_progress_fotos_group {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        border: 1px solid black;
        padding: 14px 0 10px 0;
        border-radius: 4px;
    }

    .block_invert .client_progress_fotos_group{
        border-color: var(--foreground-color);
    }

    .client_progress_fotos_image {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .client_progress_fotos_image .label {
        font-size: 10px;
        text-transform: uppercase;
        color: var(--label-dim-color);
    }

    .grid_list .client_progress_fotos_image .image {
        width: 60px;
        height: 60px;
    }

    .header_tabs .user .full_name_container,
    .grid_list .full_name_container,
    .client_stats .client_name_container {
        padding-left: 8px;
        flex: 1;
        text-align: left;
        line-height: 1;
        font-size: 13px;
    }
    
    .color_dim {
        color: var(--label-dim-color);
    }

    .header_tabs a {
        text-decoration: none;
    }

    .header_tabs a .user {
        text-decoration: none;
        color: var(--label-color);
    }

    .header_tabs .user .full_name_container small {
        font-size: 10px;
    }

    .full_name_container span {
        font-size: 14px;
        font-weight: bold;
    }

    .grid_list .title_flex {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .grid_list .title_flex .icon {
        width: 25px;
        display: inline-block;
        margin-right: 8px;
        color: var(--label-color);
        font-size: 0;
        height: 25px;
        background: var(--background-color);
        padding: 4px;
        border: 1px solid var(--background-color);
        border-radius: 6px;
    }

    .grid_list .full_name,
    .grid_list .title,
    .client_stats .client_name {
        display: inline-block;
        text-align: left;
        font-weight: bold;
        line-height: 1.2;
        font-size: 13px;
        /* padding-right:24px; */
    }

    .sub_title {
        font-size: 11px;
        color: var(--label-dim-color);
    }

    .sub_title_mini {
        font-size: 10px;
        font-weight: normal;
        color: var(--label-dim-color);
    }

    .grid_list .user .icon,
    .client_stats .client .icon {
        width: 16px;
        font-size: 0;
        color: #666;
        background: transparent;
        align-self: flex-start;
    }

    .grid_list .user.first,
    .grid_list .user.last,
    .client_stats .client_name.first,
    .client_stats .client_name.last {
        display: inline-block;
    }

    .header_tabs .user .image,
    .grid_list .image,
    .client_stats .image {
        width: 38px;
        height: 38px;
        border-radius: 100px;
        overflow: hidden;
        background: var(--color-img-background);
    }

    .fw_action.stats_action {
        position: absolute;
        top: 3px;
        right: 0px;
        height: 36px;
        border-radius: 4px;
    }

    .stats_action .stats_action_group,
    .stats_action_inline .stats_action_group {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        padding-right: 4px;
        min-height: 28px;
    }

    .fw_action.stats_action {
        padding-top: 1px;
    }

    .fw_action .action_reveal {
        height: 50px;
        border-radius: 6px;
        margin-right: 3px;
    }

    .stats_action .stats_action_group .icon,
    .stats_action_inline .stats_action_group .icon {
        width: 28px;
        height: 28px;
        padding: 0 8px;
        font-size: 0;
        background: transparent;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        cursor: pointer;
        color: var(--label-color);
    }

    body section .block.block_link .stats_action_group .icon:hover {
        background: var(--active-color);
        color: var(--color-white);
    }

    body section .block.block_border {
        border: 1px solid var(--background-color);
    }

    body section .block.block_invert {
        background: var(--background-color);
    }

    body section .block.block_list_invert .grid_list {
        background: var(--background-color);
    }

    body section a.block_link {
        border: 1px solid var(--foreground-color);
        color: var(--color-white);
        text-decoration: none;
    }

    body section a.block_link:hover {
        border-color: var(--active-color);
    }

    .client_stats .info {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        font-size: 13px;
    }

    .client_stats .info.al_right {
        justify-content: flex-end;
    }

    .client_stats .info a {
        color: inherit;
        text-decoration: none;
    }

    .client_stats .info a:hover,
    .client_stats .info a:hover span {
        text-decoration: underline;
    }

    .info_container {
        text-align: left;
    }

    .info_container.client_name {
        font-size: 16px;
        font-weight: bold;
    }

    .client_stats .info_container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .client_stats .info_container .icon {
        background: transparent;
        width: 38px;
        padding: 4px 14px;
        font-size: 0;
        color: #666;
    }

    .client_stats .business_name {
        font-size: 10px;
        text-transform: uppercase;
        color: var(--label-dim-color);
        margin-top: 2px;
        display: block;
    }

    .stats_info {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        font-size: 12px;
    }

    .stats_info .icon {
        width: 44px;
        padding: 0 16px;
        background: transparent;
        color: var(--label-dim-color);
        margin-right: 4px;
        font-size: 0px;
    }

    .stats_info p,
    .stats_info a,
    .stats_info span,
    .stats_info .label {
        /* display:inline-block; */
        width: 100%;
        font-weight: normal;
    }

    .stats_info a {
        color: var(--label-color);
        text-decoration: none;
    }

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

    .stats_info .switch {
        display: inline;
        width: 100%;
        font-size: 0;
    }

    .stats_info_alt {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        width: 80%;
        max-width: 60px;
    }

    .stats_info_alt .icon {
        width: 16px;
        background: transparent;
        color: var(--label-dim-color);
        font-size: 0;
        margin-right: 6px;
        min-width: 12px;
    }

    .deals_content .stats_info span.bold {
        font-weight: bold;
    }

    .info_container.address,
    .info_container.phone {
        font-size: 12px;
    }

    .info_container.address span {
        display: inline-block;
    }

    .info_container.address span.email {
        display: inline;
    }

    .info_container.address .group {
        display: block;
    }

    .info .email.first,
    .info .email.last {
        display: inline-block;
    }

    body.light_mode .client_stats .green,
    body.light_mode_alt .client_stats .green {
        color: var(--label-invert-color);
        background: var(--color-green);
        padding: 2px 4px;
        border-radius: 100px;
    }

    body.dark_mode .client_stats .green,
    body.dark_mode_alt .client_stats .green,
    body .client_stats .info_container.status.green {
        color: var(--color-green);
        background: transparent;
        padding: 2px 4px;
        border-radius: 100px;
    }

    body.light_mode .client_stats .red,
    body.light_mode_alt .client_stats .red {
        color: var(--label-invert-color);
        background: var(--color-red);
        padding: 2px 4px;
        border-radius: 100px;
    }

    body.dark_mode .client_stats .red,
    body.dark_mode_alt .client_stats .red,
    body .client_stats .info_container.status.red {
        color: var(--color-red);
        background: transparent;
        padding: 2px 4px;
        border-radius: 100px;
    }

    body.light_mode .client_stats .orange,
    body.light_mode_alt .client_stats .orange {
        color: var(--label-invert-color);
        background: var(--color-orange);
        padding: 2px 4px;
        border-radius: 100px;
    }

    body.dark_mode .client_stats .orange,
    body.dark_mode_alt .client_stats .orange,
    body .client_stats .info_container.status.orange {
        color: var(--color-orange);
        background: transparent;
        padding: 2px 4px;
        border-radius: 100px;
    }

    body .client_stats .dim,
    body .client_stats .info_container.status.dim {
        color: var(--label-dim-color);
        background: transparent;
        padding: 2px 4px;
        border-radius: 100px;
    }


    body .client_stats .info_container.status,
    body .client_stats .info_container.status.green,
    body .client_stats .info_container.status.red,
    body .client_stats .info_container.status.orange {
        width: 100%;
        padding: 0;
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .flex_widget {
        background: var(--background-color);
        border-radius: 6px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }
    .widget_fg,
    .flex_widget_fg,
    .flex_widget.flex_widget_fg {
        border-radius: 6px;
        background: var(--foreground-color);
    }

    .widget_bg{
        border-radius: 6px;
        background: var(--background-color);
    }

    .flex_widget .fw_thumbnail {
        width: 30%;
        max-width: 200px;
        min-width: 150px;
        margin-right: 16px;
        padding: 3%;
        font-size: 0;
    }

    .flex_widget .fw_thumbnail.fw_product {
        width: 20%;
        max-width: 100px;
        min-width: 100px;
        margin-right: 8px;
        padding: 8px;
    }

    .flex_widget .fw_content h4 {
        font-size: 12px;
    }

    .flex_widget .fw_content {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: stretch;
        height: 100%;
        padding: 8px 0;
    }

    .flex_widget .fw_content .fw_info {
        height: 100%;
        width: 100%;
        text-align: left;
    }

    .flex_widget .fw_content h3 {
        margin-bottom: 4px;
        font-size: 14px;
    }

    .flex_widget .fw_content p {
        font-size: 12px;
        margin-bottom: 8px;
        color: var(--label-dim-color);
    }

    .flex_widget .fw_reviews {
        width: 100%;
    }

    .flex_widget .fw_reviews button {
        width: auto;
        padding: 0;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        background: transparent;
        color: var(--active-color);
        border: 1px solid transparent;
    }

    .flex_widget .fw_reviews .star_group {
        margin-right: 8px;
    }

    .flex_widget .fw_reviews .star {
        display: inline-block;
        width: 14px;
    }

    .widget_bg{
        border-radius: 6px;
        background: var(--background-color);
    }

    .content_admin_products .stats_action {
        position: absolute;
        top: 8px;
        right: 4px;
        grid-column: auto;
    }

    .content_admin_products .action_reveal {
        height: 50px;
        border-radius: 6px;
        margin-right: 3px;
    }

    .connect_messages,
    .content_multilevel_menu {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: stretch;
        height: 100%;
    }

    [data-page="connect"] footer {
        display: none;
    }

    .connect_messages .cm_list,
    .content_multilevel_menu .cm_list {
        width: 100%;
        height: calc(100% - 32px);
        margin: 0;
        border-radius: 6px;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        transition: width 0.4s ease, margin 0.4s ease;
        will-change: width, margin;
        margin: 16px;
    }

    .connect_messages .cm_list .message_item,
    .content_multilevel_menu .cm_list .menu_item {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        min-height: 54px;
        padding: 16px;
    }

    .content_multilevel_menu .cm_list .menu_item,
    .content_multilevel_menu .cm_list .menu_action {
        position: relative;
        align-items: stretch;
        justify-content: stretch;
        height: 100%;
        background: var(--foreground-color);
        padding: 8px;
        border-radius: 6px;
        width: 100%;
        max-width: 100%;
    }
    
    .content_multilevel_menu .cm_list .menu_item.menu_item_content{
        background: var(--foreground-offset-color);
    }

    .content_multilevel_menu .cm_list .menu_item .title {
        font-size: 14px;
    }

    .content_multilevel_menu .cm_list .menu_item_wrapper {
        padding: 8px;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .content_multilevel_menu .cm_list .menu_item_wrapper .menu_content {
        padding: 0;
        position: relative;
    }

    .content_multilevel_menu .cm_list .menu_item_wrapper .menu_bottom_label {
        position: absolute;
        bottom: 0;
        right: 0;
        font-size: 11px;
        font-weight: bold;
    }

    .content_multilevel_menu .cm_list .menu_group {
        position: relative;
    }

    .content_multilevel_menu .cm_list .submenu_group .title {
        font-size: 13px;
    }

    .content_multilevel_menu .cm_list .submenu_group .menu_item::before {
        content: "";
        width: 8px;
        height: 0px;
        border-top: 1px dotted var(--sub-list-border);
        position: absolute;
        left: -8px;
        top: 50%;
    }

    .content_multilevel_menu .cm_list .submenu_group {
        display: none;
        padding-left: 8px;
        border-left: 1px dotted var(--sub-list-border);
    }

    .content_multilevel_menu .menu_item:hover .menu_item_wrapper,
    .content_multilevel_menu .menu_group.active>.menu_item>.menu_item_wrapper,
    .content_multilevel_menu .menu_item.active>.menu_item_wrapper {
        background: var(--active-color);
        border-radius: 4px;
        color: var(--color-white);
    }

    .content_multilevel_menu .menu_item:hover .menu_item_wrapper.dc_6,
    .content_multilevel_menu .menu_group.active>.menu_item>.menu_item_wrapper.dc_6,
    .content_multilevel_menu .menu_item.active>.menu_item_wrapper.dc_6 {
        background: var(--deal-color-6);
        border-radius: 4px;
        color: var(--color-white);
    }

    .content_multilevel_menu .menu_item:hover .menu_item_wrapper.dc_6 .deal_color,
    .content_multilevel_menu .menu_group.active>.menu_item>.menu_item_wrapper.dc_6 .deal_color,
    .content_multilevel_menu .menu_item.active>.menu_item_wrapper.dc_6 .deal_color {
        background: var(--background-color);
    }

    .content_multilevel_menu .menu_item:hover .menu_item_wrapper.dc_6 .icon_badge,
    .content_multilevel_menu .menu_group.active>.menu_item>.menu_item_wrapper.dc_6 .icon_badge,
    .content_multilevel_menu .menu_item.active>.menu_item_wrapper.dc_6 .icon_badge {
        background: var(--foreground-color);
        color: var(--label-color);
    }

    .content_multilevel_menu .menu_item:hover .menu_item_wrapper.dc_6 .sub_title,
    .content_multilevel_menu .menu_group.active>.menu_item>.menu_item_wrapper.dc_6 .sub_title,
    .content_multilevel_menu .menu_item.active>.menu_item_wrapper.dc_6 .sub_title,
    .content_multilevel_menu .menu_item:hover .menu_item_wrapper.dc_6 small,
    .content_multilevel_menu .menu_group.active>.menu_item>.menu_item_wrapper.dc_6 small,
    .content_multilevel_menu .menu_item.active>.menu_item_wrapper.dc_6 small {
        color: var(--color-white);
    }

    .content_multilevel_menu .menu_item:hover .menu_item_wrapper .menu_description,
    .content_multilevel_menu .menu_group.active>.menu_item>.menu_item_wrapper .menu_description,
    .content_multilevel_menu .menu_item.active>.menu_item_wrapper .menu_description {
        color: var(--color-white);
    }

    .content_multilevel_menu .menu_item.menu_loading{
        pointer-events: none;
        touch-action: none;
        cursor: wait;
    }

    .content_multilevel_menu .menu_group.active>.menu_item>.menu_item_wrapper>.indicator.open {
        display: none;
    }

    .content_multilevel_menu .menu_group.active>.menu_item>.menu_item_wrapper>.indicator.close {
        display: block
    }

    .content_multilevel_menu .menu_group.active>.submenu_group {
        display: grid;
    }

    .cal_select_coach .image,
    .connect_messages .cm_list .message_item .image,
    .content_multilevel_menu .cm_list .menu_item .image {
        width: 38px;
        height: 38px;
        border-radius: 100px;
        overflow: hidden;
        background-color: var(--color-dim);
    }

    .cal_select_coach .image {
        width: 34px;
        height: 34px;
    }

    .content_multilevel_menu .deal_color {
        width: 6px;
        height: 38px;
        border-radius: 100px;
        background: var(--background-color);
        margin-right: 8px;
    }

    .content_multilevel_menu .dc_0 .deal_color,
    .content_multilevel_menu .menu_group.active > .menu_item .menu_item_wrapper.dc_0,
    .content_multilevel_menu .menu_item:hover .menu_item_wrapper.dc_0,
    .content_multilevel_menu .menu_item.active .menu_item_wrapper.dc_0 {
        background: var(--deal-color-0);
    }

    .content_multilevel_menu .menu_item:hover .menu_item_wrapper.dc_0 .deal_color,
    .content_multilevel_menu .menu_item.active .menu_item_wrapper.dc_0 .deal_color {
        background: var(--background-color);
    }

    .content_multilevel_menu .dc_1 .deal_color,
    .content_multilevel_menu .menu_item:hover .menu_item_wrapper.dc_1,
    .content_multilevel_menu .menu_item.active .menu_item_wrapper.dc_1 {
        background: var(--deal-color-1);
    }

    .content_multilevel_menu .menu_item:hover .menu_item_wrapper.dc_1 .deal_color,
    .content_multilevel_menu .menu_item.active .menu_item_wrapper.dc_1 .deal_color {
        background: var(--background-color);
    }

    .content_multilevel_menu .dc_2 .deal_color,
    .content_multilevel_menu .menu_group.active > .menu_item .menu_item_wrapper.dc_2,
    .content_multilevel_menu .menu_item:hover .menu_item_wrapper.dc_2,
    .content_multilevel_menu .menu_item.active .menu_item_wrapper.dc_2 {
        background: var(--deal-color-2);
    }

    .content_multilevel_menu .menu_item:hover .menu_item_wrapper.dc_2 .deal_color,
    .content_multilevel_menu .menu_item.active .menu_item_wrapper.dc_2 .deal_color {
        background: var(--background-color);
    }

    .content_multilevel_menu .dc_3 .deal_color,
    .content_multilevel_menu .menu_group.active > .menu_item .menu_item_wrapper.dc_3,
    .content_multilevel_menu .menu_item:hover .menu_item_wrapper.dc_3,
    .content_multilevel_menu .menu_item.active .menu_item_wrapper.dc_3 {
        background: var(--deal-color-3);
    }

    .content_multilevel_menu .menu_item:hover .menu_item_wrapper.dc_3 .deal_color,
    .content_multilevel_menu .menu_item.active .menu_item_wrapper.dc_3 .deal_color {
        background: var(--background-color);
    }

    .content_multilevel_menu .dc_4 .deal_color,
    .content_multilevel_menu .menu_group.active > .menu_item .menu_item_wrapper.dc_4,
    .content_multilevel_menu .menu_item:hover .menu_item_wrapper.dc_4,
    .content_multilevel_menu .menu_item.active .menu_item_wrapper.dc_4 {
        background: var(--deal-color-4);
    }

    .content_multilevel_menu .menu_item:hover .menu_item_wrapper.dc_4 .deal_color,
    .content_multilevel_menu .menu_item.active .menu_item_wrapper.dc_4 .deal_color {
        background: var(--background-color);
    }

    .content_multilevel_menu .dc_5 .deal_color,
    .content_multilevel_menu .menu_group.active > .menu_item .menu_item_wrapper.dc_5,
    .content_multilevel_menu .menu_item:hover .menu_item_wrapper.dc_5,
    .content_multilevel_menu .menu_item.active .menu_item_wrapper.dc_5 {
        background: var(--deal-color-5);
    }

    .content_multilevel_menu .menu_item:hover .menu_item_wrapper.dc_5 .deal_color,
    .content_multilevel_menu .menu_item.active .menu_item_wrapper.dc_5 .deal_color {
        background: var(--background-color);
    }

    .content_multilevel_menu .dc_6 .deal_color,
    .content_multilevel_menu .menu_group.active > .menu_item .menu_item_wrapper.dc_6,
    .content_multilevel_menu .menu_item:hover .menu_item_wrapper.dc_6,
    .content_multilevel_menu .menu_item.active .menu_item_wrapper.dc_6 {
        background: var(--deal-color-6);
    }

    .content_multilevel_menu .menu_item:hover .menu_item_wrapper.dc_6 .deal_color,
    .content_multilevel_menu .menu_item.active .menu_item_wrapper.dc_6 .deal_color {
        background: var(--background-color);
    }

    .content_multilevel_menu .dc_7 .deal_color,
    .content_multilevel_menu .menu_group.active > .menu_item .menu_item_wrapper.dc_7,
    .content_multilevel_menu .menu_item:hover .menu_item_wrapper.dc_7,
    .content_multilevel_menu .menu_item.active .menu_item_wrapper.dc_7 {
        background: var(--deal-color-7);
    }

    .content_multilevel_menu .menu_item:hover .menu_item_wrapper.dc_7 .deal_color,
    .content_multilevel_menu .menu_item.active .menu_item_wrapper.dc_7 .deal_color {
        background: var(--background-color);
    }

    .content_multilevel_menu .dc_8 .deal_color,
    .content_multilevel_menu .menu_group.active > .menu_item .menu_item_wrapper.dc_8,
    .content_multilevel_menu .menu_item:hover .menu_item_wrapper.dc_8,
    .content_multilevel_menu .menu_item.active .menu_item_wrapper.dc_8 {
        background: var(--deal-color-8);
    }

    .content_multilevel_menu .menu_item:hover .menu_item_wrapper.dc_8 .deal_color,
    .content_multilevel_menu .menu_item.active .menu_item_wrapper.dc_8 .deal_color {
        background: var(--background-color);
    }

    .content_multilevel_menu .dc_9 .deal_color,
    .content_multilevel_menu .menu_group.active > .menu_item .menu_item_wrapper.dc_9,
    .content_multilevel_menu .menu_item:hover .menu_item_wrapper.dc_9,
    .content_multilevel_menu .menu_item.active .menu_item_wrapper.dc_9 {
        background: var(--deal-color-9);
    }

    .content_multilevel_menu .menu_item:hover .menu_item_wrapper.dc_9 .deal_color,
    .content_multilevel_menu .menu_item.active .menu_item_wrapper.dc_9 .deal_color {
        background: var(--background-color);
    }

    .content_multilevel_menu .menu_group.active > .menu_item .menu_item_wrapper.dc_0 .deal_color,
    .content_multilevel_menu .menu_group.active > .menu_item .menu_item_wrapper.dc_1 .deal_color,
    .content_multilevel_menu .menu_group.active > .menu_item .menu_item_wrapper.dc_2 .deal_color,
    .content_multilevel_menu .menu_group.active > .menu_item .menu_item_wrapper.dc_3 .deal_color,
    .content_multilevel_menu .menu_group.active > .menu_item .menu_item_wrapper.dc_4 .deal_color,
    .content_multilevel_menu .menu_group.active > .menu_item .menu_item_wrapper.dc_5 .deal_color,
    .content_multilevel_menu .menu_group.active > .menu_item .menu_item_wrapper.dc_6 .deal_color,
    .content_multilevel_menu .menu_group.active > .menu_item .menu_item_wrapper.dc_7 .deal_color,
    .content_multilevel_menu .menu_group.active > .menu_item .menu_item_wrapper.dc_8 .deal_color,
    .content_multilevel_menu .menu_group.active > .menu_item .menu_item_wrapper.dc_9 .deal_color {
        background: var(--background-color);
    }

    .connect_messages .cm_list .head,
    .content_multilevel_menu .cm_list .head {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .connect_messages .cm_list .head {
        justify-content: space-between;
    }

    .content_multilevel_menu .cm_list .menu_item .head .icon {
        margin-right: 8px;
        width: 20px;
    }

    .content_multilevel_menu .cm_list .menu_item .head .icon.add_coach_icon {
        width: 40px;
        background: var(--background-color);
        color: var(--label-color);
        padding: 9px;
        border-radius: 40px;
        margin-right: 12px;
    }

    .content_multilevel_menu .cm_list .menu_item .head .icon.erafit_icon {
        border-radius: 4px;
        overflow: hidden;
        color: var(--label-color);
        background: var(--background-color);
        padding: 4px;
    }

    .connect_messages .cm_list .user_name,
    .content_multilevel_menu .cm_list .title {
        text-align: left;
        font-weight: bold;
        line-height: 1.2;
    }

    .content_multilevel_menu .cm_list .loading_label {
        text-align: left;
        font-weight: bold;
        line-height: 1.2;
        font-size: 13px;
        color: var(--label-dim-color);
    }

    .connect_messages .cm_list .date,
    .content_multilevel_menu .cm_list .date {
        font-size: 12px;
        color: var(--label-dim-color);
    }

    .connect_messages .cm_list .message_container,
    .content_multilevel_menu .cm_list .menu_content {
        flex: 1;
        padding: 0 8px;
    }

    .connect_messages .cm_list .message_item .icon,
    .content_multilevel_menu .cm_list .menu_item .icon {
        width: 12px;
        font-size: 0;
        background: transparent;
        align-self: center;
        color: inherit;
    }
    .connect_messages .cm_list .message_item .icon.loading_icon,
    .content_multilevel_menu .cm_list .menu_item .icon.loading_icon{
        width: 20px;
    }

    .content_multilevel_menu .cm_list .menu_item .icon.icon_cart {
        padding: 4px;
        width: 20px;
        margin-right: 8px;
        background: var(--background-color);
        border-radius: 4px;
    }

    .connect_messages .cm_list .message_preview,
    .content_multilevel_menu .cm_list .menu_description {
        font-size: 12px;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        color: var(--label-dim-color);
    }

    .content_multilevel_menu .cm_list .menu_description.tasks {
        color: var(--label-color);
        font-weight: bold;
    }

    .content_multilevel_menu .cm_list_container {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: stretch;
        margin: 16px;
    }

    .content_multilevel_menu .cm_list_container .cm_list {
        margin: 0;
        width: 100%;
    }

    .content_multilevel_menu .cm_search {
        margin-bottom: 8px;
        background: var(--foreground-color);
        width: 100%;
        padding: 8px;
        border-radius: 6px;
    }

    .ellipsis {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: inherit;
    }


    .connect_messages .cm_chat_container,
    .content_multilevel_menu .cm_active_content_container {
        position: absolute;
        background: transparent;
        width: 100%;
        height: 100%;
        right: -100%;
        margin: 0;
        border-radius: 0px;
        background: var(--foreground-color);
        overflow: hidden;
        transition: right 0.4s ease,
            height 0.4s ease,
            border-radius 0.4s ease;
        will-change: right, height, margin;
    }

    .connect_messages.open .cm_chat_container,
    .content_multilevel_menu.open .cm_active_content_container {
        right: 0%;
        transition: right 0.4s ease;
        will-change: right;
        border-left: 1px solid var(--background-color);
    }

    .connect_messages .cm_chat,
    .content_multilevel_menu .cm_active_content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: space-between;
    }

    .connect_messages .cm_chat .head,
    .content_multilevel_menu .cm_active_content .head {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding: 8px;
        border-bottom: 1px solid var(--background-color);
    }

    .content_multilevel_menu .cm_active_content .head .icon {
        width: 14px;
        padding: 0px;
        font-size: 0;
        height: 14px;
        /* background: var(--background-color); */
        color: var(--color-white);
        border-radius: 6px;
        margin: 0;
    }

    .content_multilevel_menu .cm_active_content .dropdown_custom .button_menu .icon,
    .dropdown_custom .icon {
        color: var(--label-color);
    }

    .content_multilevel_menu .cm_active_content .head .button_menu .icon {
        background: var(--background-color);
    }

    .content_multilevel_menu .cm_active_content .head .text {
        padding-left: 8px;
    }

    .content_multilevel_menu .cm_active_content .head .button_label {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 0px 8px;
    }

    .content_multilevel_menu .cm_active_content .head button {
        margin-right: 8px;
    }

    .content_multilevel_menu .cm_active_content .head button:last-child {
        margin: 0px;
    }

    .content_multilevel_menu .cm_active_content .head .deal_color {
        margin: 0px 8px;
    }

    .connect_messages .cm_chat .head .button,
    .content_multilevel_menu .cm_active_content .head .button {
        width: 32px;
        font-size: 0;
        padding: 8px;
    }

    .connect_messages .cm_chat .head .profile {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        margin: 0 8px;
    }

    .content_multilevel_menu .cm_active_content .icon.thumb {
        width: 38px;
        height: 38px;
        background: var(--background-color);
        color: var(--label-color);
        border-radius: 6px;
        font-size: 0;
    }

    .content_multilevel_menu .cm_active_content .thumb .thumb_image {
        width: 38px;
        height: 38px;
        border-radius: 100px;
        overflow: hidden;
        background: var(--color-img-background);
    }

    .content_multilevel_menu .cm_active_content .thumb .thumb_icon {
        width: 38px;
        height: 38px;
        padding: 8px;
        background-color: red;
        border-radius: 6px;
        background: var(--background-color);
    }

    .content_multilevel_menu .cm_active_content .head .profile {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        margin: 0 8px;
        flex: 1;
    }

    .connect_messages .cm_chat .head .profile .image,
    .content_multilevel_menu .cm_active_content .head .profile .image {
        border-radius: 100px;
        overflow: hidden;
        width: 34px;
        height: 34px;
    }

    .connect_messages .cm_chat .head .profile .user_name,
    .content_multilevel_menu .cm_active_content .head .profile .user_name {
        margin-left: 8px;
        font-weight: bold;
    }

    .connect_messages .cm_chat .footer,
    .content_multilevel_menu .cm_active_content .footer {
        background: transparent;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 8px;
        border-top: 1px solid var(--background-color);
    }

    .connect_messages .cm_chat .footer .input_group,
    .content_multilevel_menu .cm_active_content .footer .input_group {
        flex: 1;
        height: 34px;
        border-radius: 100px;
        padding: 6px;
        margin: 0 8px;
        background: var(--background-color);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .connect_messages .cm_chat .footer .input_group input:focus,
    .content_multilevel_menu .cm_active_content .footer .input_group input:focus {
        outline: none;
    }

    .connect_messages .cm_chat .footer .input_group input,
    .content_multilevel_menu .cm_active_content .footer .input_group input {
        flex: 1;
        height: 100%;
        border-radius: 100px;
        border: none;
        background: transparent;
        color: var(--label-color);
        padding: 0 8px;
    }

    .connect_messages .cm_chat .footer .button,
    .content_multilevel_menu .cm_active_content .footer .button {
        width: 24px;
        height: 24px;
        background: var(--color-blue);
        border-radius: 100px;
        padding: 6px;
        font-size: 0;
        cursor: pointer;
    }

    .connect_messages .cm_chat .footer .button:hover,
    .content_multilevel_menu .cm_active_content .footer .button:hover {
        background: var(--color-blue-hover);
    }

    .connect_messages .cm_chat .footer .button .icon,
    .content_multilevel_menu .cm_active_content .footer .button .icon {
        background: inherit;
    }

    .connect_messages .cm_chat .content,
    .content_multilevel_menu .cm_active_content .content {
        position: relative;
        padding: 0 16px;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        border-left:2px solid var(--foreground-color);
        border-right:2px solid var(--foreground-color);
        border-bottom:2px solid var(--foreground-color);
        border-radius: 0 0 6px 6px;
    }

    .content_multilevel_menu .cm_active_content .content_body {
        padding: 16px 0;
        text-align: left;
    }

    .content_multilevel_menu .cm_active_content .content_body.no_pad {
        padding: 0;
        text-align: left;
    }

    .content_multilevel_menu .cm_active_content .content_header {
        padding: 16px 0;
        text-align: left;
    }

    .content_multilevel_menu .cm_active_content .content_body_cart,
    .content_multilevel_menu .cm_active_content .content_body_deals,
    .content_multilevel_menu .cm_active_content .content_body_eval,
    .content_multilevel_menu .cm_active_content .content_my_account {
        display: none;
    }

    .content_multilevel_menu .cm_active_content .content_body_cart.active,
    .content_multilevel_menu .cm_active_content .content_body_deals.active,
    .content_multilevel_menu .cm_active_content .content_body_eval.active,
    .content_multilevel_menu .cm_active_content .content_my_account.active {
        display: grid;
    }

    .content_multilevel_menu .cm_active_content .video_wrapper {
        position: relative;
        padding-bottom: 56.25%;
        /* 16:9 */
        height: 0;
        margin-bottom: 16px;
    }

    .content_multilevel_menu .cm_active_content .video_wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .content_multilevel_menu .cm_active_content article h2 {
        font-size: 20px;
        text-transform: none;
        margin-bottom: 16px;
    }

    .content_multilevel_menu .cm_active_content article p {
        font-size: 12px;
        text-transform: none;
    }

    .content_multilevel_menu .cm_active_content article ul {
        font-size: 12px;
        text-transform: none;
        list-style-position: inside;
    }

    .connect_messages .cm_chat .msg_loading,
    .content_multilevel_menu .cm_active_content .content_loading {
        flex: 1;
    }

    .connect_messages .cm_chat .msg_group_day,
    .content_multilevel_menu .cm_active_content .msg_group_day {
        font-size: 10px;
        text-transform: uppercase;
        user-select: none;
        margin: 4px 0;
    }

    .connect_messages .cm_chat .msg_in,
    .connect_messages .cm_chat .msg_out,
    .content_multilevel_menu .cm_active_content .msg_in,
    .content_multilevel_menu .cm_active_content .msg_out {
        margin: 4px 0;
    }

    .connect_messages .cm_chat .msg_in p,
    .connect_messages .cm_chat .msg_out p,
    .content_multilevel_menu .cm_active_content .msg_in p,
    .content_multilevel_menu .cm_active_content .msg_out p {
        font-size: 13px;
        text-align: left;
    }

    .connect_messages .cm_chat .msg_out p,
    .content_multilevel_menu .cm_active_content .msg_out p {
        color: var(--color-white);
    }

    .connect_messages .cm_chat .msg_in small,
    .connect_messages .cm_chat .msg_out small,
    .content_multilevel_menu .cm_active_content .msg_in small,
    .content_multilevel_menu .cm_active_content .msg_out small {
        display: block;
        font-size: 10px;
        color: var(--label-dim-color);
        margin-top: 4px;
    }

    .connect_messages .cm_chat .msg_in,
    .content_multilevel_menu .cm_active_content .msg_in {
        padding: 8px;
        text-align: left;
    }

    .connect_messages .cm_chat .msg_out,
    .content_multilevel_menu .cm_active_content .msg_out {
        padding: 8px;
        text-align: right;
    }

    .connect_messages .cm_chat .msg_out .msg_bubble,
    .connect_messages .cm_chat .msg_in .msg_bubble,
    .content_multilevel_menu .cm_active_content .msg_out .msg_bubble,
    .content_multilevel_menu .cm_active_content .msg_in .msg_bubble {
        border-radius: 6px;
        min-width: 64px;
        max-width: 60%;
        display: inline-block;
        padding: 8px;
    }

    .connect_messages .cm_chat .msg_in .msg_bubble,
    .content_multilevel_menu .cm_active_content .msg_in .msg_bubble {
        background: var(--background-color);
    }

    .connect_messages .cm_chat .msg_out .msg_bubble,
    .content_multilevel_menu .cm_active_content .msg_out .msg_bubble {
        background: var(--active-color);
    }

    .content_prompt {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        display: none;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        z-index: 100;
        background: var(--content-prompt-bg);
    }

    .content_prompt.active {
        display: flex;
    }

    .content_prompt .loading_icon {
        width: 60px;
    }

    .menu_task {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
    }

    .menu_task .thumb,
    .content_multilevel_menu .cm_active_content .thumb {
        position: relative;
        margin-right: 8px;
    }

    .menu_task .image {
        background: var(--color-img-background);
        margin-right: 8px;
    }

    .content_multilevel_menu .cm_active_content .thumb .image {
        background: var(--color-img-background);
        border-radius: 100px;
        overflow: hidden;
        width: 38px;
        height: 38px;

    }

    .cal_select_coach .icon_badge,
    .menu_task .icon_badge,
    .content_multilevel_menu .cm_active_content .thumb .icon_badge {
        position: absolute;
        bottom: -8px;
        right: 4px;
        width: 20px;
        font-size: 0;
        background: var(--background-color);
        padding: 4px;
        border-radius: 40px;
        border: 1px solid var(--foreground-color);
        color: var(--color-white);
    }

    .cal_select_coach .icon_badge {
        padding: 5px;
    }

    .cal_select_coach:hover .icon_badge {
        background: var(--active-color);
    }

    .cal_select_coach .icon_badge,
    .content_multilevel_menu .cm_active_content .thumb .icon_badge {
        bottom: -4px;
        right: -3px;
    }

    .menu_task .icon_badge.dc_2,
    .content_multilevel_menu .cm_active_content .thumb .icon_badge.dc_2 {
        background: var(--deal-color-2);
    }

    .menu_task .icon_badge.dc_1,
    .content_multilevel_menu .cm_active_content .thumb .icon_badge.dc_1 {
        background: var(--deal-color-1);
    }

    .menu_task .icon_badge.dc_9,
    .content_multilevel_menu .cm_active_content .thumb .icon_badge.dc_9,
    .content_multilevel_menu .cm_active_content .thumb.icon_badge.dc_9 {
        background: var(--deal-color-9);
    }

    .content_multilevel_menu .cm_list .menu_item .menu_task .icon {
        background: var(--background-color);
        width: 24px;
        margin-right: 8px;
        padding: 5px;
        border-radius: 4px;
    }

    .content_multilevel_menu .cm_list .menu_item .menu_task .icon.open {
        color: var(--label-color);
    }

    .menu_task_content {
        flex: 1;
        line-height: 1.2;
    }

    .menu_task_content h3 {
        font-size: 14px;
        margin: 0;
    }

    .menu_task_content small {
        font-size: 10px;
        color: var(--label-dim-color);
        text-transform: uppercase;
    }

    .menu_task_content p {
        font-size: 12px;
        padding-right: 16px;
    }

    .menu_task_data{
        line-height: 1.5;
        font-size: 11px;
    }

    .menu_task_info {
        width: 50px;
        text-align: right;
    }

    .menu_task_info .status {
        font-size: 9px;
        text-transform: uppercase;
    }

    .menu_task_info .sub_title {
        font-size: 9px;
        color: var(--label-dim-color);
    }

    footer {
        position: relative;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 60px;
        /* background: rgb(255,255,255);
        background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(221,221,221,1) 100%); OLD layout */
        background: var(--foreground-color);
        color: var(--label-offset-color);
        z-index: 3;
        padding: 0 4px;
    }

    footer ul {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0;
        margin: 0;
        list-style: none;
        border-top: 1px solid var(--border-color);
    }

    footer ul li {
        position: relative;
        width: 20%;
        /* color:#666; Old layout */
        color: inherit;
        margin: 0 4px;
        height: 60px;
    }

    footer ul li .badge {
        position: absolute;
        min-width: 20px;
        height: 20px;
        background-color: var(--color-red);
        font-size: 11px;
        font-weight: bold;
        border-radius: 40px;
        right: -6px;
        top: -5px;
        padding: 2px;
        text-align: center;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        color: var(--color-white);
        border: 1px solid var(--foreground-color);
    }

    footer .tab_icon,
    footer .tab_img {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        height: inherit;
    }

    footer .tab_icon {
        color: var(--label-dim-color);
    }

    footer .tab_icon.active,
    footer .tab_img.active {
        position: absolute;
        top: -16px;
        /* background: rgb(255,255,255);
        background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 35%, rgba(255,255,255,0) 100%); OLD Layout*/
        background: var(--foreground-color);
        width: 100%;
        padding: 8px;
        /* color:#38393b; OLD Layout*/
        color: inherit;
        border-radius: 8px 8px 0px 0px;
        -webkit-box-shadow: 0px 0px 10px -3px #000000;
        box-shadow: 0px 0px 10px -3px #000000;
    }

    footer .tab_icon.active:after,
    footer .tab_img.active:after {
        content: "";
        height: 16px;
        width: 100%;
        /* background: rgb(230,230,230);
        background: linear-gradient(180deg, rgba(230,230,230,1) 0%, rgba(221,221,221,1) 100%); OLD Layout */
        background: var(--foreground-color);
        position: absolute;
        bottom: -16px;
        left: 0;
        width: 100%;
        height: 16px;
    }

    footer .tab_icon .icon_container {
        position: relative;
    }

    footer .tab_icon svg {
        width: 24px;
    }

    footer .tab_img .image {
        width: 40px;
        height: 40px;
        border-radius: 100px;
        overflow: hidden;
    }

    nav .header.dashboard .notifications {
        position: relative;
        width: 32px;
        margin-right: 16px;
        cursor: pointer;
    }

    nav .header.dashboard .notifications .icon {
        width: 32px;
        height: 32px;
        padding: 4px;
    }

    nav .header.dashboard .notifications .badge {
        position: absolute;
        min-width: 20px;
        height: 20px;
        background-color: var(--color-red);
        font-size: 11px;
        font-weight: bold;
        border-radius: 40px;
        right: -1px;
        top: -1px;
        padding: 2px;
        text-align: center;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        color: var(--color-white);
        border: 1px solid var(--nav-background);
    }

    .notification_container {
        position: fixed;
        width: 100%;
        max-width: 420px;
        height: 100%;
        top: 0;
        left: auto;
        bottom: 0;
        right: -420px;
        background: var(--modal-background);
        z-index: 1000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        transition: right 0.4s ease;
        will-change: right;
    }

    .notification_container.open {
        right: 0px;
        transition: right 0.4s ease-out;
        will-change: right;
    }

    .notification_header {
        width: inherit;
        padding: 8px 16px;
        background: var(--foreground-color);
        text-align: left;
        height: 50px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        border-bottom: 1px solid var(--background-color);
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        scroll-snap-align: start;
    }

    .ntf_header_icon {
        width: 24px;
        font-size: 0;
        padding: 4px;
    }

    .ntf_header_title {
        flex: 1;
        padding: 0px 8px;
    }

    .ntf_header_title h2 {
        font-weight: bold;
    }

    .ntf_dismiss:hover {
        background-color: var(--active-color);
        border-radius: 4px;
        cursor: pointer;
    }

    .notification_body {
        width: inherit;
        flex: 1;
        text-align: left;
        padding: 0px 8px;
        margin: 8px 0px;
    }

    .notification_footer {
        width: inherit;
        padding: 8px 16px;

        background: var(--modal-background);
        text-align: left;
    }

    .notification_item {
        background: var(--foreground-color);
        border-radius: 6px;
        padding: 12px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        scroll-snap-align: start;
        margin: 8px 0px;
    }

    .notification_body .notification_item:last-child {
        scroll-snap-align: end;
        margin-bottom: 0;
    }

    .notification_badge {
        position: relative;
        width: 32px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .ntf_mini_badge {
        position: absolute;
        right: -6px;
        bottom: -6px;
        width: 18px;
        height: 18px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        border-radius: 26px;
        border: 1px solid var(--foreground-color);
    }

    .ntf_mini_badge svg {
        width: 10px;
        font-size: 0;
    }

    .notification_badge_container {
        width: 32px;
        height: 32px;
    }

    .notification_badge_container.ntf_icon {
        padding: 6px;
        border-radius: 4px;
    }

    .notification_badge_container.ntf_image {
        border-radius: 100px;
        overflow: hidden;
        background: var(--color-img-background);
    }

    .notification_content {
        flex: 1;
        padding: 0 12px;
    }

    .notification_content h3 {
        margin: 0;
    }

    .notification_content p {
        margin: 0;
        font-size: 12px;
        line-height: 1.3;
        color: var(--ntf-text);
    }

    .notification_info {
        width: 50px;
        align-self: flex-start;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .notification_info .timestamp {
        display: inline-block;
        white-space: nowrap;
        font-size: 10px;
        color: var(--label-dim-color);
        text-align: right;
        width: 100%;
    }

    .ntf_bg_blue {
        background: var(--ntf-blue);
        color: var(--color-white);
    }

    .ntf_bg_green {
        background: var(--ntf-green);
        color: var(--color-white);
    }

    .modal {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: var(--modal-background);
        z-index: 1000;
        visibility: hidden;
        opacity: 0;
        transition: visibility 0.5s, opacity 0.4s ease;
        will-change: opacity;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    .modal.open {
        visibility: visible;
        opacity: 1;
        transition: visibility 0s, opacity 0.4s ease;
        will-change: opacity;
    }

    .modal_window {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* justify-content:center; */
        height: 100%;
        padding: 8px;
    }

    .modal_container {
        margin: auto;
        flex-shrink: 1;
        flex-basis: auto;
        background: var(--foreground-color);
        width: 100%;
        max-width: 512px;
        border-radius: 8px;
    }

    .modal_container.modal_container_wide {
        max-width: 840px;
    }

    .modal_container.modal_prompt {
        max-width: 320px;
    }

    .modal_container.modal_loading {
        width: 150px;
        text-transform: uppercase;
        font-size: 13px;
    }

    .modal_header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--modal-border);
    }

    .modal_header h2 {
        font-size: 12px;
        text-transform: uppercase;
        padding: 0px 16px;
        font-weight: bold;
    }

    .modal_close {
        width: 40px;
        padding: 12px;
        font-size: 0;
        background: transparent;
        border: none;
        color: var(--label-dim-color);
        cursor: pointer;
    }

    .modal_close:hover {
        color: var(--label-color);
    }

    .modal_body {
        padding: 8px 16px 16px 16px;
        text-align: left;
    }

    .modal_body.pad_16{
        padding: 16px;
    }

    .modal_body_p16 {
        padding: 16px;
    }

    .modal_body.deal_task_body {
        padding: 8px 16px;
    }

    .deal_activity {
        padding: 16px;
    }

    .deal_task_body.open .deal_task_call {
        display: none;
    }

    .deal_task_body.open .deal_new_task_container {
        display: block;
    }

    .deal_activity_header {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        background: var(--background-color);
        padding: 8px;
        border-radius: 6px;
    }

    .deal_activity_header .info {
        line-height: 1.1;
    }

    .deal_activity_header h3,
    .deal_activity_header small {
        margin: 0;
    }

    .deal_activity_item {
        padding: 8px 16px;
    }

    .deal_activity_items {
        margin-top: 16px;
    }

    .deal_activity_item {
        position: relative;
        border-left: 1px dotted var(--label-color);
    }

    .deal_activity_item:before {
        content: "";
        position: absolute;
        width: 8px;
        height: 8px;
        top: 50%;
        left: -4px;
        margin-top: -4px;
        background: var(--label-color);
        border-radius: 16px;

    }

    .deal_activity_item .action {
        text-transform: uppercase;
        font-size: 11px;
        color: var(--label-dim-color);
    }

    .deal_activity_item .timestamp {
        font-size: 10px;
        color: var(--label-dim-color);
    }

    .deal_activity_item h4 {
        font-size: 13px;
        font-weight: bold;
    }

    .modal_body p {
        font-weight: 600;
        font-size: 14px;
    }

    .modal_body small {
        font-size: 12px;
        color: var(--label-dim-color);
    }

    .modal_prompt_content p {
        font-size: 14px;
    }

    .modal_container.modal_prompt .modal_body {
        padding: 16px;
    }

    .modal_body p {
        font-size: 13px;
    }

    .modal_body h3 {
        font-size: 16px;
    }

    .modal_body p.warning {
        font-size: 16px;
        padding: 8px;
        border-radius: 6px;
        background: var(--background-color);
    }

    .modal_container.modal_prompt .modal_content h3 {
        font-size: 14px;
        margin: 0;
        padding-bottom: 8px;
        font-weight: normal;
        text-align: center;
    }

    .modal_container.modal_prompt .modal_content p {
        font-size: 13px;
        font-weight: normal;
        text-align: center;
    }

    .modal_form_return_msg {
        padding: 0px 16px;
        margin-bottom: 16px;
    }

    .modal_form_return_msg_container {
        background-color: transparent;
        border: 1px solid var(--foreground-offset-color);
        color: var(--label-color);
        padding: 8px;
        font-size: 12px;
        font-weight: bold;
        border-radius: 6px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .modal_form_return_msg_container .modal_form_return_icon.error,
    .modal_form_return_msg_container .modal_form_return_icon.success,
    .modal_form_return_msg_container .modal_form_return_icon.info {
        display: none;
    }

    .modal_form_return_msg_container.error {
        background-color: var(--form-validation-error);
        border-color: var(--form-validation-error);
        color: var(--color-white);
    }

    .modal_form_return_msg_container.error .modal_form_return_icon.error {
        display: block;
    }

    .modal_form_return_msg_container.success {
        background-color: var(--form-validation-success);
        border-color: var(--form-validation-success);
        color: var(--color-white);
    }

    .modal_form_return_msg_container.success .modal_form_return_icon.success {
        display: block;
    }

    .modal_form_return_msg_container.info {
        color: var(--label-dim-color);
        font-weight: normal;
    }

    .modal_form_return_msg_container.info .modal_form_return_icon.info {
        display: block;
    }

    .modal_form_return_text {
        flex: 1;
        text-align: left;
        padding-right: 8px;
    }

    .modal_form_return_icon {
        width: 10px;
        font-size: 0;
    }

    .pseudo_footer {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 8px 0px;
    }

    .form_button_group{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    .form_button_group button{
        flex:1;
    }


    .modal_footer {
        border-top: 1px solid var(--modal-border);
        padding: 16px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .modal_footer.modal_footer_col{
        flex-direction: column;
        gap: 8px;
    }

    .pseudo_footer .button,
    .modal_footer .button_link,
    .modal_footer .button {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background: var(--active-color);
        color: #fff;
        height: 38px;
        min-width: 38px;
        border: none;
        padding: 0px 8px;
        font-weight: bold;
        border-radius: 6px;
        width: 100%;
        font-size: 13px;
        text-decoration: none;
    }
    .modal_footer.modal_footer_col .button{
        padding: 0;
        margin-right: 0;
    }
    .modal_footer.modal_footer_col .button:first-child{
        margin-right: 0;
    }

    .pseudo_footer .button:hover,
    .modal_footer .button:hover {
        background: var(--button-background-hover);
    }

    .button.btn_danger,
    .pseudo_footer .button.btn_danger,
    .modal_footer .button.btn_danger {
        background: var(--color-red);
    }

    .pseudo_footer .button.btn_danger:hover,
    .modal_footer .button.btn_danger:hover {
        background: var(--color-red-hover);
    }

    .pseudo_footer .button.btn_dim,
    .modal_footer .button.btn_dim {
        background: var(--color-dim);
    }

    .pseudo_footer .button.btn_dim:hover,
    .modal_footer .button.btn_dim:hover {
        background: var(--color-dim-hover);
    }

    .button.btn_background,
    .button_el.btn_background,
    .pseudo_footer .button.btn_background,
    .modal_footer .button.btn_background {
        background: var(--background-color);
    }

    .btn_appointment{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
        gap: 8px;
    }
    .btn_appointment span{
        display: block;
    }
    .btn_appointment .icon{
        width: 24px;
    }
    .btn_appointment .label{
        width: 151gitpx;
    }
    .button.btn_appointment{
        background: var(--background-color);
        border:1px solid var(--background-color);
    }
    .button.btn_appointment:hover{
        background: var(--background-color);
        border-color:var(--color-blue);
    }

    .deal_task_call {
        color: var(--label-color);
    }

    .deal_task_call:hover {
        color: var(--color-white);
    }

    .button.btn_active,
    .button_el.btn_active,
    .button.btn_background:hover,
    .button_el.btn_background:hover,
    .pseudo_footer .button.btn_background:hover,
    .modal_footer .button.btn_background:hover {
        background: var(--active-color);
        color: var(--color-white);
    }

    .button.btn_active,
    .pseudo_footer .button.btn_active,
    .modal_footer .button.btn_active {
        background: var(--active-color);
    }

    .button_el.btn_active:hover,
    .button.btn_active:hover {
        background: var(--color-blue-hover);
        color: var(--color-white);
    }

    .button.btn_active:hover,
    .pseudo_footer .button.btn_active:hover,
    .modal_footer .button.btn_active:hover {
        background: var(--color-blue-hover);
    }

    .button.btn_success,
    .pseudo_footer .button.btn_success,
    .modal_body_footer .button.btn_success,
    .modal_footer .button.btn_success {
        background: var(--task-action-bg-green);
    }

    .button.btn_success:hover,
    .pseudo_footer .button.btn_success:hover,
    .modal_body_footer .button.btn_success:hover,
    .modal_footer .button.btn_success:hover {
        background:var(--task-action-bg-green-hover);
    }

    .button.await_js{
        opacity: 0.5;
        pointer-events: none;
        touch-action: none;
        cursor: wait;
    }
    .button.hidden{
        display: none;
    }

    .modal_footer .button:first-child {
        margin-right: 8px;
    }

    .modal_footer .button:only-child {
        margin-right: 0px;
    }

    .modal_loading .modal_body {
        padding: 16px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .modal_loading .loading_icon{
        width: 60px;
        font-size: 0;
    }
    .modal_loading .loading_text{
        padding-top: 16px;
    }

    /*  */
    .input_group {
        width: 100%;
    }

    .input_group input[type="text"],
    .input_group input[type="password"],
    .input_group input[type="file"],
    .input_group input[type="time"] {
        width: inherit;
        height: inherit;
        border-radius: 6px;
        background: var(--background-color);
        border: none;
        color: var(--label-offset-color);
        font-size: 14px;
        padding: 14px;
        width: 100%;
        height: 38px;
    }

    .input_password_group{
        position: relative;
    }
    .input_password_group .password_reveal{
        position: absolute;
        right:0;
        top:0;
        cursor: pointer;
        height: 100%;
        font-size: 0;
        width: 40px;
        padding: 0 10px;
        background-color: var(--background-color);
        color: var(--label-dim-color);
        border-radius: 6px;
        border:none;
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:center;
    }
    .input_password_group .password_reveal:hover{
        color: var(--active-color);
    }
    .input_password_group .password_reveal.active{
        color:var(--label-color);
    }

    .input_group {
        width: 100%;
    }

    .input_group input[type="text"] {
        width: inherit;
        height: inherit;
        border-radius: 6px;
        background: var(--background-color);
        border: none;
        color: var(--label-offset-color);
        font-size: 14px;
        padding: 14px;
        width: 100%;
        height: 38px;
    }

    input:focus-visible, 
    button:focus-visible {
        outline: 2px solid var(--active-color);
        border-color: transparent;
    }

    .input_group.input_fg input {
        background: var(--foreground-color);
    }

    .input_group_cc{
        position:relative;
    }
    .input_group_cc .cc-type{
        position: absolute;
        height: 36px;
        width: 36px;
        top: 1px;
        right: 6px;
        font-size: 0;
        color:var(--label-dim-color);
    }
    .input_group_cc .cc-type div{
        display:none;
    }
    .input_group_cc .cc-type div.active{
        display:block;
    }

    .input_group_radio,
    .input_block {
        width: inherit;
        height: inherit;
        border-radius: 6px;
        background: var(--background-color);
        border: none;
        color: var(--label-offset-color);
        font-size: 14px;
        /* padding: 14px; */
        width: 100%;
        min-height: 38px;
        padding: 7px 14px;
    }

    .input_group_radio .text,
    .input_group_radio .action,
    .input_block .text,
    .input_block .action {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        min-height: 100%;
        height: inherit;
        padding: 7px 0;
    }

    .input_group_radio .action {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        min-height: 100%;
        height: inherit;
    }

    .input_group_radio .action label {
        margin-left: 8px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        cursor: pointer;
    }

    .input_group_radio input {
        width: 0px;
        height: 0px;
        background: transparent;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;

    }

    .input_group_radio .action label .pseudo_radio {
        position: relative;
        width: 14px;
        height: 14px;
        border: 2px solid var(--label-dim-color);
        border-radius: 50px;
        margin: 0 4px;
    }

    .input_group_radio .action label input:checked~.pseudo_radio {
        border: 2px solid var(--active-color);
        background: var(--color-white);
    }

    .input_group_radio .action label input:checked~.pseudo_radio:after {
        position: absolute;
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50px;
        background: var(--active-color);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .input_group_radio .action label:hover .pseudo_radio {
        border: 2px solid var(--label-color);
    }

    .input_group.input_checkbox label input {
        width: 0;
        height: 0;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
    }

    .input_group.input_checkbox label {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        cursor: pointer;
    }

    .input_group.input_checkbox label .pseudo_checkbox {
        position: relative;
        width: 16px;
        height: 16px;
        border-radius: 4px;
        border: 2px solid var(--label-dim-color);
    }

    .input_group.input_checkbox label .label {
        color: var(--label-dim-color);
        font-size: 13px;
        margin: 0 8px;
    }

    .input_group.input_checkbox label:hover .pseudo_checkbox {
        border-color: var(--color-white);
    }

    .input_group.input_checkbox .label:hover input:checked~.pseudo_checkbox,
    .input_group.input_checkbox input:checked~.pseudo_checkbox {
        background: var(--color-white);
        border-color: var(--active-color);
    }

    .input_group.input_checkbox input:checked~.pseudo_checkbox:after {
        position: absolute;
        content: "";
        background: var(--active-color);
        width: 8px;
        height: 8px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .input_group.input_checkbox label:hover .label,
    .input_group.input_checkbox input:checked~.label {
        color: var(--color-white);
    }

    .input_group.input_group_order {
        width: 50px;
        text-align: center;
    }

    .input_group h3 {
        font-size: 13px;
        padding: 4px;
        margin: 0;
    }

    .input_group input[type=file] {
        padding: 8px;
    }

    .input_group.input_cart_quantity {
        width: 50%;
    }

    .input_group.input_cart_quantity input {
        background: var(--foreground-color);
    }

    .input_group input[disable],
    .input_group input[readonly] {
        background: transparent;
        background: var(--background-color);
        color: var(--label-dim-color);
        cursor: not-allowed;
        pointer-events: none;
        touch-action: none;
        opacity: 0.5;
    }
    .input_group input[name*="address_city"][readonly],
    .input_group input[name*="address_state"][readonly],
    .input_group input[name*="address_country"][readonly],
    .input_group input[name*="address_zipcode"][readonly] {
        color: var(--label-color);
    }

    .input_group textarea {
        width: inherit;
        min-height: 240px;
        border-radius: 6px;
        background: var(--background-color);
        border: none;
        color: var(--label-offset-color);
        font-size: 14px;
        padding: 14px;
        font-family: inherit;
    }

    .input_group label {
        display: inline-block;
        padding: 0px 4px 4px 4px;
        font-size: 11px;
        color: var(--label-offset-color);
    }

    .input_group small {
        display: block;
        font-size: 10px;
        color: var(--label-dim-color);
        margin-top: 4px;
    }

    .input_profile_picture {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 24px 0 16px 0;
    }

    .input_profile_upload_group {
        position: relative;
    }

    .input_profile_upload_group .image {
        width: 90px;
        height: 90px;
        border-radius: 100px;
        overflow: hidden;
        background: var(--color-img-background);
    }

    .input_profile_upload_group .action {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 32px;
        height: 32px;
    }

    .input_profile_upload_group .action input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .input_profile_upload_group .action label {
        display: block;
        width: 100%;
        height: 100%;
        background: var(--background-color);
        color: var(--label-color);
        border-radius: 100px;
        /* border:1px solid var(--background-color); */
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .input_profile_upload_group .profile_upload_button {
        position: absolute;
        bottom: 0;
        display: block;
        margin: 2px;
        width: 28px;
        height: 28px;
        padding: 0 8px;
        font-size: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        border-radius: 100px;
        cursor: pointer;
    }

    .input_profile_upload_group .action label:hover .profile_upload_button {
        background: var(--active-color);
        color: var(--label-color);
    }

    .input_group.error input {
        border-color: var(--form-validation-error);
    }

    .input_group.error .input_validation_error {
        margin: 0;
        padding: 0;
        list-style: none;
        background: var(--form-validation-error);
        color: var(--color-white);
        padding: 8px;
        font-size: 10px;
        border-radius: 6px;
        margin-top: 4px;
        text-transform: uppercase;
        font-weight: bold;
    }

    .input_group.error .input_validation_error.green {
        background: var(--form-validation-green);
    }
    .input_group.error .input_validation_error.blue {
        background: var(--form-validation-blue);
    }
    .input_group.error .input_validation_error.orange {
        background: var(--form-validation-orange);
    }
    .input_group.error .input_validation_error.purple {
        background: var(--form-validation-purple);
    }

    .input_group.error .input_validation_error small{
        margin:0;
        display:block;
        color:white;
        opacity:0.7;
    }

    .title_app h1 {
        font-size: 14px;
    }

    .client_application_wrapper {
        width: 100%;
        max-width: 640px;
    }

    .client_application_body {
        width: 100%;
        max-width: 640px;
        background: var(--foreground-color);
        border-radius: 8px;
        border: 1px solid var(--foreground-color);
        margin-bottom: 60px;
    }

    .client_application_header,
    .client_application_footer {
        padding: 16px;
        text-align: left;
    }

    .client_application_header {
        border-bottom: 1px solid var(--modal-border);
    }

    .client_application_footer {
        border-top: 1px solid var(--modal-border);
    }

    .client_application_content {
        font-size: 14px;
        text-align: left;
    }

    .client_application_content h3 {
        color: var(--label-offset-color);
        margin: 0;
    }

    .client_application_content p {
        font-size: 11px;
        font-weight:bold;
    }

    .client_application_content p.client_application_step_price {
        font-size: 20px;
        padding-top: 4px;
    }

    .client_application_contract p {
        margin-bottom: 8px;
    }

    .client_application_review h4 {
        margin: 8px 0;
        font-weight: bold;
        text-transform: uppercase;
        color:var(--label-dim-color);
    }

    .client_application_pay_subscription {
        margin-top: 16px;
        width: 100%;
        height: calc(100% - 16px);
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: stretch;
    }

    .steps_header {
        padding: 16px;
        border-top: 1px solid var(--modal-border);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .steps_header h3 {
        font-size: 11px;
        font-weight: bold;
    }

    .steps_header .icon {
        width: 18px;
        padding: 4px;
        font-size: 0;
        background: transparent;
    }

    .steps_content {
        display: none;
        border-top: 1px solid var(--modal-border);
        padding: 16px;
    }

    .steps_content_heading {
        padding: 16px 0;
    }

    .steps_content_heading h4 {
        font-size: 11px;
        font-weight: bold;
    }

    .step_header_action {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }

    .step_header_action .step_header_button {
        display: inline-block;
        padding: 3px 8px;
        font-size: 11px;
        margin: 0px 8px;
        min-width: 44px;
        background-color: var(--foreground-color);
        color: var(--label-color);
        border: 1px solid var(--background-color);
        border-radius: 4px;
        cursor: pointer;
    }

    .steps_footer {
        padding: 0px 16px 16px;
        display: none;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }

    .steps_container .steps_header .indicator_waiting {
        color: var(--label-dim-color);
    }

    .steps_container .steps_header .indicator_active,
    .steps_container .steps_header .indicator_completed,
    .steps_container .steps_header .step_edit,
    .steps_container .steps_footer .step_save {
        display: none;
    }

    .steps_container.active .steps_header .indicator_active {
        display: block;
        color: var(--label-color);
    }

    .steps_container.active .steps_header .indicator_waiting {
        display: none;
    }

    .steps_container.active .steps_header {
        background: var(--background-color);
    }

    .steps_container.editing .steps_header {
        background: var(--foreground-offset-color);
    }

    .steps_container.active .steps_content,
    .steps_container.editing .steps_content {
        display: block;
    }

    .steps_container.active .steps_footer,
    .steps_container.editing .steps_footer {
        display: flex;
    }

    .steps_container.editing .steps_footer .step_next {
        display: none;
    }

    .steps_container.editing .steps_footer .step_save {
        display: block;
    }


    .steps_container.completed .steps_content,
    .steps_container.completed .steps_footer,
    .steps_container.completed .steps_header .indicator_waiting {
        display: none;
    }

    .steps_container.completed .steps_header .step_edit,
    .steps_container.completed .steps_header .indicator_completed {
        display: block;
    }

    .steps_container.completed .steps_header .indicator_completed {
        color: var(--color-green);
    }

    .client_application_content .steps_container.completed h3 {
        color: var(--label-dim-color);
    }

    /*******
    * RESPONSIVE CLASSES
    *****/
    .tt_upper {
        text-transform: uppercase;
    }

    .ta_l-LS {
        text-align: left;
    }

    .ta_r-LS {
        text-align: right;
    }

    .ta_c-LS {
        text-align: center;
    }

    .ta_j-LS {
        text-align: justify;
    }

    /*  */
    .grid_list .stats.jc_l-LS,
    .client_stats .stats.jc_l-LS,
    .jc_l-LS {
        justify-content: flex-start;
    }

    .jc_r-LS {
        justify-content: flex-end;
    }

    .jc_c-LS {
        justify-content: center;
    }

    .jc_s-LS {
        justify-content: stretch;
    }

    /* DISPLAY TYPES */
    .display_none-LS {
        display: none;
    }

    .display_block-LS {
        display: block;
    }

    /*  */
    .display_grid_12-LS {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-auto-rows: minmax(min-content, max-content);
        /* align-items: center; */
    }

    .display_grid_1-LS {
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(min-content, max-content);
        /* align-items: center; */
    }

    /* GRID ALIGN */
    .grid_align_t-LS {
        align-items: start;
    }

    .grid_align_c-LS {
        align-items: center;
    }

    .grid_align_b-LS {
        align-items: end;
    }

    .grid_align_s-LS {
        align-items: stretch;
    }

    /*  */
    .grid_gap_0-LS {
        grid-gap: 0px;
    }

    .grid_gap_4-LS {
        grid-gap: 4px;
    }

    .grid_gap_8-LS {
        grid-gap: 8px;
    }

    .grid_gap_16-LS {
        grid-gap: 16px;
    }

    .grid_gap_32-LS {
        grid-gap: 32px;
    }

    /*  */
    .pad_4-LS {
        padding: 4px;
    }

    .pad_4_tb-LS {
        padding: 4px 0px;
    }

    .pad_4_b-LS {
        padding-bottom: 4px;
    }

    .pad_8_l-LS {
        padding-left: 8px;
    }

    .pad_8-LS {
        padding: 8px;
    }

    .pad_8_tb-LS {
        padding: 8px 0px;
    }

    .pad_8_b-LS {
        padding-bottom: 8px;
    }

    .pad_8_r-LS {
        padding-right: 8px;
    }

    .pad_16-LS {
        padding: 16px;
    }

    .pad_16_tb-LS {
        padding: 16px 0px;
    }

    .pad_16_b-LS {
        padding-bottom: 16px;
    }

    .pad_32-LS {
        padding: 32px;
    }

    .pad_32_tb-LS {
        padding: 32px 0px;
    }

    .pad_32_b-LS {
        padding-bottom: 32px;
    }

    /*  */
    .mrg_8_l-LS {
        margin-left: 8px;
    }

    .mrg_8_r-LS {
        margin-right: 8px;
    }

    /*  */
    /* GRID ROWS */
    .grid_row_1fr-LS {
        grid-auto-rows: 1fr;
    }

    /* GRID SPAN */
    .grid_span_1-LS,
    .grid_span_1-LS .grid_block,
    .grid_block.grid_span_1-LS {
        grid-column: auto / span 1;
    }

    .grid_span_2-LS,
    .grid_span_2-LS .grid_block,
    .grid_block.grid_span_2-LS {
        grid-column: auto / span 2;
    }

    .grid_span_3-LS,
    .grid_span_3-LS .grid_block,
    .grid_block.grid_span_3-LS {
        grid-column: auto / span 3;
    }

    .grid_span_4-LS,
    .grid_span_4-LS .grid_block,
    .grid_block.grid_span_4-LS {
        grid-column: auto / span 4;
    }

    .grid_span_5-LS,
    .grid_span_5-LS .grid_block,
    .grid_block.grid_span_5-LS {
        grid-column: auto / span 5;
    }

    .grid_span_6-LS,
    .grid_span_6-LS .grid_block,
    .grid_block.grid_span_6-LS {
        grid-column: auto / span 6;
    }

    .grid_span_7-LS,
    .grid_span_7-LS .grid_block,
    .grid_block.grid_span_7-LS {
        grid-column: auto / span 7;
    }

    .grid_span_8-LS,
    .grid_span_8-LS .grid_block,
    .grid_block.grid_span_8-LS {
        grid-column: auto / span 8;
    }

    .grid_span_9-LS,
    .grid_span_9-LS .grid_block,
    .grid_block.grid_span_9-LS {
        grid-column: auto / span 9;
    }

    .grid_span_10-LS,
    .grid_span_10-LS .grid_block,
    .grid_block.grid_span_10-LS {
        grid-column: auto / span 10;
    }

    .grid_span_11-LS,
    .grid_span_11-LS .grid_block,
    .grid_block.grid_span_11-LS {
        grid-column: auto / span 11;
    }

    .grid_span_12-LS,
    .grid_span_12-LS .grid_block,
    .grid_block.grid_span_12-LS {
        grid-column: auto / span 12;
    }

    /*  */

    .reports {
        min-width: 100%;
        width: 100%;
        display: grid;
        grid-template-columns: 150px 1fr;
    }

    .reports_group {
        margin-bottom: 24px;
    }

    .reports h3 {
        font-size: 16px;
    }

    .reports_legends {
        padding-right: 8px;
    }

    .report_data {
        overflow-y: hidden;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
    }


    .reports_title {
        height: 24px;
    }

    .reports_label,
    .reports_cell {
        font-size: 11px;
        background: var(--foreground-color);
        padding: 8px;
        line-height: 1;
        text-transform: uppercase;
        font-weight: bold;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        height: 38px;
        border-radius: 6px;
        min-width: 68px;

    }

    .reports_cell_total {
        color: var(--active-color);
    }

    .reports_label {
        justify-content: flex-end;
        color: var(--label-dim-color);
    }

    .reports_label h4 {
        font-size: inherit;
        font-weight: bold;
    }

    .reports_heading {
        font-size: 11px;
        font-weight: bold;
        height: 17.1px;
    }

    .display_grid_reports_data-LS {
        position: relative;
        display: grid;
        grid-template-columns: repeat(12, 1fr) 100px 100px;
        /* grid-auto-rows: minmax(min-content, max-content); */
    }

    .display_grid_calendar-LS {
        position: relative;
        display: grid;
        grid-template-columns: 34px repeat(7, 1fr);
        /* grid-auto-rows: minmax(min-content, max-content); */
        min-height: 37.7px;
    }

    .calendar_controls h3 {
        font-size: 18px;
        margin: 0;
        padding: 0;
        text-align: left;
    }

    .calendar_header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-bottom: 1px dotted var(--label-dim-color);
        border-left: 1px dotted var(--label-dim-color);
        padding: 8px 0;
    }

    .calendar_header.start {
        border-left: none;
    }

    .calendar_header .calendar_week_day {
        font-size: 10px;
        font-weight: bold;
    }

    .calendar_header .calendar_day {
        font-size: 15px;
        width: 30px;
        height: 30px;
        border-radius: 60px;
        background: var(--foreground-color);
        color: var(--label-color);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .calendar_header.active .calendar_day {
        background: var(--active-color);
        color: var(--color-white);

    }

    .calendar_scroll {
        height: calc(100% - 62px);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;

    }

    .calendar_content {
        height: calc(100% - 55px);
    }

    .calendar_col {
        height: 100%;
        min-height: 100%;
    }

    .calendar_col div {
        height: 16%;
    }

    .calendar_time {
        font-size: 12px;
        text-align: right;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding-right: 4px;
        border-bottom: 1px dotted var(--label-dim-color);
    }

    .calendar_appointment_container {
        width: 100%;
        border-bottom: 1px dotted var(--appointment-boder-color);
        border-left: 1px dotted var(--appointment-boder-color);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        background: var(--appointment-background);
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: stretch;
        min-height: 33px;
    }

    .calendar_appointment {
        padding: 4px 8px;
        height: 100%;
        width: 50%;
        cursor: pointer;
    }

    .calendar_appointment:only-child {
        width: 100%;
    }

    .calendar_appointment_container .calendar_appointment:not(:first-child) {
        border-left: 1px solid var(--foreground-color);
    }

    .calendar_appointment_add {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

    .calendar_appointment_add .icon {
        display: inline-block;
        background: transparent;
        width: 16px;
        height: 16px;
        color: var(--appointment-bg-completed);
    }

    .calendar_appointment_add:hover .icon {
        color: var(--label-color);
    }

    .appt_title,
    .appt_client {
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
        color: inherit;
    }

    .appt_client {
        font-weight: bold;
    }

    .appointment_reservation_icon{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 16px 0 24px 0;
    }
    .appointment_reservation_icon svg{
        width: 48px;
        color: var(--label-dim-color);
        font-size: 0;
    }

    p.appointment_reservation_text{
        font-size: 16px;
        text-align: center;
        font-weight: 400;
    }

    p.appointment_reservation_text_upper{
        font-size: 14px;
        text-transform: uppercase;
        text-align: center;
        font-weight: 400;
    }

    .appointment_reservation_container{
        margin-bottom: 16px;
    }

    .appointment_reservation_date_time{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap:4px;
        color: #86c3ff;
        font-size: 18px;
        font-weight: bold;
    }
    .appointment_reservation_date_time_space{
        width: 1px;
        height: 16px;
        border-left: 1px solid var(--label-dim-color);
        margin: 0 4px;
    }

    .appointment_reservation_address{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 16px;
        color:  var(--label-dim-color);
        margin-bottom: 16px;
    }

    .appointment_reservation_address .icon{
        width: 16px;
        font-size: 0;
        color:  var(--label-dim-color);
    }

    .calendar_appointment.completed {
        background: var(--appointment-bg-completed);
        color: var(--appointment-clr-completed);
    }

    .calendar_appointment.completed:hover {
        background: var(--appointment-bg-completed-hover);
        color: var(--appointment-clr-completed);
    }

    .calendar_appointment.upcoming {
        background: var(--appointment-bg-upcoming);
        color: var(--appointment-clr-upcoming);
    }

    .calendar_appointment.upcoming:hover {
        background: var(--appointment-bg-upcoming-hover);
        color: var(--appointment-clr-upcoming);
    }

    .calendar_snap_row {
        scroll-snap-align: start;
    }

    .calendar_scroll .calendar_snap_row:last-child {
        scroll-snap-align: end;
    }

    /*  */
    .cal_controls {
        min-height: inherit;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .cal_controls_date {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .cal_controls_button {
        min-width: 30px;
        font-size: 12px;
        padding: 8px;
        background: var(--background-color);
        color: var(--label-color);
        border-radius: 4px;
        cursor: pointer;
        height: 38px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .cal_controls_date_button_prev {
        width: 30px;
        margin-right: 2px;
        font-size: 0;
    }

    .cal_controls_date_button_next {
        width: 30px;
        margin-left: 2px;
        font-size: 0;
    }

    .cal_controls_date_button_prev:hover,
    .cal_controls_date_button_next:hover {
        background: var(--active-color);
        color: var(--color-white);
    }

    .cal_controls_date_select {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 0px 8px;
    }

    .cal_select_day {
        width: 92px;
    }

    .cal_select_coach {
        width: 34px;
        cursor: pointer;
    }

    .cal_controls_button_group {
        position: relative;
        min-width: 30px;
        font-size: 12px;
        border: 1px solid var(--background-color);
        color: var(--label-color);
        border-radius: 4px;
        cursor: pointer;
        height: 38px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        overflow: hidden;

    }

    .cal_controls_button_group label {
        align-self: stretch;
    }

    .cal_controls_button_group input {
        width: 0px;
        height: 0px;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
    }

    .cal_controls_button_group div {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .cal_controls_button_group_item div {
        padding: 0px 8px;
        min-width: 50px;
        cursor: pointer;
    }

    .cal_controls_button_group input[type=radio]:checked~div {
        background-color: var(--active-color);
        -webkit-box-shadow: inset 0px 0px 3px 0px #000;
        box-shadow: inset 0px 0px 3px 0px #000;
    }

    .cal_body {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--foreground-color);
        ;
        width: 100%;
        height: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scroll-snap-type: both proximity;
        overscroll-behavior: none;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;

    }

    .cal_header {
        position: sticky;
        top: 0;
        background: var(--background-color);
        color: var(--label-color);
        z-index: 100;
        height: 40px;
    }

    .cal_week_day_label {
        font-size: 10px;
        font-weight: bold;
    }

    .cal_day_label {
        font-size: 15px;
        width: 30px;
        height: 30px;
        border-radius: 60px;
        background: var(--foreground-color);
        color: var(--label-color);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-bottom: 2px;
    }

    .cal_day_profile .image {
        width: 28px;
        height: 28px;
        border-radius: 34px;
        overflow: hidden;
        background: var(--color-dim);
    }

    .cal_day.active .cal_day_label {
        background: var(--active-color);
        color: var(--color-white);

    }

    .cal_hours {
        position: sticky;
        left: 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        z-index: 200;
    }

    .cal_content {
        display: grid;
        grid-template-columns: 34px auto;
        /* grid-auto-rows: minmax(min-content, max-content); */
        height: 100%;
        min-width: 100%;
    }

    .cal_columns {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        border-right: 1px dotted #000;
    }

    .cal_columns .cal_event {
        scroll-snap-align: end;
    }

    .cal_columns .cal_event:last-child {
        scroll-snap-align: end;
    }

    .cal_header,
    .cal_header .cal_hours,
    .cal_header .cal_columns {
        height: 50px;
    }

    .cal_header {
        min-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid var(--cal-boder-color);
    }

    .cal_day {
        flex: 1;
        min-width: 100px;
        border-left: 1px solid var(--cal-boder-color);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        height: 100%;
        scroll-snap-align: end;
    }

    .cal_event {
        flex: 1;
        width: 100%;
        min-height: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid var(--cal-boder-color);
        font-size: 11px;
        padding: 0.5px 4px 0.5px 0px;
    }

    .cal_event_content {
        background-color: black;
        width: 100%;
        height: 100%;
        border-radius: 4px;
        text-align: left;
        padding: 4px 8px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        cursor: pointer;
        opacity: 1;
    }
    .cal_event_meal_plan{
        background-color: black;
        width: 100%;
        height: 100%;
        border-radius: 4px;
        text-align: left;
        padding: 4px 8px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        opacity: 1;
    }

    .cal_event_meal_plan .icon{
        width: 24px;
    }

    .cal_event_name {
        font-weight: bold;
    }

    .cal_event_default {
        background: var(--active-color);
        color: var(--color-white);
    }
    .cal_event_pt {
        background: var(--pt-color);
        color: var(--color-white);
    }

    .cal_event_oc {
        background: var(--oc-color);
        color: var(--color-white);
    }

    .cal_event_gp {
        background: var(--gp-color);
        color: var(--color-white);
    }

    .cal_event_default:hover,
    .cal_event_pt:hover,
    .cal_event_oc:hover,
    .cal_event_gp:hover {
        opacity: 0.8;
    }

    .cal_event_empty {
        background: transparent;
        border: 1px dotted transparent;
    }

    .cal_event_empty:hover {
        border-color: var(--cal-boder-color);
    }

    .cal_time {
        background: var(--background-color);
        color: var(--label-color);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-color: var(--foreground-color);
    }

    .modal_meal_plan_info{
        background: var(--background-color);
        color: var(--label-color);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        border-color: var(--foreground-color);
        padding: 8px;
        border-radius: 4px;
    }

    .modal_meal_plan_info .icon{
        width: 16px;
        font-size: 0;
        margin-right: 8px;
    }

    .cal_time small {
        font-size: 9px;
    }

    .date_picker {
        min-width: 100px;
        padding: 4px;
    }

    .date_picker_header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .date_picker_day_header,
    .date_picker_day {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        grid-auto-rows: minmax(min-content, max-content);
        grid-gap: 4px;
    }

    .date_picker_mmyyyyy {
        margin: 4px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .date_picker_mmyyyyy.active,
    .date_picker_days.active {
        display: block;
    }

    .date_picker_mmyyyyy.hidden,
    .date_picker_days.hidden {
        display: none;
    }

    .date_picker_header_info {
        flex: 1;
        text-align: left;
    }

    .date_picker_btn {
        width: 32px;
        padding: 10px;
        font-size: 0;
    }

    /* .date_picker_btn_months,
    .date_picker_btn_years{
        padding: 4px 8px;
        font-weight:bold;
    } */
    .date_picker_btn,
    .date_picker_btn_string,
    .date_picker_btn_months,
    .date_picker_btn_years {
        border: none;
        background: transparent;
        color: var(--label-color);
        cursor: pointer;
        border-radius: 4px;
    }

    .date_picker_btn_string {
        padding: 10px;
        text-transform: uppercase;
        font-size: 11px;
        color: var(--label-color);
    }

    .date_picker_btn_string:hover {
        color: var(--active-color);
    }

    .date_picker_btn {
        color: var(--label-dim-color);
    }

    .date_picker_btn:hover {
        color: var(--color-white);
    }

    .date_picker_btn_current_mmyyyyy {
        display: block;
        font-size: 14px;
        margin: 4px;
        height: 36px;
        padding: 0 16px;
        background: var(--foreground-color);
        border: 1px solid var(--foreground-color);
        border-radius: 4px;
        color: var(--label-color);
        text-transform: capitalize;
        cursor: pointer;
    }

    .date_picker_btn_current_mmyyyyy:hover {
        background: var(--active-color);
        color: white;
    }

    .date_picker_btn_current_mmyyyyy.active {
        border-color: var(--active-color);
        color: white;
    }

    .date_picker_months_years_header,
    .date_picker_day_header {
        color: var(--label-dim-color);
        font-size: 10px;
        font-weight: bold;
        text-align: center;
        margin: 4px 0;
        text-transform: uppercase;
    }

    .date_picker_day_responsive {
        position: relative;
        width: 100%;
    }

    .date_picker_day_responsive:after {
        content: "";
        display: block;
        padding-bottom: 100%;
    }

    .date_picker_day_responsive .date_picker_day {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }

    .date_picker_day_responsive .date_picker_day {
        background: transparent;
        border: 1px solid transparent;
        border-radius: 4px;
        color: var(--label-color);
        cursor: pointer;
        font-size: 14px;
    }

    .date_picker_day_responsive.dim .date_picker_day {
        color: var(--label-dim-color);
    }

    .date_picker_day_responsive.today .date_picker_day {
        border-color: var(--label-dim-color);
    }

    .date_picker_day_responsive .date_picker_day.selected {
        background: var(--active-color);
        color: white;
    }

    .date_picker_day_responsive:hover .date_picker_day {
        border-color: var(--active-color);
    }

    .date_picker_months {
        width: 35%;
    }

    .date_picker_months_group {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(min-content, max-content);
        grid-gap: 4px;
    }

    .date_picker_years_group {
        margin-left: 4px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: minmax(min-content, max-content);
        grid-gap: 4px;
    }

    .date_picker_months_group button,
    .date_picker_years_group button {
        display: block;
        width: 100%;
        background: transparent;
        padding: 4px 2px;
        border: 1px solid var(--foreground-color);
        border-radius: 4px;
        font-size: 12px;
        color: var(--label-color);
        cursor: pointer;
        padding: 0.6em 0;
    }

    .date_picker_months_group button.today,
    .date_picker_years_group button.today {
        border-color: var(--label-dim-color);
    }

    .date_picker_months_group button.selected,
    .date_picker_years_group button.selected {
        border-color: var(--active-color);
        background-color: var(--active-color);
    }

    .date_picker_months_group button:hover,
    .date_picker_years_group button:hover {
        border-color: var(--active-color);
    }

    .date_picker_mmyyyy_group button:hover {
        border-color: var(--active-color);
    }

    .date_picker_years {
        flex: 1;
    }

    .weight_in_default.hide {
        display: none;
    }

    .weight_in_parillo.hide {
        display: none;
    }

    .food_item {
        background: var(--background-color);
        text-align: center;
        padding: 8px;
        border-radius: 6px;
        font-size: 11px;
        font-weight: bold;
    }
    .supplement_dosage small,
    .supplement_time small{
        display: block;
        font-size: 10px;
        text-transform: uppercase;
        color:var(--label-dim-color);
    }

    .supplement_dosage{
        margin-right: 32px;
    }

    .supplement_containter,
    .supplement_directions{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .supplement_direction{
        display: block;
        font-size: 11px;
        background-color: var(--background-color);
        padding: 2px 8px;
        text-align: center;
        border-radius: 4px;
        margin-right: 4px;
        font-weight: bold;
    }
    .supplement_direction{
        background-color: var(--foreground-color);
    }
    .referral_container .logo_container{
        position:relative;
        
        background:var(--color-white);
    }
    .referral_container .logo_container:after{
        content: "";
        display:block;
        width:100%;
        padding-top: 35%;
    }
    .referral_container{
        width:100%;
        height:100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }
    .referral_container .logo{
        position:absolute;
        top:50%;
        left:50%;
        width:60%;
        transform:translate(-50%, -50%);
    }
    .referral_content{
        flex:1;
    }
    .referral_content,
    .referral_footer{
        margin-top:8px;
    }
    .referral_content p {
        margin:0;
        font-size:13px;
        color:var(--label-dim-color);
    }
    .button_link{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background: var(--active-color);
        color: var(--color-white);
        height: 38px;
        min-width: 38px;
        border: none;
        padding: 0px 8px;
        font-weight: bold;
        border-radius: 6px;
        cursor: pointer;
        text-decoration:none;
        font-size:13px;
    }
    .button_link:hover{
        background: var(--color-blue-hover);
    }
    .privacy_policy{
        display: inline-block;
        color: var(--active-color);
        text-decoration: none;
        font-size: 12px;
        margin-bottom: 16px;

    }

    .privacy_policy:hover{
        color: white;
        
    }
}

@media screen {}

/* Landscape XXS */
/* For small phones eg.: iPhone 5 */
@media screen and (orientation:landscape) and (max-width: 692px) {
    /*******
    * RESPONSIVE CLASSES
    *****/

    .ta_l-LS_XXS {
        text-align: left;
    }

    .ta_r-LS_XXS {
        text-align: right;
    }

    .ta_c-LS_XXS {
        text-align: center;
    }

    .ta_j-LS_XXS {
        text-align: justify;
    }

    /*  */
    .jc_l-LS_XXS {
        justify-content: flex-start;
    }

    .jc_r-LS_XXS {
        justify-content: flex-end;
    }

    .jc_c-LS_XXS {
        justify-content: center;
    }

    .jc_s-LS_XXS {
        justify-content: stretch;
    }

    /* DISPLAY TYPES */
    .display_none-LS_XXS {
        display: none;
    }

    .display_block-LS_XXS {
        display: block;
    }

    /*  */
    .display_grid_12-LS_XXS {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-auto-rows: minmax(min-content, max-content);
        /* align-items: center; */
    }

    /* GRID ALIGN */
    .grid_align_t-LS_XXS {
        align-items: start;
    }

    .grid_align_c-LS_XXS {
        align-items: center;
    }

    .grid_align_b-LS_XXS {
        align-items: end;
    }

    .grid_align_s-LS_XXS {
        align-items: stretch;
    }

    /*  */
    .grid_gap_0-LS_XXS {
        grid-gap: 0px;
    }

    .grid_gap_4-LS_XXS {
        grid-gap: 4px;
    }

    .grid_gap_8-LS_XXS {
        grid-gap: 8px;
    }

    .grid_gap_16-LS_XXS {
        grid-gap: 16px;
    }

    .grid_gap_32-LS_XXS {
        grid-gap: 32px;
    }

    /*  */
    /* GRID ROWS */
    .grid_row_1fr-LS_XXS {
        grid-auto-rows: 1fr;
    }

    /* GRID SPAN */
    .grid_span_1-LS_XXS,
    .grid_span_1-LS_XXS .grid_block,
    .grid_block.grid_span_1-LS_XXS {
        grid-column: auto / span 1;
    }

    .grid_span_2-LS_XXS,
    .grid_span_2-LS_XXS .grid_block,
    .grid_block.grid_span_2-LS_XXS {
        grid-column: auto / span 2;
    }

    .grid_span_3-LS_XXS,
    .grid_span_3-LS_XXS .grid_block,
    .grid_block.grid_span_3-LS_XXS {
        grid-column: auto / span 3;
    }

    .grid_span_4-LS_XXS,
    .grid_span_4-LS_XXS .grid_block,
    .grid_block.grid_span_4-LS_XXS {
        grid-column: auto / span 4;
    }

    .grid_span_5-LS_XXS,
    .grid_span_5-LS_XXS .grid_block,
    .grid_block.grid_span_5-LS_XXS {
        grid-column: auto / span 5;
    }

    .grid_span_6-LS_XXS,
    .grid_span_6-LS_XXS .grid_block,
    .grid_block.grid_span_6-LS_XXS {
        grid-column: auto / span 6;
    }

    .grid_span_7-LS_XXS,
    .grid_span_7-LS_XXS .grid_block,
    .grid_block.grid_span_7-LS_XXS {
        grid-column: auto / span 7;
    }

    .grid_span_8-LS_XXS,
    .grid_span_8-LS_XXS .grid_block,
    .grid_block.grid_span_8-LS_XXS {
        grid-column: auto / span 8;
    }

    .grid_span_9-LS_XXS,
    .grid_span_9-LS_XXS .grid_block,
    .grid_block.grid_span_9-LS_XXS {
        grid-column: auto / span 9;
    }

    .grid_span_10-LS_XXS,
    .grid_span_10-LS_XXS .grid_block,
    .grid_block.grid_span_10-LS_XXS {
        grid-column: auto / span 10;
    }

    .grid_span_11-LS_XXS,
    .grid_span_11-LS_XXS .grid_block,
    .grid_block.grid_span_11-LS_XXS {
        grid-column: auto / span 11;
    }

    .grid_span_12-LS_XXS,
    .grid_span_12-LS_XXS .grid_block,
    .grid_block.grid_span_12-LS_XXS {
        grid-column: auto / span 12;
    }

    /*  */
    .client_stats .client_name.first,
    .client_stats .client_name.last {
        display: block;
    }

    /*  */
    .select_custom_title,
    .dropdown_custom_title {
        background: var(--background-color);
        border-radius: 6px 6px 0px 0px;
    }

    .select_custom_wrapper,
    .select_custom_wrapper.pos_l,
    .select_custom_wrapper.pos_r,
    .select_custom_wrapper.pos_c,
    .dropdown_custom_wrapper,
    .dropdown_custom_wrapper.pos_l,
    .dropdown_custom_wrapper.pos_r,
    .dropdown_custom_wrapper.pos_c {
        position: fixed;
        width: calc(100% - 16px);
        /* min-width:calc(100vw - 16px); */
        margin: 0px 8px;
        max-height: 90%;
        max-width: calc(60vw - 16px);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .select_custom.open:after,
    .dropdown_custom.open:after {
        content: "";
        z-index: 300;
        width: 100%;
        height: 100%;
        position: fixed;
        background: var(--modal-background);
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .select_custom_wrapper li:last-child,
    .dropdown_custom_wrapper li:last-child {
        border-radius: 0px;
    }

    .date_picker_day_responsive::after {
        padding-bottom: 67%;
    }
}

/* Landscape XS */
@media screen and (orientation:landscape) and (min-width: 693px) and (max-width:926px) {
    /*******
    * RESPONSIVE CLASSES
    *****/

    .ta_l-LS_XS {
        text-align: left;
    }

    .ta_r-LS_XS {
        text-align: right;
    }

    .ta_c-LS_XS {
        text-align: center;
    }

    .ta_j-LS_XS {
        text-align: justify;
    }

    /*  */
    .jc_l-LS_XS {
        justify-content: flex-start;
    }

    .jc_r-LS_XS {
        justify-content: flex-end;
    }

    .jc_c-LS_XS {
        justify-content: center;
    }

    .jc_s-LS_XS {
        justify-content: stretch;
    }

    /* DISPLAY TYPES */
    .display_none-LS_XS {
        display: none;
    }

    .display_block-LS_XS {
        display: block;
    }

    /*  */
    .display_grid_12-LS_XS {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-auto-rows: minmax(min-content, max-content);
        /* align-items: center; */
    }

    /* GRID ALIGN */
    .grid_align_t-LS_XS {
        align-items: start;
    }

    .grid_align_c-LS_XS {
        align-items: center;
    }

    .grid_align_b-LS_XS {
        align-items: end;
    }

    .grid_align_s-LS_XS {
        align-items: stretch;
    }

    /*  */
    .grid_gap_0-LS_XS {
        grid-gap: 0px;
    }

    .grid_gap_4-LS_XS {
        grid-gap: 4px;
    }

    .grid_gap_8-LS_XS {
        grid-gap: 8px;
    }

    .grid_gap_16-LS_XS {
        grid-gap: 16px;
    }

    .grid_gap_32-LS_XS {
        grid-gap: 32px;
    }

    /*  */
    /* GRID ROWS */
    .grid_row_1fr-LS_XS {
        grid-auto-rows: 1fr;
    }

    /* GRID SPAN */
    .grid_span_1-LS_XS,
    .grid_span_1-LS_XS .grid_block,
    .grid_block.grid_span_1-LS_XS {
        grid-column: auto / span 1;
    }

    .grid_span_2-LS_XS,
    .grid_span_2-LS_XS .grid_block,
    .grid_block.grid_span_2-LS_XS {
        grid-column: auto / span 2;
    }

    .grid_span_3-LS_XS,
    .grid_span_3-LS_XS .grid_block,
    .grid_block.grid_span_3-LS_XS {
        grid-column: auto / span 3;
    }

    .grid_span_4-LS_XS,
    .grid_span_4-LS_XS .grid_block,
    .grid_block.grid_span_4-LS_XS {
        grid-column: auto / span 4;
    }

    .grid_span_5-LS_XS,
    .grid_span_5-LS_XS .grid_block,
    .grid_block.grid_span_5-LS_XS {
        grid-column: auto / span 5;
    }

    .grid_span_6-LS_XS,
    .grid_span_6-LS_XS .grid_block,
    .grid_block.grid_span_6-LS_XS {
        grid-column: auto / span 6;
    }

    .grid_span_7-LS_XS,
    .grid_span_7-LS_XS .grid_block,
    .grid_block.grid_span_7-LS_XS {
        grid-column: auto / span 7;
    }

    .grid_span_8-LS_XS,
    .grid_span_8-LS_XS .grid_block,
    .grid_block.grid_span_8-LS_XS {
        grid-column: auto / span 8;
    }

    .grid_span_9-LS_XS,
    .grid_span_9-LS_XS .grid_block,
    .grid_block.grid_span_9-LS_XS {
        grid-column: auto / span 9;
    }

    .grid_span_10-LS_XS,
    .grid_span_10-LS_XS .grid_block,
    .grid_block.grid_span_10-LS_XS {
        grid-column: auto / span 10;
    }

    .grid_span_11-LS_XS,
    .grid_span_11-LS_XS .grid_block,
    .grid_block.grid_span_11-LS_XS {
        grid-column: auto / span 11;
    }

    .grid_span_12-LS_XS,
    .grid_span_12-LS_XS .grid_block,
    .grid_block.grid_span_12-LS_XS {
        grid-column: auto / span 12;
    }

    /*  */
    .connect_messages .cm_list,
    .content_multilevel_menu .cm_list,
    .content_multilevel_menu .cm_list_container {
        width: 40%;
    }

    .content_multilevel_menu .cm_list_container .cm_list {
        margin: 0;
        width: 100%;
    }

    .connect_messages .cm_chat_container,
    .content_multilevel_menu .cm_active_content_container {
        position: relative;
        background: transparent;
        width: 60%;
        height: calc(100% - 32px);
        right: 0%;
        margin: 16px 16px 16px 0px;
        border-radius: 6px;
        background: var(--foreground-color);
        overflow: hidden;
        transition: right 0.4s ease,
            height 0.4s ease,
            border-radius 0.4s ease;
        will-change: right, height, margin;
    }

    /*  */
    .select_custom_title,
    .dropdown_custom_title {
        background: var(--background-color);
        border-radius: 6px 6px 0px 0px;
    }

    .select_custom_wrapper,
    .select_custom_wrapper.pos_l,
    .select_custom_wrapper.pos_r,
    .select_custom_wrapper.pos_c,
    .dropdown_custom_wrapper,
    .dropdown_custom_wrapper.pos_l,
    .dropdown_custom_wrapper.pos_r,
    .dropdown_custom_wrapper.pos_c {
        position: fixed;
        width: calc(100% - 16px);
        margin: 0px 8px;
        max-height: 90%;
        max-width: calc(50vw - 16px);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .select_custom.open:after,
    .dropdown_custom.open:after {
        content: "";
        z-index: 300;
        width: 100%;
        height: 100%;
        position: fixed;
        background: var(--modal-background);
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .select_custom_wrapper li:last-child,
    .dropdown_custom_wrapper li:last-child {
        border-radius: 0px;
    }

    .date_picker_day_responsive::after {
        padding-bottom: 67%;
    }
}

/* Landscape SM */
@media screen and (orientation:landscape) and (min-width:927px) and (max-width:1112px) {
    /*******
    * RESPONSIVE CLASSES
    *****/

    .ta_l-LS_SM {
        text-align: left;
    }

    .ta_r-LS_SM {
        text-align: right;
    }

    .ta_c-LS_SM {
        text-align: center;
    }

    .ta_j-LS_SM {
        text-align: justify;
    }

    /*  */
    .jc_l-LS_SM {
        justify-content: flex-start;
    }

    .jc_r-LS_SM {
        justify-content: flex-end;
    }

    .jc_c-LS_SM {
        justify-content: center;
    }

    .jc_s-LS_SM {
        justify-content: stretch;
    }

    /* DISPLAY TYPES */
    .display_none-LS_SM {
        display: none;
    }

    .display_block-LS_SM {
        display: block;
    }

    /*  */
    .display_grid_12-LS_SM {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-auto-rows: minmax(min-content, max-content);
        /* align-items: center; */
    }

    /* GRID ALIGN */
    .grid_align_t-LS_SM {
        align-items: start;
    }

    .grid_align_c-LS_SM {
        align-items: center;
    }

    .grid_align_b-LS_SM {
        align-items: end;
    }

    .grid_align_s-LS_SM {
        align-items: stretch;
    }

    /*  */
    .grid_gap_0-LS_SM {
        grid-gap: 0px;
    }

    .grid_gap_4-LS_SM {
        grid-gap: 4px;
    }

    .grid_gap_8-LS_SM {
        grid-gap: 8px;
    }

    .grid_gap_16-LS_SM {
        grid-gap: 16px;
    }

    .grid_gap_32-LS_SM {
        grid-gap: 32px;
    }

    /*  */
    /* GRID ROWS */
    .grid_row_1fr-LS_SM {
        grid-auto-rows: 1fr;
    }

    /* GRID SPAN */
    .grid_span_1-LS_SM,
    .grid_span_1-LS_SM .grid_block,
    .grid_block.grid_span_1-LS_SM {
        grid-column: auto / span 1;
    }

    .grid_span_2-LS_SM,
    .grid_span_2-LS_SM .grid_block,
    .grid_block.grid_span_2-LS_SM {
        grid-column: auto / span 2;
    }

    .grid_span_3-LS_SM,
    .grid_span_3-LS_SM .grid_block,
    .grid_block.grid_span_3-LS_SM {
        grid-column: auto / span 3;
    }

    .grid_span_4-LS_SM,
    .grid_span_4-LS_SM .grid_block,
    .grid_block.grid_span_4-LS_SM {
        grid-column: auto / span 4;
    }

    .grid_span_5-LS_SM,
    .grid_span_5-LS_SM .grid_block,
    .grid_block.grid_span_5-LS_SM {
        grid-column: auto / span 5;
    }

    .grid_span_6-LS_SM,
    .grid_span_6-LS_SM .grid_block,
    .grid_block.grid_span_6-LS_SM {
        grid-column: auto / span 6;
    }

    .grid_span_7-LS_SM,
    .grid_span_7-LS_SM .grid_block,
    .grid_block.grid_span_7-LS_SM {
        grid-column: auto / span 7;
    }

    .grid_span_8-LS_SM,
    .grid_span_8-LS_SM .grid_block,
    .grid_block.grid_span_8-LS_SM {
        grid-column: auto / span 8;
    }

    .grid_span_9-LS_SM,
    .grid_span_9-LS_SM .grid_block,
    .grid_block.grid_span_9-LS_SM {
        grid-column: auto / span 9;
    }

    .grid_span_10-LS_SM,
    .grid_span_10-LS_SM .grid_block,
    .grid_block.grid_span_10-LS_SM {
        grid-column: auto / span 10;
    }

    .grid_span_11-LS_SM,
    .grid_span_11-LS_SM .grid_block,
    .grid_block.grid_span_11-LS_SM {
        grid-column: auto / span 11;
    }

    .grid_span_12-LS_SM,
    .grid_span_12-LS_SM .grid_block,
    .grid_block.grid_span_12-LS_SM {
        grid-column: auto / span 12;
    }

    /*  */
    .block.widget {
        padding: 10px;
    }

    .block.widget h3 {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .block.widget .info h4 {
        font-size: 12px;
    }

    .block.widget .info p {
        font-size: 18px;
    }

    .block .widget_content .icon {
        width: 50px;
        max-width: 50px;
        max-height: 50px;
        padding: 10px;
        border-radius: 8px;
    }

    .client_stats .stats {
        font-size: 11px;
    }

    .connect_messages .cm_list,
    .content_multilevel_menu .cm_list,
    .content_multilevel_menu .cm_list_container {
        width: 40%;
    }

    .connect_messages .cm_chat_container,
    .content_multilevel_menu .cm_active_content_container {
        position: relative;
        background: transparent;
        width: 60%;
        height: calc(100% - 32px);
        right: 0%;
        margin: 16px 16px 16px 0px;
        border-radius: 6px;
        background: var(--foreground-color);
        overflow: hidden;
        transition: right 0.4s ease,
            height 0.4s ease,
            border-radius 0.4s ease;
        will-change: right, height, margin;
    }

    .content_multilevel_menu .cm_list_container .cm_list {
        margin: 0;
        width: 100%;
    }

    /* footer{display: none;} */
}

/* Landscape MD */
@media screen and (orientation:landscape) and (min-width:1113px) and (max-width:1366px) {
    /*******
    * RESPONSIVE CLASSES
    *****/

    .ta_l-LS_MD {
        text-align: left;
    }

    .ta_r-LS_MD {
        text-align: right;
    }

    .ta_c-LS_MD {
        text-align: center;
    }

    .ta_j-LS_MD {
        text-align: justify;
    }

    /*  */
    .jc_l-LS_MD {
        justify-content: flex-start;
    }

    .jc_r-LS_MD {
        justify-content: flex-end;
    }

    .jc_c-LS_MD {
        justify-content: center;
    }

    .jc_s-LS_MD {
        justify-content: stretch;
    }

    /* DISPLAY TYPES */
    .display_none-LS_MD {
        display: none;
    }

    .display_block-LS_MD {
        display: block;
    }

    /*  */
    .display_grid_12-LS_MD {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-auto-rows: minmax(min-content, max-content);
        /* align-items: center; */
    }

    /* GRID ALIGN */
    .grid_align_t-LS_MD {
        align-items: start;
    }

    .grid_align_c-LS_MD {
        align-items: center;
    }

    .grid_align_b-LS_MD {
        align-items: end;
    }

    .grid_align_s-LS_MD {
        align-items: stretch;
    }

    /*  */
    .grid_gap_0-LS_MD {
        grid-gap: 0px;
    }

    .grid_gap_4-LS_MD {
        grid-gap: 4px;
    }

    .grid_gap_8-LS_MD {
        grid-gap: 8px;
    }

    .grid_gap_16-LS_MD {
        grid-gap: 16px;
    }

    .grid_gap_32-LS_MD {
        grid-gap: 32px;
    }

    /*  */
    /* GRID ROWS */
    .grid_row_1fr-LS_MD {
        grid-auto-rows: 1fr;
    }

    /* GRID SPAN */
    .grid_span_1-LS_MD,
    .grid_span_1-LS_MD .grid_block,
    .grid_block.grid_span_1-LS_MD {
        grid-column: auto / span 1;
    }

    .grid_span_2-LS_MD,
    .grid_span_2-LS_MD .grid_block,
    .grid_block.grid_span_2-LS_MD {
        grid-column: auto / span 2;
    }

    .grid_span_3-LS_MD,
    .grid_span_3-LS_MD .grid_block,
    .grid_block.grid_span_3-LS_MD {
        grid-column: auto / span 3;
    }

    .grid_span_4-LS_MD,
    .grid_span_4-LS_MD .grid_block,
    .grid_block.grid_span_4-LS_MD {
        grid-column: auto / span 4;
    }

    .grid_span_5-LS_MD,
    .grid_span_5-LS_MD .grid_block,
    .grid_block.grid_span_5-LS_MD {
        grid-column: auto / span 5;
    }

    .grid_span_6-LS_MD,
    .grid_span_6-LS_MD .grid_block,
    .grid_block.grid_span_6-LS_MD {
        grid-column: auto / span 6;
    }

    .grid_span_7-LS_MD,
    .grid_span_7-LS_MD .grid_block,
    .grid_block.grid_span_7-LS_MD {
        grid-column: auto / span 7;
    }

    .grid_span_8-LS_MD,
    .grid_span_8-LS_MD .grid_block,
    .grid_block.grid_span_8-LS_MD {
        grid-column: auto / span 8;
    }

    .grid_span_9-LS_MD,
    .grid_span_9-LS_MD .grid_block,
    .grid_block.grid_span_9-LS_MD {
        grid-column: auto / span 9;
    }

    .grid_span_10-LS_MD,
    .grid_span_10-LS_MD .grid_block,
    .grid_block.grid_span_10-LS_MD {
        grid-column: auto / span 10;
    }

    .grid_span_11-LS_MD,
    .grid_span_11-LS_MD .grid_block,
    .grid_block.grid_span_11-LS_MD {
        grid-column: auto / span 11;
    }

    .grid_span_12-LS_MD,
    .grid_span_12-LS_MD .grid_block,
    .grid_block.grid_span_12-LS_MD {
        grid-column: auto / span 12;
    }

    /*  */
    nav {
        z-index: 1000;
    }

    nav .header .mobile_nav {
        display: none;
    }

    nav .brand {
        width: 300px;
        padding: 0px 16px;
    }

    nav .header.dashboard .title {
        display: block;
        flex: 1;
        padding-left: 8px;
    }

    nav .header .title h1,
    nav .header.dashboard .title h1 {
        text-align: left;
        font-size: 22px;
    }

    nav .header .brand {
        display: block;
    }

    aside.menu {
        position: relative;
        top: 0;
        left: 0;
        overflow: auto;
        -webkit-overflow-scrolling: none;
        scroll-behavior: none;
        height: 100%;
        min-height: 100%;
        padding-bottom: 50px;
    }

    aside.menu:before {
        left: 0;
    }

    aside.menu li.profile {
        display: none;
    }

    .block.widget {
        padding: 12px;
    }

    .block.widget h3 {
        font-size: 20px;
        margin-bottom: 16px;
    }

    .block.widget .info h4 {
        font-size: 13px;
    }

    .block.widget .info p {
        font-size: 26px;
    }

    .block .widget_content .icon {
        width: 62px;
        max-width: 62px;
        max-height: 62px;
        padding: 12px;
        border-radius: 12px;
    }

    .client_stats .stats {
        font-size: 11px;
    }

    .connect_messages .cm_list,
    .content_multilevel_menu .cm_list,
    .content_multilevel_menu .cm_list_container {
        width: 40%;
    }

    .connect_messages .cm_chat_container,
    .content_multilevel_menu .cm_active_content_container {
        position: relative;
        background: transparent;
        width: 60%;
        height: calc(100% - 32px);
        right: 0%;
        margin: 16px 16px 16px 0px;
        border-radius: 6px;
        background: var(--foreground-color);
        overflow: hidden;
        transition: right 0.4s ease,
            height 0.4s ease,
            border-radius 0.4s ease;
        will-change: right, height, margin;
    }

    .content_multilevel_menu .cm_list_container .cm_list {
        margin: 0;
        width: 100%;
    }

    footer {
        display: none;
    }
}

/* Landscape LG */
@media screen and (orientation:landscape) and (min-width:1367px) {
    /*******
    * RESPONSIVE CLASSES
    *****/

    .ta_l-LS_LG {
        text-align: left;
    }

    .ta_r-LS_LG {
        text-align: right;
    }

    .ta_c-LS_LG {
        text-align: center;
    }

    .ta_j-LS_LG {
        text-align: justify;
    }

    /*  */
    .jc_l-LS_LG {
        justify-content: flex-start;
    }

    .jc_r-LS_LG {
        justify-content: flex-end;
    }

    .jc_c-LS_LG {
        justify-content: center;
    }

    .jc_s-LS_LG {
        justify-content: stretch;
    }

    /* DISPLAY TYPES */
    .display_none-LS_LG {
        display: none;
    }

    .display_block-LS_LG {
        display: block;
    }

    /*  */
    .display_grid_12-LS_LG {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-auto-rows: minmax(min-content, max-content);
        /* align-items: center; */
    }

    /* GRID ALIGN */
    .grid_align_t-LS_LG {
        align-items: start;
    }

    .grid_align_c-LS_LG {
        align-items: center;
    }

    .grid_align_b-LS_LG {
        align-items: end;
    }

    .grid_align_s-LS_LG {
        align-items: stretch;
    }

    /*  */
    .grid_gap_0-LS_LG {
        grid-gap: 0px;
    }

    .grid_gap_4-LS_LG {
        grid-gap: 4px;
    }

    .grid_gap_8-LS_LG {
        grid-gap: 8px;
    }

    .grid_gap_16-LS_LG {
        grid-gap: 16px;
    }

    .grid_gap_32-LS_LG {
        grid-gap: 32px;
    }

    /*  */
    /* GRID ROWS */
    .grid_row_1fr-LS_LG {
        grid-auto-rows: 1fr;
    }

    /* GRID SPAN */
    .grid_span_1-LS_LG,
    .grid_span_1-LS_LG .grid_block,
    .grid_block.grid_span_1-LS_LG {
        grid-column: auto / span 1;
    }

    .grid_span_2-LS_LG,
    .grid_span_2-LS_LG .grid_block,
    .grid_block.grid_span_2-LS_LG {
        grid-column: auto / span 2;
    }

    .grid_span_3-LS_LG,
    .grid_span_3-LS_LG .grid_block,
    .grid_block.grid_span_3-LS_LG {
        grid-column: auto / span 3;
    }

    .grid_span_4-LS_LG,
    .grid_span_4-LS_LG .grid_block,
    .grid_block.grid_span_4-LS_LG {
        grid-column: auto / span 4;
    }

    .grid_span_5-LS_LG,
    .grid_span_5-LS_LG .grid_block,
    .grid_block.grid_span_5-LS_LG {
        grid-column: auto / span 5;
    }

    .grid_span_6-LS_LG,
    .grid_span_6-LS_LG .grid_block,
    .grid_block.grid_span_6-LS_LG {
        grid-column: auto / span 6;
    }

    .grid_span_7-LS_LG,
    .grid_span_7-LS_LG .grid_block,
    .grid_block.grid_span_7-LS_LG {
        grid-column: auto / span 7;
    }

    .grid_span_8-LS_LG,
    .grid_span_8-LS_LG .grid_block,
    .grid_block.grid_span_8-LS_LG {
        grid-column: auto / span 8;
    }

    .grid_span_9-LS_LG,
    .grid_span_9-LS_LG .grid_block,
    .grid_block.grid_span_9-LS_LG {
        grid-column: auto / span 9;
    }

    .grid_span_10-LS_LG,
    .grid_span_10-LS_LG .grid_block,
    .grid_block.grid_span_10-LS_LG {
        grid-column: auto / span 10;
    }

    .grid_span_11-LS_LG,
    .grid_span_11-LS_LG .grid_block,
    .grid_block.grid_span_11-LS_LG {
        grid-column: auto / span 11;
    }

    .grid_span_12-LS_LG,
    .grid_span_12-LS_LG .grid_block,
    .grid_block.grid_span_12-LS_LG {
        grid-column: auto / span 12;
    }

    /*  */
    nav {
        z-index: 1000;
    }

    nav .header .mobile_nav {
        display: none;
    }

    nav .brand {
        width: 300px;
        padding: 0px 16px;
    }

    nav .header.dashboard .title {
        display: block;
        flex: 1;
        padding-left: 8px;
    }

    nav .header .title h1,
    nav .header.dashboard .title h1 {
        text-align: left;
        font-size: 22px;
    }

    nav .header .brand {
        display: block;
    }

    aside.menu {
        position: relative;
        top: 0;
        left: 0;
        overflow: auto;
        -webkit-overflow-scrolling: none;
        scroll-behavior: none;
        height: 100%;
        min-height: 100%;
        padding-bottom: 50px;
    }

    aside.menu:before {
        left: 0;
    }

    aside.menu li.profile {
        display: none;
    }

    .block.widget {
        padding: 16px;
    }

    .block.widget h3 {
        font-size: 20px;
        margin-bottom: 16px;
    }

    .block.widget .info h4 {
        font-size: 14px;
    }

    .block.widget .info p {
        font-size: 28px;
    }

    .block .widget_content .icon {
        width: 68px;
        max-width: 68px;
        max-height: 68px;
        padding: 15px;
        border-radius: 12px;
    }

    .client_stats .stats {
        font-size: 12px;
    }

    .connect_messages .cm_list,
    .content_multilevel_menu .cm_list,
    .content_multilevel_menu .cm_list_container {
        width: 30%;
    }

    .connect_messages .cm_chat_container,
    .content_multilevel_menu .cm_active_content_container {
        position: relative;
        background: transparent;
        width: 70%;
        height: calc(100% - 32px);
        right: 0%;
        margin: 16px 16px 16px 0px;
        border-radius: 6px;
        background: var(--foreground-color);
        overflow: hidden;
        transition: right 0.4s ease,
            height 0.4s ease,
            border-radius 0.4s ease;
        will-change: right, height, margin;
    }

    .content_multilevel_menu .cm_list_container .cm_list {
        margin: 0;
        width: 100%;
    }

    footer {
        display: none;
    }
}

/* CSS Mobile First for portrait mode */
@media screen and (orientation:portrait) {
    /*******
    * RESPONSIVE CLASSES
    *****/

    .ta_l-PT {
        text-align: left;
    }

    .ta_r-PT {
        text-align: right;
    }

    .ta_c-PT {
        text-align: center;
    }

    .ta_j-PT {
        text-align: justify;
    }

    /*  */
    .jc_l-PT {
        justify-content: flex-start;
    }

    .jc_r-PT {
        justify-content: flex-end;
    }

    .jc_c-PT {
        justify-content: center;
    }

    .jc_s-PT {
        justify-content: stretch;
    }

    /* DISPLAY TYPES */
    .display_none-PT {
        display: none;
    }

    .display_block-PT {
        display: block;
    }

    /*  */
    .display_grid_12-PT {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-auto-rows: minmax(min-content, max-content);
        /* align-items: center; */
    }

    /* GRID ALIGN */
    .grid_align_t-PT {
        align-items: start;
    }

    .grid_align_c-PT {
        align-items: center;
    }

    .grid_align_b-PT {
        align-items: end;
    }

    .grid_align_s-PT {
        align-items: stretch;
    }

    /*  */
    .grid_gap_0-PT {
        grid-gap: 0px;
    }

    .grid_gap_4-PT {
        grid-gap: 4px;
    }

    .grid_gap_8-PT {
        grid-gap: 8px;
    }

    .grid_gap_16-PT {
        grid-gap: 16px;
    }

    .grid_gap_32-PT {
        grid-gap: 32px;
    }

    /*  */
    /* GRID ROWS */
    .grid_row_1fr-PT {
        grid-auto-rows: 1fr;
    }

    /* GRID SPAN */
    .grid_span_1-PT,
    .grid_span_1-PT .grid_block,
    .grid_block.grid_span_1-PT {
        grid-column: auto / span 1;
    }

    .grid_span_2-PT,
    .grid_span_2-PT .grid_block,
    .grid_block.grid_span_2-PT {
        grid-column: auto / span 2;
    }

    .grid_span_3-PT,
    .grid_span_3-PT .grid_block,
    .grid_block.grid_span_3-PT {
        grid-column: auto / span 3;
    }

    .grid_span_4-PT,
    .grid_span_4-PT .grid_block,
    .grid_block.grid_span_4-PT {
        grid-column: auto / span 4;
    }

    .grid_span_5-PT,
    .grid_span_5-PT .grid_block,
    .grid_block.grid_span_5-PT {
        grid-column: auto / span 5;
    }

    .grid_span_6-PT,
    .grid_span_6-PT .grid_block,
    .grid_block.grid_span_6-PT {
        grid-column: auto / span 6;
    }

    .grid_span_7-PT,
    .grid_span_7-PT .grid_block,
    .grid_block.grid_span_7-PT {
        grid-column: auto / span 7;
    }

    .grid_span_8-PT,
    .grid_span_8-PT .grid_block,
    .grid_block.grid_span_8-PT {
        grid-column: auto / span 8;
    }

    .grid_span_9-PT,
    .grid_span_9-PT .grid_block,
    .grid_block.grid_span_9-PT {
        grid-column: auto / span 9;
    }

    .grid_span_10-PT,
    .grid_span_10-PT .grid_block,
    .grid_block.grid_span_10-PT {
        grid-column: auto / span 10;
    }

    .grid_span_11-PT,
    .grid_span_11-PT .grid_block,
    .grid_block.grid_span_11-PT {
        grid-column: auto / span 11;
    }

    .grid_span_12-PT,
    .grid_span_12-PT .grid_block,
    .grid_block.grid_span_12-PT {
        grid-column: auto / span 12;
    }
}

@media screen {
    .test {
        color: yellow;
    }
}

/* Portrait XXS */
/* For small phones eg.: iPhone 5 */
@media screen and (orientation:portrait) and (max-height: 666px) {
    /*******
    * RESPONSIVE CLASSES
    *****/

    .ta_l-PT_XXS {
        text-align: left;
    }

    .ta_r-PT_XXS {
        text-align: right;
    }

    .ta_c-PT_XXS {
        text-align: center;
    }

    .ta_j-PT_XXS {
        text-align: justify;
    }

    /*  */
    .jc_l-PT_XXS {
        justify-content: flex-start;
    }

    .jc_r-PT_XXS {
        justify-content: flex-end;
    }

    .jc_c-PT_XXS {
        justify-content: center;
    }

    .jc_s-PT_XXS {
        justify-content: stretch;
    }

    /* DISPLAY TYPES */
    .display_none-PT_XXS {
        display: none;
    }

    .display_block-PT_XXS {
        display: block;
    }

    /*  */
    .display_grid_12-PT_XXS {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-auto-rows: minmax(min-content, max-content);
        /* align-items: center; */
    }

    /* GRID ALIGN */
    .grid_align_t-PT_XXS {
        align-items: start;
    }

    .grid_align_c-PT_XXS {
        align-items: center;
    }

    .grid_align_b-PT_XXS {
        align-items: end;
    }

    .grid_align_s-PT_XXS {
        align-items: stretch;
    }

    /*  */
    .grid_gap_0-PT_XXS {
        grid-gap: 0px;
    }

    .grid_gap_4-PT_XXS {
        grid-gap: 4px;
    }

    .grid_gap_8-PT_XXS {
        grid-gap: 8px;
    }

    .grid_gap_16-PT_XXS {
        grid-gap: 16px;
    }

    .grid_gap_32-PT_XXS {
        grid-gap: 32px;
    }

    /*  */
    /* GRID ROWS */
    .grid_row_1fr-PT_XXS {
        grid-auto-rows: 1fr;
    }

    /* GRID SPAN */
    .grid_span_1-PT_XXS,
    .grid_span_1-PT_XXS .grid_block,
    .grid_block.grid_span_1-PT_XXS {
        grid-column: auto / span 1;
    }

    .grid_span_2-PT_XXS,
    .grid_span_2-PT_XXS .grid_block,
    .grid_block.grid_span_2-PT_XXS {
        grid-column: auto / span 2;
    }

    .grid_span_3-PT_XXS,
    .grid_span_3-PT_XXS .grid_block,
    .grid_block.grid_span_3-PT_XXS {
        grid-column: auto / span 3;
    }

    .grid_span_4-PT_XXS,
    .grid_span_4-PT_XXS .grid_block,
    .grid_block.grid_span_4-PT_XXS {
        grid-column: auto / span 4;
    }

    .grid_span_5-PT_XXS,
    .grid_span_5-PT_XXS .grid_block,
    .grid_block.grid_span_5-PT_XXS {
        grid-column: auto / span 5;
    }

    .grid_span_6-PT_XXS,
    .grid_span_6-PT_XXS .grid_block,
    .grid_block.grid_span_6-PT_XXS {
        grid-column: auto / span 6;
    }

    .grid_span_7-PT_XXS,
    .grid_span_7-PT_XXS .grid_block,
    .grid_block.grid_span_7-PT_XXS {
        grid-column: auto / span 7;
    }

    .grid_span_8-PT_XXS,
    .grid_span_8-PT_XXS .grid_block,
    .grid_block.grid_span_8-PT_XXS {
        grid-column: auto / span 8;
    }

    .grid_span_9-PT_XXS,
    .grid_span_9-PT_XXS .grid_block,
    .grid_block.grid_span_9-PT_XXS {
        grid-column: auto / span 9;
    }

    .grid_span_10-PT_XXS,
    .grid_span_10-PT_XXS .grid_block,
    .grid_block.grid_span_10-PT_XXS {
        grid-column: auto / span 10;
    }

    .grid_span_11-PT_XXS,
    .grid_span_11-PT_XXS .grid_block,
    .grid_block.grid_span_11-PT_XXS {
        grid-column: auto / span 11;
    }

    .grid_span_12-PT_XXS,
    .grid_span_12-PT_XXS .grid_block,
    .grid_block.grid_span_12-PT_XXS {
        grid-column: auto / span 12;
    }

    /*  */
    .client_stats .client_name.first,
    .client_stats .client_name.last {
        display: block;
    }

    .client_stats .image {
        width: 20px;
        height: 20px;
    }

    .button_menu {
        padding: 0px 8px;
        font-size: 12px;
    }

    .button_menu .select_custom_label .icon {
        margin: 0;
        margin-right: 8px;
    }

    .client_stats .stats {
        font-size: 10px;
    }

    .client_stats .client_name {
        font-size: 11px;
    }

    .wrapper_header .info {
        font-size: 8px;
    }

    .block .widget_content .icon {
        width: 40px;
        height: auto;
        max-width: 40px;
        max-height: 40px;
    }

    .block .widget_content .icon {
        padding: 8px;
    }

    .client_stats .info_container .icon {
        width: 20px;
        padding: 4px 6px;
    }

    .client_finance {
        border-bottom: 1px solid #000;
        padding-bottom: 8px;
        margin-bottom: 4px;
    }

    .stats_action {
        position: absolute;
        top: 8px;
        right: 4px;
        grid-column: auto;
    }

    .action_reveal {
        height: 50px;
        border-radius: 6px;
        margin-right: 3px;
    }

    .flex_widget .fw_thumbnail {
        min-width: 100px;
    }

    .grid_list .full_name_container,
    .client_stats .client_name_container {
        max-width: 200px;
    }

    .reports {
        grid-template-columns: 100px 1fr;
    }

    .calendar_appointment {
        line-height: 1;
    }

    /*  */
    .select_custom_title,
    .dropdown_custom_title {
        background: var(--background-color);
        border-radius: 6px 6px 0px 0px;
    }

    .select_custom_wrapper,
    .select_custom_wrapper.pos_l,
    .select_custom_wrapper.pos_r,
    .select_custom_wrapper.pos_c,
    .dropdown_custom_wrapper,
    .dropdown_custom_wrapper.pos_l,
    .dropdown_custom_wrapper.pos_r,
    .dropdown_custom_wrapper.pos_c {
        position: fixed;
        width: calc(100% - 16px);
        min-width: calc(100vw - 16px);
        margin: 0px 8px;
        /* height:50%; */
        max-height: 80%;
        top: 50%;
        right: auto;
        left: 0px;
        transform: translateY(-50%);
    }

    .select_custom.open:after,
    .dropdown_custom.open:after {
        content: "";
        z-index: 300;
        width: 100%;
        height: 100%;
        position: fixed;
        background: var(--modal-background);
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .select_custom_wrapper li:last-child,
    .dropdown_custom_wrapper li:last-child {
        border-radius: 0px;
    }

    .cal_day {
        min-width: 30.4vw;
    }

    .cal_controls_date {
        justify-content: space-between;
    }
}

/* Portrait XS */
@media screen and (orientation:portrait) and (min-height: 667px) and (max-height:926px) {
    /*******
    * RESPONSIVE CLASSES
    *****/

    .ta_l-PT_XS {
        text-align: left;
    }

    .ta_r-PT_XS {
        text-align: right;
    }

    .ta_c-PT_XS {
        text-align: center;
    }

    .ta_j-PT_XS {
        text-align: justify;
    }

    /*  */
    .jc_l-PT_XS {
        justify-content: flex-start;
    }

    .jc_r-PT_XS {
        justify-content: flex-end;
    }

    .jc_c-PT_XS {
        justify-content: center;
    }

    .jc_s-PT_XS {
        justify-content: stretch;
    }

    /* DISPLAY TYPES */
    .display_none-PT_XS {
        display: none;
    }

    .display_block-PT_XS {
        display: block;
    }

    /*  */
    .display_grid_12-PT_XS {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-auto-rows: minmax(min-content, max-content);
        /* align-items: center; */
    }

    /* GRID ALIGN */
    .grid_align_t-PT_XS {
        align-items: start;
    }

    .grid_align_c-PT_XS {
        align-items: center;
    }

    .grid_align_b-PT_XS {
        align-items: end;
    }

    .grid_align_s-PT_XS {
        align-items: stretch;
    }

    /*  */
    .grid_gap_0-PT_XS {
        grid-gap: 0px;
    }

    .grid_gap_4-PT_XS {
        grid-gap: 4px;
    }

    .grid_gap_8-PT_XS {
        grid-gap: 8px;
    }

    .grid_gap_16-PT_XS {
        grid-gap: 16px;
    }

    .grid_gap_32-PT_XS {
        grid-gap: 32px;
    }

    /*  */
    /* GRID ROWS */
    .grid_row_1fr-PT_XS {
        grid-auto-rows: 1fr;
    }

    /* GRID SPAN */
    .grid_span_1-PT_XS,
    .grid_span_1-PT_XS .grid_block,
    .grid_block.grid_span_1-PT_XS {
        grid-column: auto / span 1;
    }

    .grid_span_2-PT_XS,
    .grid_span_2-PT_XS .grid_block,
    .grid_block.grid_span_2-PT_XS {
        grid-column: auto / span 2;
    }

    .grid_span_3-PT_XS,
    .grid_span_3-PT_XS .grid_block,
    .grid_block.grid_span_3-PT_XS {
        grid-column: auto / span 3;
    }

    .grid_span_4-PT_XS,
    .grid_span_4-PT_XS .grid_block,
    .grid_block.grid_span_4-PT_XS {
        grid-column: auto / span 4;
    }

    .grid_span_5-PT_XS,
    .grid_span_5-PT_XS .grid_block,
    .grid_block.grid_span_5-PT_XS {
        grid-column: auto / span 5;
    }

    .grid_span_6-PT_XS,
    .grid_span_6-PT_XS .grid_block,
    .grid_block.grid_span_6-PT_XS {
        grid-column: auto / span 6;
    }

    .grid_span_7-PT_XS,
    .grid_span_7-PT_XS .grid_block,
    .grid_block.grid_span_7-PT_XS {
        grid-column: auto / span 7;
    }

    .grid_span_8-PT_XS,
    .grid_span_8-PT_XS .grid_block,
    .grid_block.grid_span_8-PT_XS {
        grid-column: auto / span 8;
    }

    .grid_span_9-PT_XS,
    .grid_span_9-PT_XS .grid_block,
    .grid_block.grid_span_9-PT_XS {
        grid-column: auto / span 9;
    }

    .grid_span_10-PT_XS,
    .grid_span_10-PT_XS .grid_block,
    .grid_block.grid_span_10-PT_XS {
        grid-column: auto / span 10;
    }

    .grid_span_11-PT_XS,
    .grid_span_11-PT_XS .grid_block,
    .grid_block.grid_span_11-PT_XS {
        grid-column: auto / span 11;
    }

    .grid_span_12-PT_XS,
    .grid_span_12-PT_XS .grid_block,
    .grid_block.grid_span_12-PT_XS {
        grid-column: auto / span 12;
    }

    /*  */
    .client_stats .client_name.first,
    .client_stats .client_name.last {
        display: block;
    }

    .client_finance {
        border-bottom: 1px solid #000;
        padding-bottom: 8px;
        margin-bottom: 4px;
    }

    .stats_action {
        position: absolute;
        top: 8px;
        right: 4px;
        grid-column: auto;
    }

    .action_reveal {
        height: 50px;
        border-radius: 6px;
        margin-right: 3px;
    }

    .flex_widget .fw_thumbnail {
        min-width: 100px;
    }

    .grid_list .full_name_container,
    .client_stats .client_name_container {
        max-width: 250px;
    }

    .reports {
        grid-template-columns: 100px 1fr;
    }

    .calendar_appointment {
        line-height: 1;
    }

    /*  */
    .select_custom_title,
    .dropdown_custom_title {
        background: var(--background-color);
        border-radius: 6px 6px 0px 0px;
    }

    .select_custom_wrapper,
    .select_custom_wrapper.pos_l,
    .select_custom_wrapper.pos_r,
    .select_custom_wrapper.pos_c,
    .dropdown_custom_wrapper,
    .dropdown_custom_wrapper.pos_l,
    .dropdown_custom_wrapper.pos_r,
    .dropdown_custom_wrapper.pos_c {
        position: fixed;
        width: calc(100% - 16px);
        min-width: calc(100vw - 16px);
        margin: 0px 8px;
        /* height:50%; */
        max-height: 80%;
        top: 50%;
        right: auto;
        left: 0px;
        transform: translateY(-50%);
    }

    .select_custom.open:after,
    .dropdown_custom.open:after {
        content: "";
        z-index: 300;
        width: 100%;
        height: 100%;
        position: fixed;
        background: var(--modal-background);
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .select_custom_wrapper li:last-child,
    .dropdown_custom_wrapper li:last-child {
        border-radius: 0px;
    }

    .cal_day {
        min-width: 30.4vw;
    }

    .cal_controls_date {
        justify-content: space-between;
    }
}

/* Portrait SM */
@media screen and (orientation:portrait) and (min-height:927px) and (max-height:1112px) {
    /*******
    * RESPONSIVE CLASSES
    *****/

    .ta_l-PT_SM {
        text-align: left;
    }

    .ta_r-PT_SM {
        text-align: right;
    }

    .ta_c-PT_SM {
        text-align: center;
    }

    .ta_j-PT_SM {
        text-align: justify;
    }

    /*  */
    .jc_l-PT_SM {
        justify-content: flex-start;
    }

    .jc_r-PT_SM {
        justify-content: flex-end;
    }

    .jc_c-PT_SM {
        justify-content: center;
    }

    .jc_s-PT_SM {
        justify-content: stretch;
    }

    /* DISPLAY TYPES */
    .display_none-PT_SM {
        display: none;
    }

    .display_block-PT_SM {
        display: block;
    }

    /*  */
    .display_grid_12-PT_SM {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-auto-rows: minmax(min-content, max-content);
        /* align-items: center; */
    }

    /* GRID ALIGN */
    .grid_align_t-PT_SM {
        align-items: start;
    }

    .grid_align_c-PT_SM {
        align-items: center;
    }

    .grid_align_b-PT_SM {
        align-items: end;
    }

    .grid_align_s-PT_SM {
        align-items: stretch;
    }

    /*  */
    .grid_gap_0-PT_SM {
        grid-gap: 0px;
    }

    .grid_gap_4-PT_SM {
        grid-gap: 4px;
    }

    .grid_gap_8-PT_SM {
        grid-gap: 8px;
    }

    .grid_gap_16-PT_SM {
        grid-gap: 16px;
    }

    .grid_gap_32-PT_SM {
        grid-gap: 32px;
    }

    /*  */
    /* GRID ROWS */
    .grid_row_1fr-PT_SM {
        grid-auto-rows: 1fr;
    }

    /* GRID SPAN */
    .grid_span_1-PT_SM,
    .grid_span_1-PT_SM .grid_block,
    .grid_block.grid_span_1-PT_SM {
        grid-column: auto / span 1;
    }

    .grid_span_2-PT_SM,
    .grid_span_2-PT_SM .grid_block,
    .grid_block.grid_span_2-PT_SM {
        grid-column: auto / span 2;
    }

    .grid_span_3-PT_SM,
    .grid_span_3-PT_SM .grid_block,
    .grid_block.grid_span_3-PT_SM {
        grid-column: auto / span 3;
    }

    .grid_span_4-PT_SM,
    .grid_span_4-PT_SM .grid_block,
    .grid_block.grid_span_4-PT_SM {
        grid-column: auto / span 4;
    }

    .grid_span_5-PT_SM,
    .grid_span_5-PT_SM .grid_block,
    .grid_block.grid_span_5-PT_SM {
        grid-column: auto / span 5;
    }

    .grid_span_6-PT_SM,
    .grid_span_6-PT_SM .grid_block,
    .grid_block.grid_span_6-PT_SM {
        grid-column: auto / span 6;
    }

    .grid_span_7-PT_SM,
    .grid_span_7-PT_SM .grid_block,
    .grid_block.grid_span_7-PT_SM {
        grid-column: auto / span 7;
    }

    .grid_span_8-PT_SM,
    .grid_span_8-PT_SM .grid_block,
    .grid_block.grid_span_8-PT_SM {
        grid-column: auto / span 8;
    }

    .grid_span_9-PT_SM,
    .grid_span_9-PT_SM .grid_block,
    .grid_block.grid_span_9-PT_SM {
        grid-column: auto / span 9;
    }

    .grid_span_10-PT_SM,
    .grid_span_10-PT_SM .grid_block,
    .grid_block.grid_span_10-PT_SM {
        grid-column: auto / span 10;
    }

    .grid_span_11-PT_SM,
    .grid_span_11-PT_SM .grid_block,
    .grid_block.grid_span_11-PT_SM {
        grid-column: auto / span 11;
    }

    .grid_span_12-PT_SM,
    .grid_span_12-PT_SM .grid_block,
    .grid_block.grid_span_12-PT_SM {
        grid-column: auto / span 12;
    }

    /*  */
    .block.widget {
        padding: 10px;
    }

    .block.widget h3 {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .block.widget .info h4 {
        font-size: 12px;
    }

    .block.widget .info p {
        font-size: 18px;
    }

    .block .widget_content .icon {
        width: 50px;
        max-width: 50px;
        max-height: 50px;
        padding: 10px;
        border-radius: 8px;
    }

    .client_stats .stats {
        font-size: 11px;
    }
}

/* Portrait MD */
@media screen and (orientation:portrait) and (min-height:1113px) and (max-height:1366px) {
    /*******
    * RESPONSIVE CLASSES
    *****/

    .ta_l-PT_MD {
        text-align: left;
    }

    .ta_r-PT_MD {
        text-align: right;
    }

    .ta_c-PT_MD {
        text-align: center;
    }

    .ta_j-PT_MD {
        text-align: justify;
    }

    /*  */
    .jc_l-PT_MD {
        justify-content: flex-start;
    }

    .jc_r-PT_MD {
        justify-content: flex-end;
    }

    .jc_c-PT_MD {
        justify-content: center;
    }

    .jc_s-PT_MD {
        justify-content: stretch;
    }

    /* DISPLAY TYPES */
    .display_none-PT_MD {
        display: none;
    }

    .display_block-PT_MD {
        display: block;
    }

    /*  */
    .display_grid_12-PT_MD {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-auto-rows: minmax(min-content, max-content);
        /* align-items: center; */
    }

    /* GRID ALIGN */
    .grid_align_t-PT_MD {
        align-items: start;
    }

    .grid_align_c-PT_MD {
        align-items: center;
    }

    .grid_align_b-PT_MD {
        align-items: end;
    }

    .grid_align_s-PT_MD {
        align-items: stretch;
    }

    /*  */
    .grid_gap_0-PT_MD {
        grid-gap: 0px;
    }

    .grid_gap_4-PT_MD {
        grid-gap: 4px;
    }

    .grid_gap_8-PT_MD {
        grid-gap: 8px;
    }

    .grid_gap_16-PT_MD {
        grid-gap: 16px;
    }

    .grid_gap_32-PT_MD {
        grid-gap: 32px;
    }

    /*  */
    /* GRID ROWS */
    .grid_row_1fr-PT_MD {
        grid-auto-rows: 1fr;
    }

    /* GRID SPAN */
    .grid_span_1-PT_MD,
    .grid_span_1-PT_MD .grid_block,
    .grid_block.grid_span_1-PT_MD {
        grid-column: auto / span 1;
    }

    .grid_span_2-PT_MD,
    .grid_span_2-PT_MD .grid_block,
    .grid_block.grid_span_2-PT_MD {
        grid-column: auto / span 2;
    }

    .grid_span_3-PT_MD,
    .grid_span_3-PT_MD .grid_block,
    .grid_block.grid_span_3-PT_MD {
        grid-column: auto / span 3;
    }

    .grid_span_4-PT_MD,
    .grid_span_4-PT_MD .grid_block,
    .grid_block.grid_span_4-PT_MD {
        grid-column: auto / span 4;
    }

    .grid_span_5-PT_MD,
    .grid_span_5-PT_MD .grid_block,
    .grid_block.grid_span_5-PT_MD {
        grid-column: auto / span 5;
    }

    .grid_span_6-PT_MD,
    .grid_span_6-PT_MD .grid_block,
    .grid_block.grid_span_6-PT_MD {
        grid-column: auto / span 6;
    }

    .grid_span_7-PT_MD,
    .grid_span_7-PT_MD .grid_block,
    .grid_block.grid_span_7-PT_MD {
        grid-column: auto / span 7;
    }

    .grid_span_8-PT_MD,
    .grid_span_8-PT_MD .grid_block,
    .grid_block.grid_span_8-PT_MD {
        grid-column: auto / span 8;
    }

    .grid_span_9-PT_MD,
    .grid_span_9-PT_MD .grid_block,
    .grid_block.grid_span_9-PT_MD {
        grid-column: auto / span 9;
    }

    .grid_span_10-PT_MD,
    .grid_span_10-PT_MD .grid_block,
    .grid_block.grid_span_10-PT_MD {
        grid-column: auto / span 10;
    }

    .grid_span_11-PT_MD,
    .grid_span_11-PT_MD .grid_block,
    .grid_block.grid_span_11-PT_MD {
        grid-column: auto / span 11;
    }

    .grid_span_12-PT_MD,
    .grid_span_12-PT_MD .grid_block,
    .grid_block.grid_span_12-PT_MD {
        grid-column: auto / span 12;
    }

    /*  */
    nav {
        z-index: 1000;
    }

    nav .header .mobile_nav {
        display: none;
    }

    nav .brand {
        width: 300px;
        padding: 0px 16px;
    }

    nav .header.dashboard .title {
        display: block;
        flex: 1;
        padding-left: 8px;
    }

    nav .header .title h1,
    nav .header.dashboard .title h1 {
        text-align: left;
        font-size: 22px;
    }

    nav .header .brand {
        display: block;
    }

    aside.menu {
        position: relative;
        top: 0;
        left: 0;
        overflow: auto;
        -webkit-overflow-scrolling: none;
        scroll-behavior: none;
        height: auto;
        min-height: 100%;
        padding-bottom: 50px;
    }

    aside.menu:before {
        left: 0;
    }

    aside.menu li.profile {
        display: none;
    }

    .block.widget {
        padding: 12px;
    }

    .block.widget h3 {
        font-size: 20px;
        margin-bottom: 16px;
    }

    .block.widget .info h4 {
        font-size: 13px;
    }

    .block.widget .info p {
        font-size: 26px;
    }

    .block .widget_content .icon {
        width: 62px;
        max-width: 62px;
        max-height: 62px;
        padding: 12px;
        border-radius: 12px;
    }

    .client_stats .stats {
        font-size: 11px;
    }

    .stats_action {
        position: absolute;
        top: 8px;
        right: 4px;
        grid-column: auto;
    }

    .action_reveal {
        height: 50px;
        border-radius: 6px;
        margin-right: 3px;
    }

    footer {
        display: none;
    }
}

/* Portrait LG */
@media screen and (orientation:portrait) and (min-height:1367px) {
    /*******
    * RESPONSIVE CLASSES
    *****/

    .ta_l-PT_LG {
        text-align: left;
    }

    .ta_r-PT_LG {
        text-align: right;
    }

    .ta_c-PT_LG {
        text-align: center;
    }

    .ta_j-PT_LG {
        text-align: justify;
    }

    /*  */
    .jc_l-PT_LG {
        justify-content: flex-start;
    }

    .jc_r-PT_LG {
        justify-content: flex-end;
    }

    .jc_c-PT_LG {
        justify-content: center;
    }

    .jc_s-PT_LG {
        justify-content: stretch;
    }

    /* DISPLAY TYPES */
    .display_none-PT_LG {
        display: none;
    }

    .display_block-PT_LG {
        display: block;
    }

    /*  */
    .display_grid_12-PT_LG {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-auto-rows: minmax(min-content, max-content);
        /* align-items: center; */
    }

    /* GRID ALIGN */
    .grid_align_t-PT_LG {
        align-items: start;
    }

    .grid_align_c-PT_LG {
        align-items: center;
    }

    .grid_align_b-PT_LG {
        align-items: end;
    }

    .grid_align_s-PT_LG {
        align-items: stretch;
    }

    /*  */
    .grid_gap_0-PT_LG {
        grid-gap: 0px;
    }

    .grid_gap_4-PT_LG {
        grid-gap: 4px;
    }

    .grid_gap_8-PT_LG {
        grid-gap: 8px;
    }

    .grid_gap_16-PT_LG {
        grid-gap: 16px;
    }

    .grid_gap_32-PT_LG {
        grid-gap: 32px;
    }

    /*  */
    /* GRID ROWS */
    .grid_row_1fr-PT_LG {
        grid-auto-rows: 1fr;
    }

    /* GRID SPAN */
    .grid_span_1-PT_LG,
    .grid_span_1-PT_LG .grid_block,
    .grid_block.grid_span_1-PT_LG {
        grid-column: auto / span 1;
    }

    .grid_span_2-PT_LG,
    .grid_span_2-PT_LG .grid_block,
    .grid_block.grid_span_2-PT_LG {
        grid-column: auto / span 2;
    }

    .grid_span_3-PT_LG,
    .grid_span_3-PT_LG .grid_block,
    .grid_block.grid_span_3-PT_LG {
        grid-column: auto / span 3;
    }

    .grid_span_4-PT_LG,
    .grid_span_4-PT_LG .grid_block,
    .grid_block.grid_span_4-PT_LG {
        grid-column: auto / span 4;
    }

    .grid_span_5-PT_LG,
    .grid_span_5-PT_LG .grid_block,
    .grid_block.grid_span_5-PT_LG {
        grid-column: auto / span 5;
    }

    .grid_span_6-PT_LG,
    .grid_span_6-PT_LG .grid_block,
    .grid_block.grid_span_6-PT_LG {
        grid-column: auto / span 6;
    }

    .grid_span_7-PT_LG,
    .grid_span_7-PT_LG .grid_block,
    .grid_block.grid_span_7-PT_LG {
        grid-column: auto / span 7;
    }

    .grid_span_8-PT_LG,
    .grid_span_8-PT_LG .grid_block,
    .grid_block.grid_span_8-PT_LG {
        grid-column: auto / span 8;
    }

    .grid_span_9-PT_LG,
    .grid_span_9-PT_LG .grid_block,
    .grid_block.grid_span_9-PT_LG {
        grid-column: auto / span 9;
    }

    .grid_span_10-PT_LG,
    .grid_span_10-PT_LG .grid_block,
    .grid_block.grid_span_10-PT_LG {
        grid-column: auto / span 10;
    }

    .grid_span_11-PT_LG,
    .grid_span_11-PT_LG .grid_block,
    .grid_block.grid_span_11-PT_LG {
        grid-column: auto / span 11;
    }

    .grid_span_12-PT_LG,
    .grid_span_12-PT_LG .grid_block,
    .grid_block.grid_span_12-PT_LG {
        grid-column: auto / span 12;
    }

    /*  */
    nav {
        z-index: 1000;
    }

    nav .header .mobile_nav {
        display: none;
    }

    nav .brand {
        width: 300px;
        padding: 0px 16px;
    }

    nav .header.dashboard .title {
        display: block;
        flex: 1;
        padding-left: 8px;
    }

    nav .header .title h1,
    nav .header.dashboard .title h1 {
        text-align: left;
        font-size: 22px;
    }

    nav .header .brand {
        display: block;
    }

    aside.menu {
        position: relative;
        top: 0;
        left: 0;
        overflow: auto;
        -webkit-overflow-scrolling: none;
        scroll-behavior: none;
        height: auto;
        min-height: 100%;
        padding-bottom: 50px;
    }

    aside.menu:before {
        left: 0;
    }

    aside.menu li.profile {
        display: none;
    }

    .block.widget {
        padding: 16px;
    }

    .block.widget h3 {
        font-size: 20px;
        margin-bottom: 16px;
    }

    .block.widget .info h4 {
        font-size: 14px;
    }

    .block.widget .info p {
        font-size: 28px;
    }

    .block .widget_content .icon {
        width: 68px;
        max-width: 68px;
        max-height: 68px;
        padding: 15px;
        border-radius: 12px;
    }

    .client_stats .stats {
        font-size: 14px;
    }

    footer {
        display: none;
    }
}

.fn_click {
    cursor: pointer;
}

/* FM Styles */
.admin_user_name_container {
    padding-left: 8px;
    flex: 1;
    text-align: left;
}

.admin_user_type_container {
    padding-left: 0px;
    font-size: 10px;
    flex: 1;
    text-align: left;
}

.admin_user_name {
    display: inline-block;
    text-align: left;
    font-weight: bold;
    line-height: 1.2;
    font-size: 13px;
}

.admin_user {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start
}

.admin_users .info {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    font-size: 13px;
}

.admin_users .icons {
    width: 16px;
    font-size: 0;
    color: #666;
    background: transparent;
    align-self: flex-start;
}

.admin_users .info_container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.admin_users .info_container .icon {
    background: transparent;
    width: 38px;
    padding: 4px 14px;
    font-size: 0;
    color: #666;
}

.admin_users .image {
    width: 38px;
    height: 38px;
    border-radius: 100px;
    overflow: hidden;
}

.admin_users .info a {
    color: inherit;
    text-decoration: none;
}

.divider {
    padding: 10px 0px;
}

.divider .line {
    height: 1px;
    box-shadow: 1px 0px 1px black;
}

.action_icons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    font-size: 13px;
}

.action_icons .icon {
    width: 20px;
    font-size: 0;
    color: #666;
    background: transparent;
    align-self: flex-start;
}

.input_switch {
    display: inline-block;
    cursor: pointer;
    width: 45px;
}

.input_switch label {
    cursor: pointer;
}

.input_switch input {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    opacity: 0;
}

.input_switch_handle {
    position: relative;
    display: block;
    width: 44px;
    height: 22px;
    transition: .4s ease;
    background: var(--switch-background);
    border-radius: 100px;
    border: 1px solid var(--switch-border);
}

.input_switch_handle:before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    transition: .4s ease;
    border-radius: 100px;
    background: var(--switch-border);
    box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5);
}

.input_switch input:checked~.input_switch_handle {
    background: var(--switch-active-background);
    border: 1px solid var(--switch-active-border);
}

.input_switch input:checked~.input_switch_handle:before {
    left: 24px;
    background: var(--color-white);
}

.no_scroll {
    overflow: hidden;
}

.scroll {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

.scroll_y_snap {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
}

.scroll_x_snap {
    overflow-y: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
}

.scroll_all {
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

.scroll_snap_start {
    scroll-snap-align: start;
}

.scroll_snap_end {
    scroll-snap-align: end;
}

.loading_icon .loader-path {
    stroke: var(--loader-color);
    stroke-width: 4;
}

.circular-loader {
    -webkit-animation: rotate 2s linear infinite;
    animation: rotate 2s linear infinite;
    height: inherit;
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    width: inherit;
    position: relative;
    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: var(--loader-color);
    }

    40% {
        stroke: var(--loader-color);
    }

    66% {
        stroke: var(--loader-color);
    }

    80%,
    90% {
        stroke: var(--loader-color);
    }
}

@keyframes color {
    0% {
        stroke: var(--loader-color);
    }

    40% {
        stroke: var(--loader-color);
    }

    66% {
        stroke: var(--loader-color);
    }

    80%,
    90% {
        stroke: var(--loader-color);
    }
}

.hidden {
    display: none;
}

.icon_cc {
    width: 38px;
    font-size: 0;
}

.circle-wrap {
    width: 100px;
    height: 100px;
    background: var(--foreground-offset-color);
    border-radius: 50%;
}

.circle-wrap .circle .mask,
.circle-wrap .circle .fill {
    width: 100px;
    height: 100px;
    position: absolute;
    border-radius: 50%;
}

.circle-wrap .circle .mask {
    clip: rect(0px, 100px, 100px, 50px);
}

.circle-wrap .circle .mask .fill {
    clip: rect(0px, 50px, 100px, 0px);
    background-color: var(--color-bar-yellow);
}

.positive .circle-wrap .circle .mask .fill {
    background-color: var(--color-bar-green);
}

.negative .circle-wrap .circle .mask .fill {
    background-color: var(--color-bar-red);
}

.circle-wrap .circle .mask.full,
.circle-wrap .circle .fill {
    animation: fill ease-in-out 1.5s;
    transform: rotate(180deg);
}

@keyframes fill {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(180deg);
    }
}

.circle-wrap .inside-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--background-color);
    line-height: 0.7;
    text-align: center;
    margin-top: 10px;
    margin-left: 10px;
    position: absolute;
    z-index: 100;
    font-weight: bold;
    font-size: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.circle-wrap .inside-circle small {
    font-size: 10px;
}

.dash_widget_progress_bar_group {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.dash_widget_progress_bar_container {
    padding: 16px;
    width: 100%;
}

.dash_widget_progress_bar_container h4 {
    font-size: 12px;
    margin-bottom: 2px;
}

.dash_widget_progress_bar {
    width: 100%;
}

.dash_widget_progress_bar .start {
    border-radius: 4px 0px 0px 4px;
}

.dash_widget_progress_bar .goal {
    border-radius: 0px 4px 4px 0px;
}

.goal_info {
    margin-bottom: 16px;
}

.dash_widget_progress_bar_container .goal_info h4 {
    color: var(--label-dim-color);
}

.progress_bar_container {
    flex: 1;
    font-size: 14px;
    height: auto;
    font-weight: bold;
}

.progress_bar {
    height: 16px;
    position: relative;
    background: var(--background-color);
    border-radius: 4px;
    overflow: hidden;
}


.animate_progress_bar {
    width: 16px;
    /* animation: Animate-HTML 3s;
    -webkit-animation: Animate-HTML 3s;
    -moz-animation: Animate-HTML 3s;
    -o-animation: Animate-HTML 3s; */
    height: 16px;
    position: absolute;
    background-color: var(--color-bar-yellow);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--color-white);
    font-size: 10px;
    -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
    will-change: width;
    color: black;
    border-radius: 4px;
}

.animate_progress_bar.positive {
    background-color: var(--color-bar-green);
}

.animate_progress_bar.negative {
    background-color: var(--color-bar-red);
    color: white;
}

.green {
    color: var(--color-green);
}
.red {
    color: var(--color-red);
}