* {
    padding: 0;
    margin: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

picture {
    display: block;
}

.hide {
    display: none !important;
}

.hide_destroy {
    display: none !important;
}

@media screen {

    html {
        overflow: hidden;
        height: 100%;
        max-height: 100vh;
    }

    html,
    body {
        width: 100%;
        min-width: 240px;
        height: 100%;
        max-height: 100vh;
        text-align: center;
        font-family: 'Poppins', Arial, Verdana, sans-serif;
        font-size: 16px;
        -webkit-text-size-adjust: 100%;
        overflow: hidden;
    }

    svg,
    svg *{
        touch-action:none;
        pointer-events:none;
    }

    .no_pad{
        padding: 0px;
    }
    .no_margin{
        margin: 0px;
    }

    iframe{
        width: 100%;
        height: 100%;
    }

    .bold{
        font-weight: bold;
    }

    .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: #c68000;
        --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;
        --bc-color: #d79700;
        /*  */
        --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);
        --appointment-event-border-bc : #ffd892;
        /*  */
        --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-green-dark: #009900;
        --color-bar-yellow: #d9d900;
        --color-bar-red: red;
        --color-bar-purple: purple;
        /*  */
        --video-background: rgba(0, 0, 0, 0.6);
        /*  */
        --progress-bar-striped-bg: blue;
        /*  */
        --task-action-bg-green: #00b01f;
        --task-action-bg-green-hover: #00d227;
        /* support */
        --support-status-new: rgb(117, 117, 117);
        --support-status-open: rgb(21, 177, 21);
        --support-status-in_progress: rgb(155, 155, 18);
        --support-status-pending: orange;
        --support-status-closed: grey;
        --support-status-reopened: #db4b4b;
        --support-status-resolved: #0783fe;
        --support-status-escalated: rgb(167, 9, 240);
        --support-priority-base: grey;
        --support-priority-low: rgb(214, 214, 37);
        --support-priority-medium: orange;
        --support-priority-high: #db4b4b;
        --support-priority-monitoring: #0783fe;
        --support-priority-urgent: purple;
    }

    .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: #c68000;
        --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;
        --bc-color: #d79700;
        /*  */
        --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);
        --appointment-event-border-bc : #ffd892;
        /*  */
        --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-green-dark: #009900;
        --color-bar-yellow: #d9d900;
        --color-bar-red: red;
        --color-bar-purple: purple;
        /*  */
        --video-background: rgba(0, 0, 0, 0.5);
        /*  */
        --progress-bar-striped-bg: blue;
        --progress-bar-completed-bg: green;
        /*  */
        --task-action-bg-green: #00aa1e;
        --task-action-bg-green-hover: #00d227;
        /* support */
        --support-status-new: white;
        --support-status-open: rgb(21, 206, 21);
        --support-status-in_progress: rgb(231, 231, 24);
        --support-status-pending: orange;
        --support-status-closed: grey;
        --support-status-reopened: #db4b4b;
        --support-status-resolved: #2bbcff;
        --support-status-escalated: rgb(184, 29, 255);
        --support-priority-base: grey;
        --support-priority-low: rgb(214, 214, 37);
        --support-priority-medium: orange;
        --support-priority-high: #db4b4b;
        --support-priority-monitoring: #0783fe;
        --support-priority-urgent: purple;
    }

    .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"] {
        -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%;
    }

    .dropdown_custom .button_menu{
        width: 106px;
    }

    .select_custom.select_custom_products{
        width: 38px;
        height: 38px;
    }

    .select_custom.select_custom_products .button_menu{
        padding: 0 15px;
    }

    .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.5);
        box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.5);
        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_header,
    .dropdown_custom_header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        border-bottom: 1px solid var(--background-color);
        padding: 4px;
    }

    .select_custom_header .title,
    .dropdown_custom_header .title{
        flex:1;
        font-size: 10px;
        text-transform: uppercase;
        font-weight: bold;
        color: var(--label-dim-color);
        padding-left: 8px;
    }

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

    .select_custom_header_actions{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 1px;
    }
    

    .dropdown_custom_header_btn,
    .select_custom_header_btn{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background: var(--foreground-color);
        color: var(--label-color);
        height: 32px;
        width: 32px;
        border: none;
        padding: 0px 10px;
        font-weight: bold;
        cursor: pointer;
    }

    .select_custom_header_actions .select_custom_header_btn:first-child{
        border-radius: 4px 0 0 4px;
    }
    .select_custom_header_actions .select_custom_header_btn:last-child{
        border-radius: 0 4px 4px 0;
    }

    .dropdown_custom_header_btn svg,
    .select_custom_header_btn svg{
       width: 100%;
    }
    .dropdown_custom_header_btn:hover,
    .select_custom_header_btn:hover{
        background: var(--background-color);
        color: var(--label-color);
    }

    .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 .select_custom_items 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 .select_custom_items li a,
    .dropdown_custom_wrapper li a {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        text-decoration: none;
        color: inherit;
    }

    .select_custom_wrapper .select_custom_items li.select_link,
    .dropdown_custom_wrapper li.select_link {
        padding: 0;
    }
    .select_custom_wrapper .select_custom_items li.select_link a,
    .dropdown_custom_wrapper li.select_link a{
        padding: 8px 12px;
    }

    .select_custom_wrapper li.hidden,
    .dropdown_custom_wrapper li.hidden {
        display: none;
    }

    .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;
    }

    .content_multilevel_menu .cm_active_content .head .head_container{
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        flex:1;
        padding-left:8px;
    }

    .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,
    .select_custom_field {
        padding: 8px;
        border-bottom: 1px solid var(--background-color);
    }
    .select_custom_field{
        padding: 0 8px 8px 8px;
    }

    .select_custom_options,
    .select_custom_footer{
        padding: 8px;
        border-top: 1px solid var(--background-color);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap:8px;
    }
    .select_custom_options{
        border-top: none;
        border-bottom: 1px solid var(--background-color);

    }
    .select_custom_options button,
    .select_custom_footer button{
        flex:1;
    }

    .recurring_appointments{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 4px;
    }

    .recurring_appointments .input_checkbox{
        width: 65px;
    }
    .recurring_appointments .input_validation_error{
       flex: 1;
    }

    .recurring_appt_list {
        padding: 0 16px 0px 16px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: 100%;
    }
    .recurring_appt_list .recurring_appt_list_item:last-child{
        margin-bottom: 16px;
    }

    .recurring_appt_list_item{
        font-size: 12px;
        font-weight: bold;
        text-transform: uppercase;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 4px;
        border: 1px solid var(--background-color);
        background-color: var(--background-color);
        padding: 8px;
        border-radius: 6px;
    }
    .recurring_appt_list_item .icon{
        width: 16px;
        font-size: 0;
    }

    .recurring_appt_list_item.available{
        border-color: var(--color-bar-green-dark);
        background-color: #00800043;
    }
    .recurring_appt_list_item.not_available{
        border-color: var(--color-red-hover);
        background-color: rgba(255, 0, 0, 0.261);
    }

    .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_cal_appointments{
        flex-direction: column;
        padding: 2px 4px;
        background:transparent;
    }

    .button_cal_appointments:hover{
        background:var(--background-color);
    }

    .button_cal_appointments .month,
    .button_cal_appointments .year{
        display:block;
        line-height:1;
        color:var(--label-color);
    }
    .button_cal_appointments .year{
        font-size:16px;
        font-weight:400;
    }

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

    .select_custom.readonly,
    .dropdown_custom.readonly{
        cursor: not-allowed;
    }
    .select_custom.readonly .button_menu,
    .dropdown_custom.readonly .button_menu{
        background: var(--input-read-only-bg);
        pointer-events: none;
        touch-action: none;
    }
    .select_custom.readonly .button_menu > .icon,
    .dropdown_custom.readonly .button_menu > .icon{
        display: none;
    }

    .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_fixed .button_menu,
    .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_time_picker_container{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 16px 0;
    }

    .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(--label-color);
    }

    .select_custom.select_custom_goals_strength{
        width: 86px;
    }
    .select_custom.select_custom_goals_strength .select_custom_label{
        width: 32px;
    }

    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: flex-start;
    }

    .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 {
        width: 100%;
        display: block;
        min-height: 100%;
        /* 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 .brand {
        width: 100px;
    }

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

    nav {
        width: 100%;
    }

    .icon_inline {
        display: inline-block;
    }

    main {
        width: 100%;
        /* height: 100%; */
        height: calc(100% - 51px);
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
    }
    main.main_customer_application{
        height: calc(100% - 51px);
    }

    .main_body {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        width: 50%;
        z-index: 1000;
        /* max-height: inherit; */
    }

    .main_body section {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: stretch;
        height: 100%;
    }

    .body_modal_open .main_body section {
        overflow: visible;
    }

    aside.menu {
        position: fixed;
        top: 0;
        left: -302px;
        overflow: auto;
        -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;
        z-index: 2;
    }

    .menu_bg_dismiss {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        opacity:0;
        width: 100%;
        height: 100%;
        min-width: 100vw;
        min-height: 100vh;
        background: var(--modal-background);
        z-index: 2000;
        cursor: pointer;
        backdrop-filter: blur(5px);
        visibility: hidden;
        opacity: 0;
        transition: visibility 0.5s, opacity 0.4s ease;
        will-change: opacity;
    }

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

    .aside_menu_mobile_open .menu_bg_dismiss,
    aside.menu.open .menu_bg_dismiss {
        visibility: visible;
        opacity: 1;
        transition: visibility 0.5s, opacity 0.4s ease;
        will-change: opacity;
    }


    aside.menu > ul {
        position: relative;
        z-index: 10;
    }
    .aside_menu_mobile_open aside.menu,
    .aside_menu_mobile_open aside.menu > ul,
    .aside_menu_mobile_closing aside.menu,
    .aside_menu_mobile_closing aside.menu > ul{
        z-index: 9000;
    }
    aside.menu.open,
    aside.menu.open  > ul,
    aside.menu.closing,
    aside.menu.closing  > ul {
        z-index: 9000;
    }

    .aside_menu_mobile_open aside.menu::before,
    .aside_menu_mobile_closing aside.menu::before,
    aside.menu.closing::before,
    aside.menu.open::before {
        z-index: 8000;
    }

    .aside_menu_mobile_open .main_body{
        z-index: 100;
    }

    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 8px;
        background: var(--menu-background);
        border-radius: 5px;
        gap:8px;
    }

    aside.menu li a .group_line{
        width: 4px;
        height: 24px;
        background: var(--foreground-color);
        border-radius: 12px;
        margin: -3px 4px -3px 0;
    }

    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 .aside_menu_gain li.active > a,
    aside.menu ul > li.aside_menu_gain.active > a,
    aside.menu li.aside_menu_gain a:hover,
    aside.menu ul>li.aside_menu_gain > a .group_line,
    aside.menu li.aside_menu_gain a .group_line{
        background: #1abc0b;
    }
    aside.menu ul .aside_menu_train li.active > a,
    aside.menu ul > li.aside_menu_train.active > a,
    aside.menu li.aside_menu_train a:hover,
    aside.menu ul>li.aside_menu_train > a .group_line,
    aside.menu li.aside_menu_train a .group_line{
        background: #13c3f4;
    }
    aside.menu ul .aside_menu_maintain li.active > a,
    aside.menu ul > li.aside_menu_maintain.active > a,
    aside.menu li.aside_menu_maintain a:hover,
    aside.menu ul>li.aside_menu_maintain > a .group_line,
    aside.menu li.aside_menu_maintain a .group_line{
        background: #790076;
    }
    aside.menu ul>li.aside_menu_dim > a .group_line,
    aside.menu li.aside_menu_dim a .group_line{
        background: #333;
    }
    aside.menu ul>li.aside_menu_logout > a .group_line,
    aside.menu li.aside_menu_logout a .group_line{
        background: var(--color-logout);
    }

    

    
    aside.menu ul > li.active > a .group_line,
    aside.menu li a:hover .group_line,
    aside.menu li.aside_menu_gain a:hover .group_line,
    aside.menu li.aside_menu_train a:hover .group_line,
    aside.menu li.aside_menu_maintain a:hover .group_line,
    aside.menu li.aside_menu_dim a:hover .group_line,
    aside.menu li.aside_menu_logout a:hover .group_line{
        background: var(--menu-background);
    }

    

    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,
    .responsive_ls {
        width: 100%;
        height: auto;
    }
    .responsive_pt {
        width: auto;
        height: 100%;
    }

    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;
        height: 51px;
    }

    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;
        border-left: 1px solid var(--menu-border);
    }

    .main_body .controls_header + section {
        max-height: calc(100% - 55px);
    }

    .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;
    }
    .wrapper_flex.flex_ai_end{
        align-items: flex-end;
    }
    .wrapper_flex.flex_jc_end{
        justify-content: flex-end;
    }
    section .wrapper_flex_column {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: stretch;
        gap: 0;
        width: 100%;
        height: 100%;
    }
    
    .wrapper_flex_column .wrapper_header{
        width: 100%;
        padding: 16px 16px 0 16px;
    }
    .wrapper_flex_scroll{
        width: 100%;
        padding:0 16px 0 16px;
        margin: 8px 0;
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    .wrapper_footer{
        width: 100%;
        padding: 0px;
        border-left: 1px solid var(--menu-border);
    }
    .wrapper_footer_pagination{
        padding: 8px 16px;
        background: var(--foreground-color);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        min-height: 44.5px;
    }
    .wrapper_pagination_info{
        font-size: 10px;
        text-transform: uppercase;
    }

    .wrapper_pagination_load_button{
        border: none;
        background-color: var(--background-color);
        color: var(--label-color);
        border-radius: 6px;
        padding: 8px 16px;
        text-transform: uppercase;
        font-size: 10px;
        cursor: pointer;
    }

    .wrapper_header{
        width: 100%;
    }

    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;
    }

    .circle-wrap {
        position: relative;
        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);
    }
    .no_data .circle-wrap .circle .mask .fill {
        background-color: var(--foreground-offset-color);
    }
    .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;
        top:50%;
        left: 50%;
        transform: translate(-50%, -50%);
        position: absolute;
        z-index: 100;
        font-weight: bold;
        font-size: 18px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex;
        gap:8px;
        padding-top: 14%;
    }
    .circle-wrap .inside-circle small {
        font-size: 10px;
    }

    .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;
    }

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

    .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);
    }

    .retail_product_thumb{
        background: var(--color-img-background);
        border-radius: 6px;
        overflow: hidden;
    }

    .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,
    .deal_notes_container {
        display: none;
    }
    
    .deal_notes_container.open {
        display: block;
    }

    .todays_tasks_group{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        gap:8px;
    }

    /* .todays_tasks_btn_action{
        padding: 8px;
    } */

    .todays_tasks_btn_action .btn_crcl{
        display: inline-block;
        width: 28px;
        height: 28px;
        background: var(--foreground-color);
        color: white;
        border-radius: 200px;
        font-size: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .todays_tasks_btn_action .btn_crcl.call,
    .todays_tasks_btn_action .btn_crcl.sms{
        background: var(--task-action-bg-green);
    }
    .todays_tasks_btn_action .btn_crcl.call:hover,
    .todays_tasks_btn_action .btn_crcl.sms:hover{
        background: var(--task-action-bg-green-hover);
    }

    .todays_tasks_btn_action .btn_crcl.email{
        background: var(--active-color);
    }

    .todays_tasks_btn_action .btn_crcl.email:hover{
        background: var(--color-blue-hover);
    }
    .todays_tasks_btn_action .btn_crcl svg{
        width: 14px;
    }

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

    .checkbox_tasks h3 {
        margin: 0;
        text-transform: uppercase;
    }
    .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,
    .checkbox_tasks .action .sub_title{
        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%;
        height: 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: 16px;
        height: 16px;
        min-width: 16px;
        min-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; */
        margin: 0;
        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;
        height: 39px;
    }
    
    .input_container.input_currency.input_discount:before {
        content: "%";
        height: 38px;
    }
    .input_container.input_currency.input_discount .dropdown_custom {
        position: absolute;
        height: 100%;
        top: 0px;
    }

    .cw_content .input_container.input_currency:before {
        height: 42px;
    }

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

    .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 .block.dashboard_link{
        color: var(--label-color);
        text-decoration: none;
    }

    body section .block.activeChat{
        background-color: var(--active-color);
        color: white;
    }
    body section .block.room-item:hover{
        background-color: var(--color-blue-hover);
        color: white;
    }

    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.canceled,
    .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: 66px;
        padding: 6px 8px;
        border-radius: 6px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        overflow: hidden;
    }

    .automation_item.disabled{
        background: transparent;
        border:1px dashed var(--color-dim-hover);
    }

    .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(--active-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;
        line-clamp: 1;
        -webkit-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(--foreground-color); /* COACHES ONLY */
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .dash_widget_progress_title .progress_controls{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
        margin-right: -8px;
    }

    .dash_widget_progress_title .button_widget{
        border-radius: 4px;
        border:none;
        background: var(--active-color);
        cursor: pointer;
        color:white;
    }

    .dash_widget_progress_title .button_widget.button_widget_list{
        background: var(--foreground-offset-color);
        color:var(--label-color);
    }
    .dash_widget_progress_title .button_widget.button_widget_fg{
        background: var(--foreground-color);
    }
    .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;
    }

    .progress_indicator{
        width: 12px;
        font-size: 0;
    }
    .progress_stats{
        display: block;
    }
    .progress_stats.negative{
        padding-right: 10px;
    }

    /* CLIENTS ONLY */
    /* .menu_switch_wrapper{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: stretch;
        background: var(--foreground-color);
        padding: 8px;
        border-radius: 6px;
        gap: 0;
    }
    .menu_switch_wrapper .button_switch{
        width: 50%;
        background: var(--background-color);
        border-radius: 4px;
        border: none;
        color: var(--label-color);
        padding: 8px 4px;
        text-transform: uppercase;
        font-size: 11px;
        cursor: pointer;
    }

    .menu_switch_wrapper .button_switch:first-child{
        border-radius: 4px 0 0 4px;
    }
    .menu_switch_wrapper .button_switch:last-child{
        border-radius: 0 4px 4px 0;
    }

    .menu_switch_wrapper .button_switch.active{
        background: var(--active-color);
        color: white;
    } */


    /* .toggle_dash_widget_goals{
        cursor: pointer;
    }
    .toggle_dash_widget_goals .dash_widget_progress_bar_container,
    .toggle_dash_widget_goals.open .dash_widget_progress_bar_container{
        display: block;
    }
    .toggle_dash_widget_goals .indicator.open,
    .toggle_dash_widget_goals .indicator.close,
    .toggle_dash_widget_goals.open .indicator.open,
    .toggle_dash_widget_goals.open .indicator.close{
        display: none;
    } */

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

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

    .modal_boot_camp_client_item .action_reveal,
    .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);
    }
    .modal_boot_camp_client_item .action_reveal{
        border-radius: 0px;
        margin: 0;

    }
    

    .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;
    }

    .grid_list_inline .toggle_action_reveal:checked~.action_reveal,
    .grid_notes .toggle_action_reveal:checked~.action_reveal{
        height: 100%;
        max-width: 240px;
        right: -3px;
        transition: right 0.4s ease;
        will-change: right;
        border-radius: inherit;
    }
    /* .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;
        text-decoration: none;
        font-size:14px;
    }

    .btn_link{
        font-size: 13px;
    }

    .button.btn_fw{
        width: 100%;
    }

    .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;
    }

    .stats_action_group .button{
        width: 38px;
        height: 38px;
        padding:0;
        margin: 4px;
    }
    .stats_action .stats_action_group .button .icon{
        width: 18px;
        min-width: 18px;
        margin: 0;
        padding: 0;
        color: inherit;
    }   

    .stats_action_group .button:hover{
        background-color: var(--color-blue-hover);
    }

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

    .button.button_cart {
        position: relative;
        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);
        border-color: var(--background-color);
        color:var(--label-color);
    }
    .button.button_cart.active.updated,
    .button.button_cart.updated{
        border-color: var(--active-color);
        color:var(--label-color);
    }

    .button_cart .button_cart_notification{
        display: none;
        position: absolute;
        top: 42px;
        background: var(--active-color);
        font-size: 12px;
        color: white;
        padding: 8px;
        z-index: 1000;
        border-radius: 6px;
        right: 0;
    }
    .button.button_cart.updated .button_cart_notification{
        display: block;
    }

    .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_btn{
        flex-direction: column;
        text-align: center;
        border:1px solid var(--color-dim);
        cursor: pointer;
    }
    .wrapper_header .info_btn:hover{
        border-color: var(--active-color);
    }
    .wrapper_header .info_btn.active{
        border-color: var(--color-blue);
    }
    .wrapper_header .info_btn_col{
        flex-direction: column;
        text-align: center;
    }
    .wrapper_header .info.info_btn_col span,
    .wrapper_header .info.info_btn span{
        text-align: center;
        padding: 0;
    }

    .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.grid_list_bg_color{
        background: var(--background-color);
        border-radius: 6px;
    }

    .grid_list.grid_notes{
        border-radius: 0px 6px 0px 0px;
    }

    .grid_list{
        padding: 8px;
        color: var(--label-color);
    }
    .client_stats {
        color: var(--label-color);
    }

    .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;
    }

    .client_stats .stats {
        margin: 8px 0;
        border-left: 2px solid var(--background-color);
    }

    .stats.last_ci span, 
    .client_stats .stats.last_ci span {
        color: var(--label-dim-color);
    }

    .stats.last_ci.pastdue span, 
    .client_stats .stats.last_ci.pastdue span {
        display: inline-block;
        padding: 4px;
        background: transparent;
        color: var(--color-red);
        min-width: 80px;
        border-radius: 4px;
    }

    .stats.last_ci.warning span, 
    .client_stats .stats.last_ci.warning span {
        display: inline-block;
        padding: 4px;
        background: transparent;
        color: var(--color-orange);
        min-width: 80px;
        border-radius: 4px;
    }

    .stats.last_ci.default span, 
    .client_stats .stats.last_ci.default span {
        display: inline-block;
        padding: 4px;
        background: transparent;
        color: var(--label-color);
        min-width: 80px;
        border-radius: 4px;
    }

    .report_stats{
        display: flex;
        flex-direction: column;
        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 {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap:4px;
    }
    .client_stats .client {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap:4px;
        padding: 8px;
    }

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

    .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: 8px;
        border-radius: 4px;
        gap: 8px;
    }
    .modal_progress_fotos .client_progress_fotos_group{
        background: var(--background-color);
        border-radius: 0;
    }

    .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;
        gap: 4px;
        width: 33%;
    }
    .client_progress_fotos_image .image{
        cursor: pointer;
    }
    .modal_progress_fotos .client_progress_fotos_image{
        gap: 0;
        width: 33%;
    }
    .modal_progress_fotos .client_progress_fotos_image .image{
        cursor: default;
    }

    .client_progress_fotos_image .label {
        font-size: 12px;
        text-align: center;
        text-transform: uppercase;
        color: var(--label-dim-color);
        width: 100%;
        background: var(--background-color);
        padding: 4px;
        border-radius: 6px;
    }
    .modal_progress_fotos .client_progress_fotos_image .label{
        background: var(--foreground-color);
        color: var(--label-color);
        border-radius: 0 0 6px 6px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        gap:8px;
        padding: 8px 0;
        cursor: pointer;
    }
    .modal_progress_fotos .client_progress_fotos_image .label .icon{
        width: 16px;
        font-size: 0;
    }
    .modal_progress_fotos .client_progress_fotos_image .label:hover{
        background: var(--color-blue-hover);
    }

    .modal_progress_fotos_reset .modal_footer{
        display: none;
    }

    .modal_progress_fotos_reset.modal_progress_fotos{
        border-radius: 8px 8px;
        overflow: hidden;
    }

    .client_progress_fotos_image .image,
    .grid_list .client_progress_fotos_image .image{
        border-radius: 6px;
        width: 100%;
        height: auto;
        font-size: 0;
        background: var(--foreground-offset-color);
    }

    .modal_progress_fotos .client_progress_fotos_image .image,
    .modal_progress_fotos .client_progress_fotos_image .image .img{
        border-radius: 6px 6px 0 0;
        overflow: hidden;
    }

    .header_tabs .user .full_name_container,
    .grid_list .full_name_container,
    .client_stats .client_name_container {
        padding-left: 4px;
        padding-right: 0px;
        /*padding-left: 8px;
        padding-right: 8px;*/
        flex: 1;
        text-align: left;
        line-height: 1.3;
        font-size: 13px;
        font-weight: bold;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        word-wrap: break-word; /* Important for long words! */
    }
    .client_progress_profile{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap:8px;
        padding: 8px 0px 8px 8px;
    }
    .client_progress_names{
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        line-height: 1;
        font-size: 14px;
        font-weight: bold;
        gap: 4px;
        width: 100%;
    }
    .client_progress_names .first_name,
    .client_progress_names .last_name{
        text-overflow: ellipsis;
        display: -webkit-box;
        line-clamp: 1;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-align: left;
        line-height: 1.2;
        width: inherit;
    }
    .client_progress_names_wrap {
        font-size: 14px;
        font-weight: bold;
        line-height: 1.2;
        display: inline-block;
        max-width: calc(100% - 2px);
        text-align: left;
        flex-grow: 1; /* take up the remaining space */
        padding-right: 2px;
        overflow: hidden;
    }
    .client_progress_names_wrap .first_name,
    .client_progress_names_wrap .last_name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
      

    .client_progress_last_ci{
        width: 40px;
    }
    .client_progress_last_ci .date{
        font-size: 10px;
    }
    .client_progress_last_ci .year{
        font-size: 10px;
    }

    .warning .client_progress_last_ci{
        color: var(--color-yellow);
    }
    .pastdue .client_progress_last_ci{
        color: var(--color-red);
    }
    
    .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:8px;
    }

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

    .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%;
        height: 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);
    }
    .stats_action .stats_action_group.billing_action_group, 
    .stats_action_inline .stats_action_group.billing_action_group {
        min-height: 16px;
    }
    .stats_action .stats_action_group .icon.billing_icon,
    .stats_action_inline .stats_action_group .icon.billing_icon{
        padding: 0;
        width: 16px;
        height: 16px;
        padding-left: 4px;
    }
    .stats_action .stats_action_group .icon svg,
    .stats_action_inline .stats_action_group .icon svg{
        min-width:10px;
    }
    .stats_action .stats_action_group .icon.hidden,
    .stats_action_inline .stats_action_group .icon.hidden {
        display: none;
    }

    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 , .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;
        color: var(--label-color);
    }

    .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%;
        height: 100%;
        font-size: 12px;
        color: var(--label-color);
    }
    .stats_info .past_due{
        color:var(--color-red);
        font-weight: bold;
    }
    .stats_info .today{
        color:var(--active-color);
        font-weight: bold;
    }
    .stats_info .coming_up{
        color:var(--label-color);
        font-weight: bold;
    }
    .stats_info .no_tasks{
        color:var(--label-dim-color);
        font-weight: bold;
    }
    .stats_info.stats_info_col {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        width: 100%;
        font-size: 12px;
        color: var(--label-color);
    }

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

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

    .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;
    }


    .list_user_name{
        padding-left:8px;
    }
    .list_user_name .full_name{
        font-size: 13px;
        text-align: left;
        font-weight: bold;
    }
    .list_user .stats_info .icon{
        width: 28px;
        padding: 0 8px;
    }

    .deals_content .stats_info span.bold {
        display: inline-block;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .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(--color-green);
        background: transparent;
        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 {
        position: relative;
        background: var(--background-color);
        border-radius: 6px;
        display: flex;
        flex-direction: row;
        /* align-items: flex-start; */
        align-items: stretch;
        justify-content: flex-start;
        overflow: visible;
    }
    .flex_widget_hide_overflow {
        overflow: hidden;
    }

    .flex_widget_alert{
        display: none;
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background: var(--modal-background);
        backdrop-filter: blur(5px);
        border-radius: 6px;
    }
    .flex_widget_alert.active{
        display:flex;
    }

    .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: 10%;
        max-width: 100px;
        min-width: 90px;
        margin-right: 8px;
        /* background: var(--foreground-color); */
        border-radius: 6px;
        padding: 0;
        overflow: hidden;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 4px;
        border:1px solid var(--foreground-color);
    }

    .flex_widget .fw_thumbnail.fw_product div{
        background: var(--foreground-color);
        border-radius: 4px;
        overflow: hidden;
        width: 100%;
    }

    .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;
    }

    .product_item_preview {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        gap:0px;
    }
    .product_info{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: stretch;
        padding-right: 32px;
        width: 100%;
    }
    .product_info h3{
        margin: 0;
    }
    .product_info p{
        font-size: 11px;
    }
    .product_subdata {
        color: var(--label-dim-color);
        font-size: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
    }
    .product_subdata .icon{
        display: inline-block;
        width: 12px;
        font-size: 0;
        color:var(--label-dim-color);
    }
    .product_info_footer {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        width: 100%;
        gap: 8px;
    }
    .product_subdata_inventory{
        color: var(--label-color);
        font-size: 12px;
        font-weight: bold;
    }

    .product_pricing{
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: flex-end;
        gap: 16px;
    }
    .product_pricing.cart{
        gap: 8px;
    }
    /* .product_pricing .cost,
    .product_pricing .price{
        min-width: 65px;
    } */
    .product_pricing .price{
        text-align: right;
    }
    .product_pricing .label{
        font-size: 12px;
        color: var(--label-dim-color);
    }

    .product_pricing .amount{
        font-size: 13px;
    }

    .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.description {
        font-size: 12px;
        margin-bottom: 8px;
        color: var(--label-color);
    }
    .flex_widget .fw_content p {
        font-size: 12px;
        margin-bottom: 8px;
        color: var(--label-dim-color);
    }

    .flex_widget .fw_reviews {
        width: 100%;
    }

    .cert_widget{
        background: var(--background-color);
        border-radius: 6px;
        padding: 16px;
    }

    .cert_content{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        height: 100%;
    }

    .open_content_container{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .open_content_container_actions{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap:8px;
    }

    .rating_star_group{
        color: var(--active-color);
    }
    .rating_score{
        font-size: 14px;
    }

    .cert_logo{
        width: auto;
        height: 40px;
    }
    .cert_logo svg{
        height: 100%;
    }
    .cert_description{
        font-size: 13px;
        color: var(--label-dim-color);
        line-height: 1.3;
    }

    .cert_widget button,
    .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;
    }

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

    .star,
    .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;
    }

    .messages_filter_container{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        max-width: 100%;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scrollbar-width: none;
    }

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

    .messages_filter_btn{
        flex: 1;
        padding: 8px 16px;
        background: transparent;
        border: none;
        border-right:1px solid var(--background-color);
        color: var(--label-dim-color);
        cursor: pointer;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        text-decoration: none;
    }

    .messages_filter_btn.active{
        background: var(--active-color);
        color: white;
        font-weight: bold;
    }
    .messages_filter_btn:hover{
        background: var(--color-blue-hover);
        color: white;
    }

    .messages_filter_container .messages_filter_btn:last-child{
        border: none;
    }

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

    .messages_filter_btn .icon{
        touch-action: none;
        pointer-events: none;
        width: 17px;
        display: block;
        font-size: 0;
        color: inherit;
    }

    .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{
        scroll-behavior: unset;
    }


    .content_multilevel_menu .cm_list.cm_list_edit {
        padding-right: 54px;
    }


    .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;
    }

    .connect_messages .cm_list .message_item * {
        touch-action: none;
        pointer-events: none;
    }

    .connect_message .cm_list.empty,
    .content_multilevel_menu .cm_list.empty{
        width: 0;
        min-width: 0;
        padding: 0px;
        margin: 8px;
    }

    .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%;
    }
    /* APP ONLY */
    .content_multilevel_menu .cm_list .submenu_group .menu_group[data-content_id].hidden_view_edit .menu_item,
    .content_multilevel_menu .cm_list .hidden_view_edit .menu_item,
    .content_multilevel_menu .cm_list .hidden_view_edit .menu_action {
        background: var(--foreground-color-opacity);
        border:1px dotted var(--foreground-offset-color);
    }

  

    /*  */
    /* .content_multilevel_menu .cm_list .hidden_view,
    .content_multilevel_menu .cm_list .hidden_view,
    .content_multilevel_menu .cm_list .display_grid_1-LS.hidden_view{
        display: none;
    } */
    /*  */
    .content_multilevel_menu .cm_list  .submenu_group .menu_group[data-content_id].hidden_view .menu_item {
        background: var(--foreground-color-opacity);
    }
    .content_multilevel_menu .cm_list .hidden_view .menu_item,
    .content_multilevel_menu .cm_list .hidden_view .menu_action {
        background: var(--foreground-color-opacity);
        border:1px dashed var(--color-dim-hover);
        /*  */
    }
    .content_multilevel_menu .cm_list .menu_item .menu_item_edit_container{
        position: absolute;
        right: -43px;
        top:0;
        width: 32px;
        background: var(--background-color);
        height: 100%;
        border-radius: 6px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .icon_menu_edit{
        width: 14px;
        font-size: 0;
    }
    .icon_menu_edit{
        width: 14px;
        font-size: 0;
    }
    .menu_item_edit_container .button_menu{
        background: var(--foreground-color);
        border-radius: 6px;
        width: 32px;
        height: 32px;
        padding: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        color: var(--label-color);
    }
    .menu_item_edit_container .button_menu:after{
        content: "";
        display: block;
        width: 11px;
        height: 1px;
        border-top: 1px dotted var(--label-dim-color);
        position: absolute;
        top: calc(50% - 1px);
        left: -11px;
    }
    .menu_item_edit_container .select_custom_label{
        justify-content: center;
    }
    .menu_item_edit_container .button_menu:hover{
        background: var(--color-blue-hover);
        color: white;
    }

    .content_multilevel_menu .cm_list .submenu_group .menu_group[data-content_id] .menu_item,
    .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);
    }
    /* MANAGER ONLY
    .content_multilevel_menu .menu_group.hidden_view .menu_item:hover .menu_item_wrapper,
    .content_multilevel_menu .menu_group.active.hidden_view > .menu_item > .menu_item_wrapper,
    .content_multilevel_menu .menu_item.active.hidden_view > .menu_item_wrapper {
        background: var(--active-color-opacity);
    }
    */
    .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);
    }

    .menu_item.menu_item_hover_off{
        touch-action: none;
        pointer-events: none;
    }

    .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 {
        position: relative;
        width: 38px;
        height: 38px;
        border-radius: 100px;
        /* overflow: hidden; */
        background-color: var(--color-dim);
    }
    .cal_select_coach .image img, 
    .connect_messages .cm_list .message_item .image img, 
    .content_multilevel_menu .cm_list .menu_item .image img{
        border-radius: 100px;
    }
    .connect_messages .cm_list .message_item .image{
        position: relative;
        width: 38px;
        height: 38px;
        border-radius: 100px;
    }
    .connect_messages .cm_list .message_item img{
        width: 38px;
        height: 38px;
        border-radius: 100px;
        overflow: hidden;
        background-color: var(--color-dim);
    }

    .connect_messages .cm_chat .head .profile .user_status,
    .connect_messages .cm_list .message_item .user_status{
        display: none;
        width: 16px;
        height: 16px;
        border-radius: 64px;
        background: var(--color-green);
        position: absolute;
        bottom:-2px;
        right: -2px;
        z-index: 10;
        border:2px solid var(--foreground-color);
    }

    .connect_messages .cm_list .room-item:hover .message_item .user_status{
        border-color:var(--color-blue-hover);
    }
    .connect_messages .cm_list .block.activeChat .message_item .user_status{
        border-color:var(--active-color);
    }

    .connect_messages .cm_chat .head .profile .user_status.online,
    .connect_messages .cm_list .message_item .user_status.online{
        display: block;
    }

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

    .cal_select_coach .image img{
        border-radius: 100px;
    }
    .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_group.active > .menu_item .menu_item_wrapper.dc_1,
    .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 .dc_10 .deal_color,
    .content_multilevel_menu .menu_group.active > .menu_item .menu_item_wrapper.dc_10,
    .content_multilevel_menu .menu_item:hover .menu_item_wrapper.dc_10,
    .content_multilevel_menu .menu_item.active .menu_item_wrapper.dc_10 {
        background: var(--color-orange);
    }

    .content_multilevel_menu .menu_item:hover .menu_item_wrapper.dc_10 .deal_color,
    .content_multilevel_menu .menu_item.active .menu_item_wrapper.dc_10 .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,
    .content_multilevel_menu .menu_group.active > .menu_item .menu_item_wrapper.dc_10 .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;
    }

    .message_aside{
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-start;
    }

    .message_badge{
        min-width: 20px;
        background: red;
        height: 20px;
        display: none;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: bold;
        border-radius: 20px;
        text-align: center;
        padding: 0 4px;
    }

    .message_badge.active{
        display: flex;
    }

    .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;
        color: var(--label-color);
    }

    .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;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        color: var(--label-dim-color);
    }
    .connect_messages .cm_list .message_preview{
        line-clamp: 1;
        -webkit-line-clamp: 1;
        word-break: break-word;
    }

    .menu_tagline{
        text-align: left;
        font-weight: bold;
        font-size: 13px;
        color: var(--label-dim-color);
        margin-bottom: 4px;
    }
    .menu_group.active .menu_tagline,
    .menu_item:hover .menu_tagline{
        color: white;
    }

    body section .block.room-item:hover .date,
    body section .block.room-item:hover .message_preview,
    .connect_messages .cm_list .activeChat .date,
    .connect_messages .cm_list .activeChat .message_preview{
        color: white;
    }

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

    .connect_messages .cm_list.cm_list_messages{
        margin: 8px 16px 16px 16px;
        height: calc(100% - 136px);
        width: calc(100% - 32px);
    }

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

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

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

    .connect_messages .cm_search{
        margin: 0;
    }
    .connect_messages .cm_search_container{
        padding: 16px 16px 0 16px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: stretch;
        gap: 8px;
    }

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

    .menu_action_flex.ai_flex_end{
        align-items: flex-end;
    }

    .menu_action_flex .btn_sqr{
        width: 38px;
        height: 38px;
    }

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

    .chat_options{
        position: absolute;
        width: 100%;
        bottom: 29px;
        background: red;
        border-radius: 100px;
        overflow: hidden;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px;
        border:1px solid var(--foreground-color);
        background: var(--background-color);
    }
    .chat_footer_container{
        flex: 1;
        max-width: 100%;
    }
   
    .chat_user_typing_bottom{
        position: relative;
        width: 100%;
        background: var(--foreground-color);
        padding: 0px;
        height: 0px;
        overflow: hidden;
        transition: height .4s;
        will-change: height;
        text-align: left;
    }
    .chat_user_typing_image_group{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 4px;
    }
    .chat_user_typing_image_group .image{
        width: 18px;
        font-size: 0;
        border-radius: 100%;
        overflow: hidden;
        background: var(--background-color);
    }
    .chat_user_typing_anim{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        width: 40px;
    }
    .chat_user_typing_bottom.active{
        height:42px;
        transition: height .4s;
        will-change: height;
        
    }
    .chat_user_typing_bottom .chat_user_typing{
        position: relative;
        display: inline-block;
        background: var(--color-dim);
        color: var(--label-color);
        font-size: 12px;
        padding: 0px 4px;
        height:24px;
        border-radius: 24px;
        gap: 4px;
        margin: 8px 24px 10px;
        scale: 0;
        transition: scale .4s;
        will-change: scale;
    }
    .chat_user_typing_bottom.active .chat_user_typing{
        scale: 1;
        transition: scale .4s; 
        will-change: scale; 
    }

    .chat_user_typing_flex{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        height: 100%;
    }

   
    @keyframes blink { 50% { fill: transparent }}
    .dots_typing_dot { 
        animation: 1s blink infinite;
        fill: grey;
    }
    .dots_typing_dot:nth-child(2) { animation-delay: 250ms }
    .dots_typing_dot:nth-child(3) { animation-delay: 500ms }

    .dots_typing {
        color: var(--background-color);
    }

    .chat_footer{
        background: transparent;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 8px;
    }
    .chat_footer_options{
        display: none;
        padding: 8px;
        margin-top: 8px;
        background: var(--foreground-offset-color);
        width: 100%;
        overflow-y: hidden;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    .chat_footer_options.active{
        display: block;
    }
    .chat_footer_emojies{
        width: 1400px;
        position: relative;
        display: none;
    }
    .chat_footer_emojies.active{
        display: flex;
        flex-flow: row wrap;
        gap:8px;
    }
    .chat_footer_images{
        display: none;
    }
    .chat_footer_images.active{
        display: block;
    }

    .chat_footer_emojies a{
        color: var(--label-color);
        text-decoration: none;
        font-size: 0;
        width: 36px;
        height: 36px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .button_chat_options.active .chat_options,
    .button_chat_options.active_emojies,
    .button_chat_options.active_images{
        display: flex;
    }
    .chat_options_button{
        padding: 8px;
        background: var(--active-color);
    }
    .chat_options_button:hover{
        background: var(--color-blue-hover);
    }

    .connect_messages .cm_chat .footer .button.button_chat_options.active,
    .connect_messages .cm_chat .footer .button.button_chat_options.active_emojies,
    .connect_messages .cm_chat .footer .button.button_chat_options.active_images{
        background: var(--foreground-offset-color);
    }
    .button_chat_options.active .icon svg,
    .button_chat_options.active_emojies .icon svg,
    .button_chat_options.active_images .icon svg{
        transform: rotate(45deg);
    }

    .button_chat_options.hidden{
        display: none;
    }

    .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;
        z-index: 20;
    }

    .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);
    }

    .content_multilevel_menu .cm_active_content_container.always_open,
    .content_multilevel_menu.open .cm_active_content_container.always_open{
        width: 100%;
        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 {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding: 8px;
        border-bottom: 1px solid var(--background-color);
        gap:8px;
        z-index: 2;
        background: var(--foreground-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;
    }

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

    .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: 30px;
        font-size: 0;
        padding: 8px;
    }

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

    .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;
        flex: 1;
        text-align: left;
    }

    .connect_messages .cm_chat .head .profile .image,
    .content_multilevel_menu .cm_active_content .head .profile .image {
        position: relative;
        border-radius: 100px;
        min-width: 34px;
        min-height: 34px;
        width: 34px;
        height: 34px;
        background: var(--color-img-background);
    }

    .connect_messages .cm_chat .head .profile img,
    .content_multilevel_menu .cm_active_content .head .profile img {
        border-radius: 100px;
    }

    .connect_messages .cm_chat .head .profile .user_name,
    .content_multilevel_menu .cm_active_content .head .profile .user_name {
        margin-left: 8px;
        font-weight: bold;
        text-align: left;
        line-height: 1.1;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

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

    .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;
    }

    .new_message_group_tags,
    .input_group_tags{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        background: var(--background-color);
        padding: 4px;
        border-radius: 6px;
        gap: 4px;
        width: 100%;
    }
    .new_message_group_tags{
        padding: 0;
        font-size: 12px;
    }

    .new_message_group_tags.pad_8{
        padding:8px;
    }

    .tag_item{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        background: var(--foreground-color);
        padding: 4px 8px;
        font-size: 11px;
        font-weight: bold;
        border-radius: 4px;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .new_message_group_tags .tag_item{
        width: 32.5%;
    }
    .tag_item.focus{
        background: var(--color-blue-hover);
    }

    .tag_item .tag_item_btn{
        width: 16px;
        font-size: 0;
        padding: 4px;
        border-radius: 2px;
        background: var(--background-color);
        cursor: pointer;
    }
    .tag_item .tag_item_btn:hover{
        background: var(--active-color);
        color:white;
    }

    .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;
    }

    .button_chat_options{
        position: relative;
    }

    .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: 8px 16px 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;
    }
    .connect_messages .cm_chat .content.user_typing,
    .content_multilevel_menu .cm_active_content .content.user_typing {
        padding-bottom: 56px;
    }

    .connect_messages .cm_chat .content.no_pad,
    .content_multilevel_menu .cm_active_content .content.no_pad {
        padding: 0;
    }

    .body_modal_open .connect_messages .cm_chat .content,
    .body_modal_open  .content_multilevel_menu .cm_active_content .content { 
        overflow: visible;
    }

    .content_inner{
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        height: inherit;
        margin: 0 -18px;
        padding-top:8px;
    }
    .modal .content_inner{
        margin: 0 -16px;
    }
    .content_inner_header{
        margin:8px 0px 0px 0px;
        padding: 0 16px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 4px;
    }
    .modal .content_inner_header{
        margin-top: 0px;
        padding: 0 12px;
    }

    .content_inner_scroll{
        position: relative;
        flex: 1;
        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;
        /* padding: 0 16px; */
        padding: 0 14px;
        margin-top: 8px;
    }
    .modal .content_inner_scroll{
        padding: 0 10px;
    }
    .content_inner_footer{
        min-height: 40px;
        border-top:1px solid var(--background-color);
        padding: 0 16px;
        margin-top: 8px;
    }

    .footer_products_info{
        /* margin-bottom: -16px; */
        background-color: var(--foreground-offset-color);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        text-transform: uppercase;
        border-color: transparent;
        min-height: 30px;
    }
    .content_cart .footer_products_info{
        margin-bottom: 0;
    }
    .footer_products_action{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        padding: 8px 0px;
    }
    .footer_products_action button{
        border:none;
        background-color: var(--background-color);
        color:var(--label-color);
        border-radius: 6px;
        padding: 8px 16px;
        text-transform: uppercase;
        font-size: 10px;
        cursor: pointer;
    }
    .footer_products_action button:hover{
        background-color: var(--color-blue-hover);
        color: white;
    }
    .modal .footer_products_info{
        border-radius: 0px 0px 8px 8px;
    }

    .content_multilevel_menu .cm_active_content .content_body {
        padding: 16px 0;
        text-align: left;
    }
    .content_multilevel_menu .cm_active_content .content_logo{
        width: 150px;
        border-radius: 6px 6px 6px 6px;
        overflow: hidden;
        font-size: 0;
        margin-bottom: 16px;
    }
    .content_multilevel_menu .cm_active_content .content_body.content_body_flex {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        width: 100%;
        height: 100%;
        padding: 0;
    }
    .content_multilevel_menu .cm_active_content .content_body.content_body_flex.pad_16_0{
        padding:16px 0px;
    }
    .content_multilevel_menu .cm_active_content .content_body.content_body_flex_cart {
        display: none;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        width: 100%;
        height: 100%;
        padding: 0;
    }
    .content_multilevel_menu .cm_active_content .content_body.content_body_flex_cart.active{
        display: flex;
    }

    .email_marketing_container{
        width: 100%;
        height: 100%;
        padding: 16px 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        display: none;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap:8px;
    }
    .email_marketing_item {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap:4px;
        background: var(--background-color);
        padding: 8px 12px 10px 12px;
        border-radius: 6px;
        border:1px solid transparent;
        cursor: pointer;
    }
    .email_marketing_item:hover{
        border-color: var(--active-color);
    }
    .email_marketing_item .label{
        text-transform: uppercase;
        font-size: 11px;
        font-weight: bold;
        color: var(--label-dim-color);
        margin-bottom: 4px;
    }
    .email_marketing_item p{
        font-size: 13px;
        line-height: 1.2;
    }
    .email_marketing_item p.time{
        font-size: 12px;
    }
    .email_marketing_item .date{
       min-width: 82px;
        text-transform: uppercase;
    }
    .email_marketing_item .date .time{
        color: var(--label-dim-color);
    }
    .email_marketing_item .sent_to{
        width: 58px;
    }
    .email_marketing_item .type{
        width: 50px;
        text-transform: capitalize;
    }
    .email_marketing_item .stats{
        width: 26px;
        color: var(--label-dim-color);
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 0;
    }
    .email_marketing_item:hover .stats{
        color: var(--active-color);
    }
    .email_campaign_stats_items .label{
        font-size: 11px;
        text-transform: uppercase;
        margin-bottom: 4px;
    }
    .email_campaign_heading{
        margin-bottom: 8px;
    }
    .email_campaign_title{
        font-size: 16px;
        font-weight: bold;
    }
    .email_campaign_date{
        font-size: 11px;
        text-transform: uppercase;
    }
    
    .email_campaign_stats{
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 8px;
        width: 100%;
    }
    .email_campaign_stats_items{
        background: var(--background-color);
        padding: 8px;
        border-radius: 6px;
    }
    .email_campaign_stats_heading{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .email_campaign_stats_loading {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .email_campaign_stats_loading .label{
       margin: 0;
    }
    .email_campaign_stats_loading .loading_icon{
        width: 20px;
        font-size: 0;
    }

    /* .content_body_flex .content_inner_header_container{
        padding-bottom: 16px;
    } */

    .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_body_empty_container{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: calc(100% - 32px);
        height: calc(100% - 32px);
        position: absolute;
        top:50%;
        transform: translateY(-50%);
    }
    .content_body_empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .content_body_empty h3 {
        margin: 0;
        font-size: 14px;
    }
    .content_body_empty .icon{
        width: 64px;
        color: var(--label-dim-color);
    }

    .content_multilevel_menu .cm_active_content .video_wrapper {
        position: relative;
        padding-bottom: 56.25%;
        /* 16:9 */
        height: 0;
        margin-bottom: 16px;
        background: var(--background-color);
        width: 100%;
    }
    .content_multilevel_menu .cm_active_content .open_content_container .video_wrapper{
        margin: 0;
    }

    .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;
    }
    .content_multilevel_menu .cm_active_content article .description {
        font-size: 13px;
        color: var(--label-dim-color);
        text-transform: none;
    }

    .content_multilevel_menu .cm_active_content .article_content{
        margin-top: 16px;
    }
    .content_multilevel_menu .cm_active_content article p {
        font-size: 13px;
        text-transform: none;
    }
    .content_multilevel_menu .cm_active_content article a{
        color: var(--color-blue);
    }


    .content_multilevel_menu .cm_active_content article ul,
    .content_multilevel_menu .cm_active_content article ol {
        font-size: 13px;
        text-transform: none;
        list-style-position: inside;
        margin-left: 32px;
    }
    .content_multilevel_menu .cm_active_content article ul li,
    .content_multilevel_menu .cm_active_content article ol li{
        text-indent: -16px;
    }

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

    .connect_messages .cm_chat .msg_loading{
        display:flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .msg_loading_icon{
        width: 60px;
    }

    .msg_loading_icon .loader-path {
        stroke: var(--loader-color);
        stroke-width: 4;
    }

    .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: 0px 8px;
        text-align: left;
        text-align: right;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .connect_messages .cm_chat .msg_in .member_name,
    .content_multilevel_menu .cm_active_content .msg_in .member_name{
        margin: 0 0 2px 0;
        text-align: left;
    }

    .connect_messages .cm_chat .msg_out,
    .content_multilevel_menu .cm_active_content .msg_out {
        padding: 0px 8px;
        text-align: right;
        text-align: right;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .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: 80%;
        display: inline-block;
        padding: 8px;
    }
   

    .connect_messages .cm_chat .msg_in small.msg_timestamp{
        text-align: right;
        color: #a2a2a2;;
    }
    .connect_messages .cm_chat .msg_out .msg_bubble small.msg_timestamp{
        color: #eee;
    }
    .msg_bubble .msg_content{
        line-height: 1.3;
    }

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

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

    .msg_bubble picture{
        font-size: 0;
        width: 144px;
        border-radius: 4px;
        overflow: hidden;
        cursor: pointer;
        margin: -6px;
    }

    .connect_messages .cm_chat .msg_out small.msg_timestamp {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
    }

    .msg_timestamp span{
        display: inline-block;
    }

    body section .icon.message_read{
        width: 11px;
        font-size: 0;
        display: none !important;
    }
    body section .icon.message_read.hidden{
        display: none;
    }

    .connect_messages .cm_chat .msg_in .msg_bubble.msg_audio,
    .connect_messages .cm_chat .msg_out .msg_bubble.msg_audio {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 8px;
        max-width: 400px;
    }
    .msg_audio .msg_audio_player{
        flex:1;
    }
    .msg_audio_controls * {
        pointer-events: none;
        touch-action: none;
    }
    /* .msg_audio_player {
        background: red;
    } */
    .msg_audio.audio_player .audio_icon {
        border: 2px solid var(--label-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;
    }

    .pagination_wrapper{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 4px;
    }

    .pagination_wrapper .pages{
        min-width: 24px;
        height: 24px;
        font-size: 12px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background: var(--background-color);
        color: var(--label-color);
        border-radius: 6px;
        cursor: pointer;
        padding: 0 6px;
    }
    .pagination_wrapper .page_prev,
    .pagination_wrapper .page_next{
        width: 24px;
        height: 24px;
        font-size: 12px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background: var(--background-color);
        color: var(--label-color);
        border-radius: 6px;
        cursor: pointer;
        padding:6px;
    }

    .pagination_wrapper .page_input input{
        max-width: 60px;
        border: 1px solid var(--label-dim-editor);
        padding: 4px;
        text-align: center;
        background: var(--background-color);
        color: var(--label-color);
        border-radius: 4px;
        font-size: 13px;
        width: 43px;
    }

    .pagination_wrapper .pages:hover,
    .pagination_wrapper .page_prev:hover,
    .pagination_wrapper .page_next:hover{
        background: var(--active-color);
        color: white;
    }

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

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

    .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);
    }

    .appointment_modal_heading{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding-top: 12px;
    }
    .appointment_modal_heading h3{
        display: inline-block;
        flex:1;
    }
    .input_group.appointment_hours_container{
        width: 100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
    }

    .appointment_hours_container .action label{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        font-size: 14px;
        font-weight: bold;
    }

    .modal_appointment_profile_center{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .modal_appointment_profile{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 16px;
    }
    .modal_appointment_profile .input_profile_upload_group .image{
        width: 64px;
        height: 64px;
    }
    .modal_appointment_profile .client_name{
        font-size: 14px;
    }
    .modal_appointment_profile .client_email,
    .modal_appointment_profile .client_phone{
        font-size: 12px;
        color: var(--label-dim-color);
        font-weight: 400;
    }
    .modal_appointment_datetime_status{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-top: 8px;
        background: var(--background-color);
        padding: 8px 16px;
        border-radius: 6px;
    }

    .modal_boot_camp_client_item{
        background: var(--background-color);
        color: var(--label-color);
        border-radius: 6px;
        /* display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-top: 8px;
        background: var(--background-color);
        padding: 0px 8px;
        border-radius: 6px; */
    }

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

    .modal_appointment_datetime_label {
        font-weight: bold;
    }

    .modal_appointment_confirmed{
        padding:0;
        text-align: center;
        font-weight: bold;
        border-radius: 4px;
        color: var(--appointment-event-border-oc);
        width: 32px;
        font-size: 0;
    }

    .modal_appointment_not_confirmed{
        padding:0;
        text-align: center;
        font-weight: bold;
        border-radius: 4px;
        color: var(--label-dim-color);
        width: 32px;
        font-size: 0;
    }

    .cal_date_banner{
        border:1px solid var(--label-dim-color);
        border-radius: 6px;
        overflow: hidden;
        height: 62px;
    }
    .cal_date_banner_month{
        background: var(--label-dim-color);
        color: var(--label-invert-color);
        font-size: 14px;
        font-weight: bold;
        padding: 2px 4px;
        text-align: center;
    }
    .cal_date_banner_year{
        color: var(--label-dim-color);
        font-size: 18px;
        font-weight: bold;
        padding:4px;
        text-align: center;
    }

    .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_coach{
        width: 38px;
    }
    .menu_task_coach .image{
        margin: 0;
    }

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

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

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

    .dashboard_block{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        padding: 16px;
        width: 100%;
        height: 100%;
    }
    .db_icon_value{
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
    }

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

    .db_heading h3{
        font-size: 15px;
        margin: 0;
        padding: 8px 0;
        color: var(--label-color);
    }

    .db_label{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
    }

    .db_label h3{
        font-size: 14px;
        margin: 0;
        margin-top: 16px;
        color: var(--label-dim-color);
    }

    .db_icon_value .icon{
        width: 50px;
        background: var(--active-color);
        font-size: 0;
        padding: 12px;
        border-radius: 6px;
    }

    .db_toggle_data.hidden,
    .db_info.hidden{
        display: none;
    }

    .db_info,
    .db_toggle_data{
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-start;
    }
    .db_toggle_data{
        height: 100%;
        justify-content: flex-end;
    }

    .db_info.toggle{
        cursor: pointer;
    }
    
    .db_toggle_data button{
        padding: 4px 8px;
        background-color: var(--foreground-offset-color);
        border:1px solid var(--foreground-offset-color);
        border-radius: 4px;
        color:var(--label-color);
        cursor: pointer;
    }
    .db_toggle_data button:hover{
        background-color: var(--background-color);
        border:1px solid var(--background-color);
    }

    .db_info .value{
        font-size: 30px;
        line-height: 1.2;
        text-align: right;
    }
    .db_info .value .loading_icon{
        width: 28px;
    }
    .db_info .value_info{
        font-size: 10px;
        color: var(--label-dim-color);
        text-transform: uppercase;
        font-weight: bold;
    }

    .db_icon_value .icon.db_green { 
        background: var(--ntf-green);
    }
    .db_icon_value .icon.db_orange { 
        background: var(--color-orange);
    }
    .db_icon_value .icon.db_red { 
        background: var(--color-red);
    }
    .db_icon_value .icon.db_blue { 
        background: var(--color-blue-hover);
    }

    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;
    }
    .messages_body footer{
        display: none;
    }

    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 {
        color: inherit;
        border-top: 3px solid var(--active-color);
        border-bottom: 3px solid transparent;
    }

    footer .tab_icon .icon_container {
        position: relative;
        font-size: 0;
    }

    footer .tab_icon .icon_container .badge.hidden {
        display: none;
    }

    footer .tab_icon svg {
        width: 24px;
    }

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

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

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

    nav .header.dashboard .nav_ntf_icon .badge,
    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);
    }

    .automations_text_aside_container,
    .automations_aside_container,
    .new_messages_container,
    .cart_checkout_container,
    .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: 1100;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        transition: right 0.4s ease;
        will-change: right;
    }
    
    .automations_text_aside_container.open,
    .automations_aside_container.open,
    .new_messages_container.open,
    .cart_checkout_container.open,
    .notification_container.open {
        right: 0px;
        transition: right 0.4s ease-out;
        will-change: right;
    }

    .automations_text_aside_container_header,
    .automations_text_aside_container_sub_header,
    .automations_aside_container_header,
    .automations_aside_container_sub_header,
    .new_messages_container_header,
    .new_messages_container_sub_header,
    .cart_checkout_header,
    .cart_checkout_sub_header,
    .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);
        scroll-snap-align: start;
    }

    .edit_group_room_profile{
        cursor: pointer;
    }
    .edit_group_room_profile:hover{
        opacity: 0.75;
    }

    .cart_checkout_sub_header{
        background: var(--background-color);
        height: auto;
    }

    .new_messages_container_sub_header{
        background: var(--background-color);
        height: auto;
        padding: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap:12px;
    }

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

    .ntf_header_icon_image{
        width:36px;
        font-size: 0;
        padding: 0px;
        background:var(--color-img-background);
        border-radius: 20px;
    }

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

    .ntf_header_sub_title{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100%;
    }

    .ntf_header_title h2 {
        font-weight: bold;
    }
    .ntf_header_sub_title h3 {
        padding: 0;
        padding-right: 8px;
        margin: 0;
    }

    .ntf_header_sub_title p{
        font-size: 12px;
        color: var(--label-dim-color);
        font-weight: bold;
    }

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

    .ntf_header_sub_title .button_menu{
        background:var(--foreground-color);
        padding: 0px 12px 0px 16px;
    }

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

    .cart_checkout_footer,
    .notification_footer {
        width: inherit;
        padding: 8px 16px;
        background: var(--background-color);
        text-align: left;
    }

    .cart_checkout_footer_summary{
        padding: 4px 0;
    }

    
    .cart_checkout_footer_button{
        width: 100%;
        margin-top: 8px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap:8px;
    }
    .cart_checkout_footer_button.cart_checkout_footer_wrap{
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .cart_checkout_footer_button .button{
        width: 100%;
        margin-bottom: 4px;
    }
    .cart_checkout_footer_button .button.btn_refund_cancel_program{
        width:48.5%;
    }

    .cart_checkout_footer_button .button:hover{
        background: var(--color-blue-hover);
    }

    .cart_checkout_card_on_file,
    .cart_checkout_button{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap:16px;
        font-size: 12px;
        background: var(--foreground-offset-color);
        padding: 4px 8px;
        border-radius: 6px;
        border:1px solid var(--foreground-offset-color);
        cursor: pointer;
    }

    .cart_checkout_button{
        padding:8px;
        gap:6px;
        border:1px solid var(--foreground-offset-color);
    }

    .cart_checkout_button .cart_checkout_label{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap:8px;
    }
    .cart_checkout_button .cart_checkout_label .icon{
        width: 18px;
        font-size: 0;
    }
    .cart_checkout_button .cart_checkout_label .icon_sqr{
        padding: 2px;
    }

    .cart_checkout_card_on_file_info .card_value{
        font-weight: bold;
    }

    .checkout_capture_payment,
    .cart_checkout_footer_options {
        margin: 8px 0;
    }


    .cart_checkout_card_on_file_info{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap:16px;
        line-height: 1.3;
    }

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

    .cart_checkout_card_on_file_button {
        font-size: 12px;
        border-radius: 4px;
        border:none;
        height: 24px;
        padding: 0 8px;
        background: var(--foreground-color);
        color: var(--label-color);
        cursor: inherit;
    }

    .cart_checkout_button:hover .cart_checkout_card_on_file_button,
    .cart_checkout_card_on_file:hover .cart_checkout_card_on_file_button{
        background: var(--active-color);
        color: white;
    }

    .modal_container .cart_checkout_card_on_file{
        margin-top: 6px;
        touch-action: none;
        pointer-events: none;
    }




    .cart_checkout_product_item{
        width: 100%;
    }
    .cart_checkout_product_title{
        font-size: 13px;
        font-weight:bold;
    }
    .cart_checkout_product_status{
        font-size: 10px;
        font-weight:bold;
    }

    .cart_checkout_product_title,
    .cart_checkout_product_status{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .new_messages_item,
    .cart_checkout_item,
    .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: 4px 0px;
        overflow: hidden;
    }
    .notification_item.read{
        /* background: var(--foreground-offset-color); */
        opacity: 0.7;
    }
    .notification_item.read:hover{
        opacity: 1;
    }
    .new_messages_item{
        gap:12px;
    }
    .new_messages_item:hover{
        background: var(--active-color);
    }
    .new_messages_item:hover *{
        color:white;
    }
    .new_messages_badge{
        width: 32px;
    }
    .new_messages_badge .image{
        position: relative;
        width: 32px;
        height: 32px;
        border-radius: 100px;
        background-color: var(--color-dim);
        overflow: hidden;
    }
    .new_messages_content {
        flex: 1;
    }

    .automations_aside_footer,
    .new_messages_footer{
        width: inherit;
        padding: 12px;
        background: var(--background-color);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap:12px;
    }
    .new_messages_to{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap:12px;
        width:100%;
        min-height: 25.1px;
    }
    .new_messages_to_label{
        font-size: 12px;
    }
    .new_messages_user_name{
        width: 100%;
        overflow: hidden;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-transform: capitalize;
    }

    .automations_aside_footer_action,
    .automations_aside_footer_action button,
    .start_new_message_container,
    .start_new_message_container button{
        width: 100%;
    }
    .start_new_message_container button:hover{
        background: var(--color-blue-hover);
    }
    .cart_checkout_item{
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        padding: 0;
    }

    .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;
    }
    .cart_checkout_content {
        flex: 1;
        padding: 8px 16px;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        background: var(--background-color);
    }
    
    .cart_checkout_summary_group{
        width: 100%;
        border-top: 1px solid var(--background-color);
        padding: 8px 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap:8px;
        font-size: 12px;
    }
    .cart_checkout_summary_group.mo
    .cart_checkout_summary_loading{
        width: 100%;
        border-top: 1px solid var(--background-color);
        padding: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap:8px;
        font-size: 0px;
    }
    .cart_checkout_summary_loading .loading_icon{
        width: 28px;
    }
    a.cart_checkout_summary_group{
        text-decoration: none;
        color: inherit;
        background: var(--foreground-offset-color);
    }
    
    a.cart_checkout_summary_group:hover{
        background: var(--active-color);
        color: white;
    }
    .cart_checkout_summary_group.paid{
        background: transparent;
    }
    /* COACHES ONLY */
    a.cart_checkout_summary_group.paid:hover{
        background: var(--background-color);
    }
    .modal_body .cart_checkout_summary_group{
        text-decoration: none;
        color: var(--label-color);
        background: var(--background-color);
        border-radius: 6px;
        border:none;
    }

    .modal_video_preview{
        position: relative;
        overflow: hidden;
        height: 0;
        padding-top: 55%;
        background: #000;
        background-image: url('/frontend/static/icons/play_color.svg');
        border-radius: 6px;
        border:2px solid #000;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 20%;
    }
    .modal_video_preview iframe{
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }

    .cart_checkout_summary_item{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .cart_checkout_summary_item .summary_label,
    .cart_checkout_summary_item .summary_value{
        font-size: 12px;
    }
    .cart_checkout_summary_item .summary_label{
        width: 100%;
    }
    .cart_checkout_summary_item .summary_value .loading_icon{
        width: 14px;
    }
    .cart_checkout_summary_item .summary_value{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 16px;
        font-weight: bold;
        width:100%;
    }
    .cart_checkout_summary_item .summary_value .icon{
        color: var(--active-color);
    }
    .cart_checkout_summary_group:hover .cart_checkout_summary_item .summary_value .icon{
        color:white;
    }

    .cart_checkout_product_title .edit,
    .cart_checkout_product_status .edit{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap:8px;
        color: var(--active-color);
    }

    .cart_checkout_summary_group:hover .cart_checkout_product_title .edit,
    .cart_checkout_summary_group:hover .cart_checkout_product_status .edit{
        color: white;
    }

    .cart_checkout_product_item .icon,
    .cart_checkout_product_status .icon,
    .cart_checkout_summary_item .summary_value .icon{
        width: 12px;
        font-size: 0;
    }

    .cart_checkout_summary_item .summary_value.hidden{
        display:none;
    }

    .new_messages_content h3,
    .cart_checkout_content h3,
    .notification_content h3 {
        margin: 0;
    }
    .cart_checkout_content h3{
        color: var(--cart-header-title);
    }

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

    .notification_info {
        width: 50px;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: space-between;
        gap: 4px;
    }

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

    .ntf_btn_delete{
        width: 24px;
        padding: 7px;
        font-size: 0;
        border-radius: 200px;
        border:none;
        background: var(--background-color);
        color: var(--label-dim-color);
        cursor: pointer;
    }
    .ntf_btn_delete:hover{
        background: var(--active-color);
        color: white;
    }

    .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: 1100;
        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;
        backdrop-filter: blur(5px);
    }
    .modal_conn_lost,
    .modal_loading{
        z-index: 20000;
    }
    .modal.modal_video,
    .modal.modal_video_view,
    .modal.modal_image_viewer{
        overflow-y: hidden;
        overflow-x: hidden;
        -webkit-overflow-scrolling: none;
        scroll-behavior: none;
    }
    .modal.modal_video_view,
    .modal.modal_image_viewer{
        background: rgba(0, 0, 0, 0.8);
    }

    .modal_image_viewer .modal_close,
    .modal_video_view .modal_close{
        position: absolute;
        right: 16px;
        top: 16px;
        z-index: 2000;
        border-radius: 6px;
        background-color: rgba(0, 0, 0, 0.8);
    }
    .modal_image_viewer_render,
    .modal_video_view_player{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction:row;
        align-items: center;
        justify-content: center;
    }
    .modal_image_viewer_render picture.landscape,
    .modal_image_viewer_render picture.landscape img,
    .modal_video_view_player video.landscape{
        height: auto;
        width: 100%;
    }
    .modal_image_viewer_render picture.portrait,
    .modal_image_viewer_render picture.portrait img,
    .modal_video_view_player video.portrait{
        height: 100%;
        width: auto;
    }

    .modal_video_view_player .video_wrapper{
        position: relative;
        /* padding-bottom: 56.25%;
        height: 0; */
        margin-bottom: 16px;
        background: var(--background-color);
        width: 100%;
        max-width: 95vw;
        max-height: 95vh;
        height: 100%;
    }
    .modal_video_view_player iframe{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .modal_image_viewer_render picture.landscape img,
    .modal_image_viewer_render picture.portrait img{
        height: 100vh;
        width: 100vw;
        object-fit: contain;
    }

    .modal_image_viewer_render .loading_icon{
        width: 50px;
    }

    .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_video_btn{
        width:30px;
        font-size:0;
        color: #888;
        background:transparent;
        border:0;
        cursor:pointer;
    }
    .modal_video_close{
        padding:4px;
    }

    .modal_video_btn:hover{
        color:white;
    }
    .modal_video_btn[data-action="user"]{
        transform: scaleX(-1);
    }

    .modal_video_btn_group{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap:16px;
        width: auto;
        height: 96px;
    }

    .video_snapshot {
        z-index: 1;
    }

    .modal_video_btn_discard,
    .modal_video_btn_upload{
        width:40px;
        font-size:0;
        background: #312e33;
        color: #ccc;
        border:0;
        cursor:pointer;
        padding: 12px;
        border-radius: 4px;
    }

    .modal_video_btn_upload{
        background-color: var(--active-color);
        color: white;
        
    }
    .modal_video_btn_upload:hover{
        background-color: var(--color-blue-hover);
    }
    .modal_video_btn_discard:hover{
        color:white;
    }

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

    .modal_container.modal_message_image_upload{
        max-width: 300px;
    }

    .modal_video_window {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* justify-content:center; */
        height: 100%;
        width: 100%;
    }
    .modal_video_title{
        display: flex;
        flex-direction: column;
        align-items: center;
        /* justify-content:center; */
        height: 100%;
        padding: 0;
    }
    .modal_video_title h2{
        position:absolute;
        transform: rotate(-90deg);
        bottom: 50%;
        white-space: nowrap;
        font-size:10px;
        font-weight:bold;
    }
    .modal_video_container{
        position: relative;
        height: 100%;
        width: 100%;
        /* background: var(--foreground-color); */
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content:center;
    }
    .modal_video_title{
        position: absolute;
        left: 0;
        top:0;
        background: rgba(0, 0, 0, 0.8);
        height: 100%;
        z-index: 100;
        width: 32px;
    }
    
    .modal_video_controls{
        position: absolute;
        right: 0;
        top:0;
        background: rgba(0, 0, 0, 0.8);
        height: 100%;
        z-index: 100;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content:space-between;
        gap: 8px;
        padding: 16px 8px;
    }

    .modal_video_button_playback,
    .modal_video_button_pause,
    .modal_video_button_stop,
    .modal_video_button_record{
        width: 50px;
        height: 50px;
        border-radius: 100px;
        border:2px solid white;
        background: transparent;
        cursor: pointer;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content:center;
    }
    
    .modal_video_button_record span{
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 100px;
        background: red;
        pointer-events: none;
        touch-action: none;
        transition: width .3s, height .3s, border-radius .3s, background-color .3s;

    }
    
    .modal_video_button_stop span{
        display: block;
        width: 25px;
        height: 25px;
        border-radius: 6px;
        background: red;
        pointer-events: none;
        touch-action: none;
        transition: width .3s, height .3s, border-radius .3s, background-color .3s;
    }
    
    .modal_video_button_pause span,
    .modal_video_button_playback span{
        display: block;
        width: 25px;
        height: 25px;
        color: white;
        pointer-events: none;
        touch-action: none;
    }
    .modal_video_button_playback span.icon_play{
        margin-left: 4px;
    }
    .modal_video_button_playback span.icon_pause{
        display: none;
    }
    .modal_video_button_pause .icon_play{
        display: none;
    }
    .modal_video_button_playback svg{
        color: white;
    }

    .modal_video_button_record:hover span{
        background: rgb(192, 0, 0);
    }
    .modal_video_button_stop:hover span{
        background: white;
    }

    .modal_video_content{
        position: relative;
        background: var(--video-background);
        flex: 1;
        user-select: none !important;
        pointer-events: none !important;
        touch-action: none !important;
        
    }

    .modal_video_playback,
    .modal_video_recording {
        font-size: 0;
        width: auto;
        height: 100%;
        position: absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%, -50%);
        user-select: none !important;
        pointer-events: none !important;
        touch-action: none !important;
        
    }
    .modal_video_playback *,
    .modal_video_recording *{
        user-select: none !important;
        pointer-events: none !important;
        touch-action: none !important;
    }

    .modal_video_loading{
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        height: 100%;
    }
    .modal_video_loading .loading_icon_container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap:16px;
    }
    .modal_video_loading .loading_icon {
        width: 30px;
        font-size: 0;
    }
    .modal_video_loading small{
        font-size: 12px;
        color: white;
    }

    .modal_video_timer{
        position:absolute;
        top:8px;
        left:50%;
        transform:translateX(-50%);
        font-size:13px;
        color:white;
        background:rgba(0,0,0,0.8);
        z-index:1000;
        padding: 4px 8px;
        border-radius: 100px;
        width:80px;
    }

    .modal.modal_pdf_view.open{
        height: 100%;
        width: 100%;
        min-height: 100%;
        min-width: 100%;
        max-height: 100vh;
        max-width: 100vw;
        background: red;
        z-index:2000;
    }
    .modal_pdf_header{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background: var(--foreground-color);
        height: 40px;
        width: 100%;
        min-width: 100vw;
    }
    .modal_pdf_title{
        flex:1;
        text-align: left;
        padding: 8px;
    }

    .modal_pdf_view_container{
        width:100%;
        min-width:100vw;
        height: calc(100% - 40px);
        min-height: cal(100vh - 40px);
    }

    .modal_pdf_view .pdf_viewer{
        height: calc(100% - 60px);
        width: 100vw;
        background: #ccc;
        padding: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    .modal_pdf_view .pdf_viewer.rendered{
        justify-content: flex-start;
    }
    .pdf_viewer .loading_icon{
        width:60px;
        color:#333;
    }
    .modal_pdf_view .pdf_viewer.rendered .loading_icon{
        display:none;
    }
    .modal_pdf_view .pdf_viewer_footer{
        height:60px;
        width: 100vw;
        background:#ccc;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap:8px;
    }
    .pdf_viewer_footer_container{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap:8px;
        width:100%;
        max-width:1024px;
    }
    .pdf_page_controller{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap:8px;
    }
    .pdf_renderer{
        display: none;
        background:white;
        box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
        -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
        width: calc(100vw - 16px);
        height: "auto";
        max-width:1024px;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .pdf_canvas{
        width:100%;
        height: auto;
    }

    .pdf_renderer.zoom_in .pdf_canvas{
        width: unset;
        height: unset;
    }
   
    .modal_pdf_view .pdf_viewer.rendered .pdf_renderer{
        display: flex;
    }
    .pdf_button{
        width:40px;
        height:40px;
        padding:8px;
        font-size:0;
        border: none;
        background: transparent;
        color: #333;
        cursor:pointer;
    }
    /* .pdf_button:hover {
        color:var(--color-blue-hover);
    } */
    .pdf_button.disabled{
        pointer-events:none;
        touch-action:none;
        opacity:0.5;
    }
    .pdf_button.zoom_in,
    .pdf_button.zoom_out{
        margin-left:12px;
    }
    .pdf_page {
        width:40px;
        height:36px;
        font-size:16px;
        border:1px solid #666;
        border-radius:6px;
        background:transparent;
        text-align:center;
        padding:0 4px;
    }
    .pdf_pages {
        color: #333;
    }

    
    .messages_image_upload_container{
        position:relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 16px;
        background: var(--background-color);
        overflow: hidden;
    }
    .messages_image_upload_container{
        align-items: center;
    }
    .messages_image_upload_preview{
        width: 100%;
        font-size: 0;
        overflow: hidden;
    }
    .messages_image_upload_preview img{
        background: var(--foreground-color);
        font-size: 0;
        border-radius: 6px 6px 0 0;
        overflow: hidden;
    }

    .messages_image_upload_file_select{
        width: 100%;
    }
    .input_file_group.messages_image_upload_file_select label{
        align-items: center;
        justify-content: center;
        border-radius: 0 0px 6px 6px;
    }
    .input_file_group.messages_image_upload_file_select .file_label{
        gap:8px;
    }

    .messages_image_upload_reset .messages_image_upload_container{
        border-radius: 0 0px 8px 8px;
    }

    .messages_image_upload_reset .modal_footer[class*="display_grid_"]{
        display: none;
    }

    .video_with_content{
        position:relative;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 8px;
        gap: 8px;
        background: var(--background-color);
        border-radius: 8px;
        overflow: hidden;
    }

    .video_thumb {
        position:relative;
        width: 100%;
        height: 0;
        padding-top: 100%;
        overflow: hidden;
        border:none;
        border-radius: 6px;
        background: var(--background-color);
        cursor: pointer;
    }
    .video_with_content .video_thumb{
        width: calc(30% - 4px);
        padding-top: calc(30% - 9.1px);
        background: var(--foreground-color);
        border: 2px solid var(--foreground-color);
        font-size: 0;
    }

    .video_with_content .video_content{
        width: 70%;
    }
    
    .video_thumb .video_image_landscape{
        position: absolute;
        width: 100%;
        height: 100%;
        top:50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .video_thumb .video_image_landscape .responsive {
        width: auto;
        height: 100%;
    }
    .video_thumb .video_image_portrait{
        position: absolute;
        width: 100%;
        height: 100%;
        top:50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .video_thumb .video_image_portrait .responsive {
        width: 100%;
        height: auto;
    }

    .video_content .title{
        font-size: 13px;
        font-weight: bold;
    }
    .video_content .notes{
        font-size: 12px;
        font-weight: normal;
        color: var(--label-dim-color);
    }

    .video_call_player,
    .video_call_delete {
        position: absolute;
        width: 100%;
        height: 100%;
        top:0;
        left:0;
    }

    .video_thumb .video_thumb_play,
    .video_thumb .video_thumb_delete{
        position: absolute;
        width: 35%;
        max-width: 40px;
        height: 35%;
        max-height: 40px;
        border-radius: 120px;
        background: rgba(0, 0, 0, 0.8);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        font-size: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .video_thumb_play{
        pointer-events: none;
        touch-action: none;
    }
    .video_thumb_play svg{
        font-size: 0;
        margin-left: 8%;
        width: 50%;
    }
    .video_thumb_delete svg{
        font-size: 0;
        width: 50%;
    }

    .video_call_player:hover .video_thumb_play{
        background: var(--active-color);
    }
    .video_call_delete:hover .video_thumb_delete{
        background: red;
    }

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

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

    .modal_container.modal_conn_lost {
        width: 200px;
        text-transform: uppercase;
        font-size: 13px;
    }
    .modal_container.modal_loading {
        width: 150px;
        text-transform: uppercase;
        font-size: 13px;
    }
    .modal_container.modal_uploading {
        width: 100%;
        max-width: 350px;
        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, .modal_notes {
        padding: 8px 16px 16px 16px;
        text-align: left;
    }
    .modal_body.no_pad {
        padding: 0;
    }
    .modal_body_header{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin: 0px -16px;
        padding: 0 16px 16px 16px;
        border-bottom:1px solid var(--background-color);

    }

    .modal_notes{
        border-top:1px solid var(--background-color);
        font-size: 12px;
        text-transform: uppercase;
    }

    .modal_body .modal_body_header h3{
        margin: 0;
        text-transform: uppercase;
        font-size: 12px;
    }
    .modal_body.modal_body_uploading{
        padding: 16px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        width: 100%;
        gap: 6px;
    }
    .modal_body.modal_body_results{
        padding: 16px;
        border-top:1px solid var(--background-color);
        text-align: center;
    }
    .modal_body.no_padding{
        padding: 0;
    }
    .modal_body.pad_16{
        padding: 16px;
    }
    .modal_uploader_result{
        display: none;
    }
    .modal_uploader_result.active{
        display: block;
    }
    .modal_body.border_bottom{
        border-bottom:1px solid var(--background-color);
    }

    .uploading_title{
        text-transform: capitalize;
    }
    .uploading_file_name{
        text-transform: lowercase;
        line-height: 1;
    }

    .modal_users_list_item{
        border-top:1px solid var(--background-color);
        padding: 16px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        cursor: pointer;
    }
    .modal_users_list_item.selected{
        background: var(--color-blue-hover);
        color: white;
    }
    .modal_users_list_item.selected .user_type{
        color: white;
    }
    .modal_users_list_item:hover{
        background: var(--active-color);
    }

    .modal_users_list_item.selected:hover{
        background: var(--color-blue-hover);
        color: white;
    }

    .modal_body_list .modal_users_list_item:only-child,
    .modal_body_list .modal_users_list_item:last-child{
        border-radius:0 0 6px 6px;
    }

    .modal_users_list_item .image{
        width: 38px;
        height: 38px;
        border-radius: 100px;
        overflow: hidden;
        background-color: var(--color-dim);
        margin-right: 16px;
    }

    .modal_users_list_item .info{
        flex:1;
        text-align: left;
        line-height: 1.2;
    }

    .modal_users_list_item .user_name{
        font-weight: bold;
    }
    .modal_users_list_item .user_type{
        font-size:12px;
        color: var(--label-dim-color);
    }
    .modal_users_list_item:hover .user_type{
        color: white;
    }
    .modal_users_list_item .icon{
        font-size: 0;
        width: 12px;
    }

    .modal_body_p16 {
        padding: 16px;
    }

    .modal_body_nopad{
        padding: 0;
    }

    .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(--foreground-offset-color);
        padding: 8px;
        border-radius: 6px;
    }

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

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

    .history_activity_item,
    .deal_activity_item {
        padding: 8px 16px;
    }

    .deal_activity_items {
        margin-top: 16px;
    }

    .deal_activity_loading{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap:16px;
    }

    .deal_activity_loading .loading_icon{
        width: 24px;
        font-size: 0;
    }

    .deal_activity_loading .loading_label p{
        font-weight: normal;
        color: var(--label-dim-color);
        font-size: 12px;
        text-transform: uppercase;
        font-weight: bold;
    }

    .history_container{
        width: 100%;
        padding: 16px;
    }

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

    .history_activity_item small,
    .deal_activity_item small{
        font-size: 11px;
        font-style: italic;
        display: block;
    }

    .history_activity_item:before,
    .deal_activity_item:before {
        content: "";
        position: absolute;
        width: 8px;
        height: 8px;
        bottom: -4px;
        left: -4px;
        margin-top: -4px;
        background: var(--label-color);
        border-radius: 16px;
    }
    .history_activity_item:after,
    .deal_activity_item:after {
        content: "";
        position: absolute;
        width: 18px;
        height: 0px;
        bottom: -1px;
        left: -4px;
        margin-top: -4px;
        border-bottom: 1px dotted var(--label-color);
    }

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

    .history_activity_item .action{
        margin-bottom: 4px;
    }

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

    .history_activity_item .flex_data_group{
        margin-bottom: 4px;
    }
    .history_activity_item .flex_data{
        font-size: 11px;
    }

    .history_activity_item .flex_data .label{
        text-transform: uppercase;
    }
    .history_activity_item .flex_data .value{
        font-weight: bold;
    }
    .history_activity_item .flex_data .label.dim,
    .history_activity_item .flex_data .value.dim{
        color: var(--label-dim-color);
    }
    .history_activity_item .flex_data .value.paid{
        background: green;
        color: white;
        padding: 0 4px;
        border-radius: 4px;
    }
    .history_activity_item .flex_data .value.failed{
        background: var(--color-orange);
        color: white;
        padding: 0 4px;
        border-radius: 4px;
    }
    .history_activity_item .flex_data .value.canceled,
    .history_activity_item .flex_data .value.declined{
        background: red;
        color: white;
        padding: 0 4px;
        border-radius: 4px;
    }

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

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

    .modal_body .history_activity_item p,
    .modal_body .deal_activity_item p,
    .history_activity_item p,
    .deal_activity_item p{
        font-size: 10px;
    }

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

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

    .modal_body small.deal_notes {
        color: var(--label-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; */
        font-size: 14px;
    }

    .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 h3.bold{
        font-weight: bold;
    }
    .modal_container.modal_prompt .modal_content h3.no_pad{
        padding: 0;
    }

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

    .modal_complete_task_info h3{
        font-size: 12px;
        color: var(--label-dim-color);
        margin: 0;
        text-transform: uppercase;
        word-spacing: 1px;
    }

    .modal_complete_task_info{
        padding: 8px 16px;
        border-radius: 6px;
        margin-top: 8px;
        background: var(--foreground-offset-color);
    }

    .modal_complete_task_info p{
        margin: 0;
    }
    .modal_complete_task_info small{
        font-weight: normal;
    }

    .modal_form_return_msg {
        padding: 0px 16px;
        margin-bottom: 16px;
    }
    #upload_progress_photos .modal_form_return_msg {
        padding:16px;
        margin: 0;
    }
    ._js_alert_return .modal_form_return_msg {
        padding: 0;
        margin: 16px 0 16px 0;
    }
    ._js_alert_return.modal_form_return_no_mrg {
        padding: 0 16px;
    }
    ._js_alert_return.modal_form_return_no_mrg .modal_form_return_msg{
        margin: 0;   
        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;
        gap:8px;
    }
    .modal_footer_col{
        flex-direction: column;
    }
    .footer_buttons_group{
        flex: 1;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .modal_footer[class*='display_grid_']{
        display: grid;
    }
    .modal_footer.modal_footer_action{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        gap:16px;
    }
    .modal_footer.modal_footer_action.hidden{
        display: none;
    }
    .modal_footer_action_buttons{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap:8px;
        width: 100%;
    }
    .modal_body_footer {
        border-top: 1px solid var(--modal-border);
        padding: 16px 16px 0 16px;
        margin: 8px -16px 0 -16px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap:8px;
    }
    .modal_merchant_body{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap:16px;
    }

    .pseudo_footer .button,
    .modal_body_footer .button_link,
    .modal_body_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: white;
        height: 38px;
        min-width: 38px;
        border: none;
        padding: 0px 8px;
        font-weight: bold;
        border-radius: 6px;
        width: 100%;
        font-size: 13px;
        text-decoration: none;
    }

    .product_button{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background: var(--foreground-color);
        color: var(--label-color);
        min-width: 38px;
        border: none;
        padding: 8px;
        font-weight: bold;
        border-radius: 6px;
        font-size: 13px;
        text-decoration: none;
        gap:8px;
        cursor: pointer;
    }
    .product_button .icon{
        display: inline-block;
        width: 12px;
        font-size: 0;
    }
    .product_button:hover{
        background: var(--active-color);
        color:white;
    }

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

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

    .button.btn_danger:hover,
    .pseudo_footer .button.btn_danger:hover,
    .modal_body_footer .button.btn_danger:hover,
    .modal_footer .button.btn_danger:hover {
        background: var(--color-red-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.btn_link{
        padding: 0;
        background: transparent;
        color:var(--label-dim-color)
    }
    .button.btn_link:hover{
        color:var(--label-color)
    }

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

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

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

    .button.btn_warning,
    .pseudo_footer .button.btn_warning,
    .modal_body_footer .button.btn_warning,
    .modal_footer .button.btn_warning {
        background: var(--color-orange);
        color: white;
    }

    .button.btn_warning:hover,
    .pseudo_footer .button.btn_warning:hover,
    .modal_body_footer .button.btn_warning:hover,
    .modal_footer .button.btn_warning:hover {
        background: orange;
        color: white;
    }
   

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

    .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_body_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_body_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_body_footer .button.btn_active:hover,
    .modal_footer .button.btn_active:hover {
        background: var(--color-blue-hover);
    }

    .connect_messages .cm_chat .head .button.btn_ios,
    .content_multilevel_menu .cm_active_content .head .button.btn_ios,
    .button.btn_ios{
        background: transparent;
        padding: 0px;
        margin: 0;
    }
    .connect_messages .cm_chat .head .button.btn_ios .button_label,
    .content_multilevel_menu .cm_active_content .head .button.btn_ios .button_label,
    .button.btn_ios .button_label{
        width: 100%;
        height: 100%;
    }

    .connect_messages .cm_chat .head .button.btn_ios .icon,
    .content_multilevel_menu .cm_active_content .head .button.btn_ios .icon,
    .button.btn_ios .icon{
        color: var(--active-color);
        width: 18px;
        height: 18px;
        font-size: 0;
    }

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

    .connect_messages .cm_chat .head .button.btn_ios.messages_flagged_btn .icon,
    .connect_messages .cm_chat .head .button.btn_ios.messages_archive_btn .icon{
        color:var(--label-dim-editor);
    }
    .connect_messages .cm_chat .head .button.btn_ios.messages_flagged_btn.btn_active .icon,
    .connect_messages .cm_chat .head .button.btn_ios.messages_archive_btn.btn_active .icon{
        color: var(--active-color);
    }
    .connect_messages .cm_chat .head .button.btn_ios.messages_flagged_btn.disabled,
    .connect_messages .cm_chat .head .button.btn_ios.messages_archive_btn.disabled{
        color:var(--label-dim-editor);
        opacity: 0.5;
        touch-action: none;
        pointer-events: none;
    }


    .connect_messages .cm_chat .head .button.btn_ios:hover .icon,
    .content_multilevel_menu .cm_active_content .head .button.btn_ios:hover .icon,
    .button.btn_ios:hover .icon{
        color: var(--color-label);
    }

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

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

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

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

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

    .input_group input[type="text"],
    .input_group input[type="number"],
    .input_group input[type="password"],
    .input_group input[type="file"],
    .input_group input[type="time"],
    .input_group input[type="text"]:focus,
    .input_group input[type="password"]:focus,
    .input_group input[type="file"]:focus,
    .input_group input[type="time"]:focus,
    .input_group input[type="text"]:active,
    .input_group input[type="password"]:active,
    .input_group input[type="file"]:active,
    .input_group input[type="time"]:active {
        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_group.input_fg_bg input[type="text"]{
        background: var(--foreground-color);
    }
    .select_custom_search .input_search input[type="text"],
    .dropdown_custom_search .input_search input[type="text"] {
        padding-left: 38px;
    }
    .input_group input.date_picker_custom_year_input{
        max-width: 66px;
    }
    .input_group input[type="text"]:active,
    .input_group input[type="number"]:active,
    .input_group input[type="password"]:active,
    .input_group input[type="file"]:active,
    .input_group input[type="time"]:active {
        outline: 2px solid var(--active-color);
    }

    .input_action{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        height: 38px;
        background: var(--background-color);
        padding: 0;
        border-radius: 6px;
    }
    .input_group .input_action label{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 0;
        gap: 4px;
        color: var(--label-color);
    }

    .leads_client_stats_container{
        width: 100%;
        background: var(--background-color);
        border-radius: 6px;
        padding: 8px;
        border:1px solid var(--background-color);
        cursor: pointer;
    }
    .leads_client_stats_container:hover{
        border-color: var(--active-color);
    }
    .leads_client_stats_total_data{
        width: 100%;
    }
    .leads_client_stats_total_data .stats_info_alt .icon{
        width: 12px;
    }
    .leads_client_stats_total_data .stats{
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .leads_client_stats_button_container{
        align-self: end;
    }

    .leads_client_stats {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
    }

    .leads_client_stats .stats_info_alt{
        justify-content: flex-start;
        width: auto;
        min-width: 55px;
        font-weight: bold;
    }
    .leads_client_stats_program{
        width: 38px;
        min-width: 38px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .leads_client_stats_program .program_label{
        font-size: 12px;
        font-weight: bold;
        min-width:20px;
        width:20px;
        min-height:20px;
        height:20px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        line-height: 1;
    }
    .leads_client_stats_program .program_label.pt{
        /* background: var(--pt-color); */
        color: var(--label-color);
    }
    .leads_client_stats_program .program_label.oc{
        /* background: var(--oc-color); */
        color: var(--label-color);
    }
    .leads_client_stats_program .program_label.gp{
        /* background: var(--gp-color); */
        color: var(--label-color);
    }
    .referral_link_container{
        background: var(--background-referral-link);
        padding: 8px;
        border-radius: 6px;
    }
    .leads_client_stats_breakdown{
        display: none;
        margin-top: 4px;
    }
    .leads_client_stats_container.open .leads_client_stats_breakdown{
        display: flex;
    }

    .referral_actions {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap:4px;
    }

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

    .referal_link{
        margin-top: 8px;
        font-size: 12px;
        color: var(--label-referral-link);
    }

    .referal_link.copied{
        color: var(--label-color);
    }

    .button_copy_data{
        background: var(--active-color);
        border-radius: 4px;
        color: white;
        padding: 4px 8px;
        border:none;
        font-weight: bold;
        font-size: 11px;
        cursor: pointer;
        height: 24px;
        text-decoration: none;
    }

    .button_copy_data .span_wrapper{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap:4px;
    }

    .button_copy_data .span_wrapper.default{
        display: flex;
    }
    .button_copy_data .span_wrapper.copied{
        display: none;
    }
    .button_copy_data.confirm,
    .button_copy_data.confirm:hover{
        background: var(--ntf-green);
    }
    .button_copy_data.confirm .span_wrapper.default{
        display: none;
    }
    .button_copy_data.confirm .span_wrapper.copied{
        display: flex;
    }


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

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

    .input_group .button_copy_data{
        position: absolute;
        right: 8px;
        bottom: 8px;
    }

    .input_file_group label{
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        width: inherit;
        height: inherit;
        border-radius: 6px;
        background: var(--foreground-offset-color);
        border: none;
        color: var(--label-offset-color);
        font-size: 14px;
        padding: 14px;
        width: 100%;
        min-height: 38px;
        cursor: pointer;
    }
    .input_file_group label:hover{
        background-color: var(--color-blue-hover);
    }
    .input_file_group input{
        position: absolute;
        width: 0;
        height: 0;
        overflow: hidden;
    }
    .input_file_group .file_label{
        display: flex;
        flex-direction: row;
        align-items:center;
        justify-content: flex-start;
        gap:16px;
    }
    .input_file_group .file_icon{
        width: 18px;
        font-size: 0;
    }
    .input_file_group .file_selected{
        margin-top: 8px;
        display: none;
        flex-direction: row;
        align-items:center;
        justify-content: flex-start;
        gap:8px;
    }
    .input_file_group .file_selected.active{
        display: flex;
    }
    
    .input_file_group .file_selected_data{
        flex: 1;
        line-height: 1;
        
    }
    .input_file_group .file_selected_icon{
        width: 26px;
        font-size: 0;
    }
    .input_file_group .file_selected p{
        margin: 0;
        padding: 0;
    }

    .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_checkbox_with_button{
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
        background: var(--foreground-color);
        padding: 8px;
        border-radius: 6px;
    }
    .input_group.input_checkbox_with_button.hidden{
        display: none;
    }

    .input_n_button{
        width: 100%;
        position: relative;
    }
    .input_group .input_n_button input[type="text"]{
        flex: 1;
        padding-right: 46px;
    }
    .input_n_button div{
        position: absolute;
        top:0;
        right:0;
        width: 38px;
        height: 38px;
        background: var(--color-blue);
        border: 4px solid black;
        color: white;
        border-radius: 8px;
        padding: 8px;
        font-size: 0;
        cursor: pointer;
    }
    .input_n_button div:hover{
        background: var(--color-blue-hover);
    }

    .pseudo_input_group div,
    .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;
    }

    .pseudo_input_group div{
        padding: 0px 16px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        font-size: 13px;
        font-weight: bold;
    }

    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.input_fg{
        margin-bottom: 8px;
    }

    .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_block.pad_b_16{
        padding-bottom: 16px;
    }
    .input_block h3{
        font-size: 13px;
        text-transform: uppercase;
    }

    .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;
    }

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

    .action input,
    .input_group_radio input {
        width: 0px;
        height: 0px;
        background: transparent;
        position: absolute;
        opacity: 0;
    }

    .action label .pseudo_radio,
    .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;
    }

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

    .action label input:checked~.pseudo_radio:after,
    .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%);
    }

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

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

    .input_group .input_checkbox label,
    .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.input_checkbox_item label,
    .input_group.input_checkbox.input_checkbox_item label{
        padding: 0;
    }
    .input_checkbox_item{
        background: var(--background-color);
        height: 38px;
        border-radius: 6px;
        padding: 0 8px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .input_group .input_checkbox label .pseudo_checkbox,
    .input_group.input_checkbox label .pseudo_checkbox {
        position: relative;
        width: 16px;
        height: 16px;
        min-width: 16px;
        min-height: 16px;
        border-radius: 4px;
        border: 2px solid var(--label-dim-color);
        touch-action: none;
        pointer-events: none;
    }

    .input_group .input_checkbox label .label,
    .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,
    .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,
    .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,
    .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,
    .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;
        text-align: left;
    }

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

    .input_group.input_cart_quantity {
        width: 100%;
        max-width: 55px;
    }

    .input_group.input_cart_quantity input {
        background: var(--foreground-color);
        padding: 14px 4px;
        width: 42px;
    }
    .input_group.input_cart_quantity input:focus {
        padding: 14px 4px;
        width: 42px;
    }

    .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_group_invert input[disable],
    .input_group.input_group_invert input[readonly]{
        background: var(--foreground-color);
        color: var(--label-disabled-color);
    }

    .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;
        resize: none;
    }
    .input_group.input_group_invert textarea {
        width: inherit;
        min-height: 240px;
        border-radius: 6px;
        background: var(--foreground-color);
        border: none;
        color: var(--label-offset-color);
        font-size: 14px;
        padding: 14px;
        font-family: inherit;
        resize: none;
    }
    .input_group textarea.textarea_small {
        min-height: 140px;
    }
    .input_group textarea.textarea_small {
        min-height: 100px;
        height: 100px;
    }
    .input_group textarea.textarea_mini {
        min-height: 76px;
    }
    .input_chat_audio_message_group,
    .input_chat_textarea_group{
        position: relative;
        flex: 1;
        min-height: 38px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .audio_player{
        width: 100%;
        min-height: 34px;
        border-radius: 6px;
        background: var(--background-color);
        border: none;
        color: var(--label-offset-color);
        font-size: 14px;
        padding:0 4px;
        font-family: inherit;
        border-radius: 68px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        justify-content: space-between;
    }
    .audio_player audio,
    .audio_player.hidden{
        display: none;
    }
    .audio_player .audio_icon{
        width: 26px;
        height: 26px;
        border-radius: 100px;
        border: 2px solid var(--label-dim-color);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    .audio_player .audio_icon div{
        width: 10px;
        height: 10px;
        border-radius: 2px;
        background:  var(--label-dim-color);
        font-size: 0;
    }
    .audio_player .audio_icon .icon{
        width: 10px;
        height: 10px;
        border-radius: 2px;
        background:  transparent;
        font-size: 0;
    }
    .audio_player .audio_icon .icon.icon_play{
        margin-left: 2px;
    }
    .audio_player .audio_icon.audio_discard{
        background: red;
        color: white;
        border-color: red;
    }
    .audio_player .audio_icon.audio_discard:hover{
        background: var(--color-red-hover);
        border-color: var(--color-red-hover);
    }
    .audio_player .audio_icon.audio_upload{
        background: var(--active-color);
        color: white;
        border-color: var(--active-color);
    }
    .audio_player .audio_icon.audio_upload:hover{
        background: var(--color-blue-hover);
        border-color: var(--color-blue-hover);
    }
    .audio_player .audio_icon.audio_toggle_play_pause{
        background: transparent;
    }
    .audio_player .audio_icon.audio_toggle_play_pause .icon{
        color: var(--label-dim-color);
    }
    .audio_player .audio_icon.audio_toggle_play_pause:hover .icon{
        color: var(--label-color);
    }
    .audio_icon:hover{
        border-color:var(--label-color);
    }
    .audio_icon:hover div{
        background:var(--label-color);
    }
    .audio_recording_display{
        flex:1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap:8px;
    }
    .audio_recording_waves{
        flex: 1;
        text-align: left;
        font-size: 11px;
        text-transform: uppercase;
    }
    .audio_recording_timer{
        color: var(--label-color);
    }
    .input_chat_audio_message_group .audio_recording_icon{
        width: 20px;
        height: 20px;
        border-radius: 100px;
        background: red;
        opacity: 0.5;
        animation: fadeIn .8s infinite alternate;
        margin: 4px;
    }

    @keyframes fadeIn { 
        from { opacity: 1; } 
    }
    .audio_uploader_progress{
        flex:1;
        border-radius: 100px;
        margin: 0 2px;
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0 8px;
        font-size: 11px;
        text-transform: uppercase;
        height: 23px;
    }
    .audio_uploader_progress_info{
        position: relative;
        z-index: 10;
    }
    .audio_uploader_progress_bar{
        position: absolute;
        top:0;
        left: 0;
        width:0%;
        height: inherit;
        border-radius: inherit;
        z-index: 0;
        background: var(--foreground-offset-color);
    }

    .input_chat_textarea_group .textarea_chat {
        width: 100%;
        min-height: 34px;
        border-radius: 6px;
        background: var(--background-color);
        border: none;
        color: var(--label-offset-color);
        font-size: 14px;
        padding:4px 50px 0 12px;
        font-family: inherit;
        border-radius: 16px;
        outline: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        resize: none;
        border:2px solid var(--background-color);
    }
    .input_chat_textarea_group .textarea_chat:focus{
        border:2px solid var(--active-color);
    }
    /* Hide scrollbar for Chrome, Safari and Opera */
    .textarea_chat::-webkit-scrollbar {
        display: none;
    }
  
    /* Hide scrollbar for IE, Edge and Firefox */
    .textarea_chat {
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }

    .connect_messages .cm_chat .msg_content{
        word-break: break-word;
    }

    .msg_content a{
        color: inherit;
    }

    .connect_messages .cm_chat .footer .input_chat_textarea_group .button{
        position: absolute;
        bottom: -3px;
        right: 0;
        height: 44px;
        min-width: 60px;
        z-index: 200;
        border-radius: 0px;
        background: transparent;
        padding-left: 16px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .connect_messages .cm_chat .footer .input_chat_textarea_group .button .icon{
        width: 44px;
        background: var(--active-color);
        margin: 0;
        padding: 4px;
        border-radius: 44px;
        margin-right: -1px;
    }

    .connect_messages .cm_chat .footer .input_chat_textarea_group .button .icon svg{
        width: 16px;
    }

    .connect_messages .cm_chat .footer .input_chat_textarea_group .button:hover .icon{
        background: var(--color-blue-hover);
    }

    @media (hover: none) {
        .connect_messages .cm_chat .footer .input_chat_textarea_group .button:hover .icon {
            background: var(--active-color);
            -webkit-animation: btn_messages_hover_mobile linear .5s; 
            animation: btn_messages_hover_mobile linear .5s;
        }
        @-webkit-keyframes btn_messages_hover_mobile { 
            0% { background-color: var(--color-blue-hover); }
            100% { background-color: var(--active-color); } 
        } 
        @keyframes btn_messages_hover_mobile { 
            0% { background-color: var(--color-blue-hover); }
            100% { background-color: var(--active-color); } 
        }
    }


    .input_group {
        text-align: left;
        position: relative;
    }
    .input_group label {
        display: inline-block;
        padding: 0px 4px 4px 4px;
        font-size: 11px;
        color: var(--label-offset-color);
        text-align: left;
    }
    .input_group.input_group_select_multi_value .input_group_tags{
        margin-top: 4px;
    }

    .input_group.input_checkbox_with_button label{
        padding: 0;
    }
    .input_group.input_checkbox_with_button button{
        padding: 4px 8px;
        background: var(--active-color);
        color: white;
        border:0;
        border-radius: 4px;
        cursor: pointer;
    }
    .input_group.input_checkbox_with_button button:hover{
        background: var(--color-blue-hover);
    }

    .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_product_picture{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding-top: 16px;
    }

    .input_image_upload_group,
    .input_product_upload_group,
    .input_profile_upload_group {
        position: relative;
    }

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

    .input_image_upload_container{
        width: 100%;
    }
    .input_image_upload_group{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        background: var(--background-color);
        height: 64px;
        border-radius: 6px;
    }
    .input_image_upload_group .image{
        height: 75%;
        border-radius: 4px;
        overflow: hidden;
        background: var(--foreground-color);
        margin-left: 7px;
    }

    .input_image_upload_group .action label{
        min-width: 150px;
        max-width: 162px;
        margin-right: 16px;
    }

    
    .input_image_upload_group .action .image_upload_button{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 12px;
        font-size: 14px;
        width: 100%;
        background: var(--foreground-color);
        padding: 8px 16px;
        border-radius: 4px;
    }

    .input_image_upload_group .action .image_upload_button_icon{
        display: block;
        width: 18px;
        font-size: 0;
    }

    .input_profile_upload_group .image canvas{
        display: none;
        position: absolute;
        top:0;
        left: 0;
        width: inherit;
        height: inherit;
        z-index: 2;
        background: red;
    }

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

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

    .input_product_upload_group .action label,
    .input_profile_upload_group .action label {
        display: block;
        width: 100%;
        height: 100%;
        background: var(--background-color);
        color: var(--label-color);
        border-radius: 100px;
        border: 2px solid var(--foreground-color);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        z-index: 3;
        position: relative;
    }

    .input_product_upload_group .product_upload_button,
    .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_product_upload_group .action label:hover .product_upload_button,
    .input_profile_upload_group .action label:hover .profile_upload_button {
        background: var(--active-color);
        color: var(--label-color);
    }
    .input_profile_upload_group .action label .profile_upload_button {
        top:-2px;
    }

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

    .input_file_group.error .input_validation_error,
    .input_container.error .input_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;
    }

    .flex_widget .input_file_group.error .input_validation_error,
    .flex_widget .input_container.error .input_validation_error,
    .flex_widget .input_group.error .input_validation_error { 
        position: absolute;
        z-index: 2000;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
    }

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

    .input_file_group.error .input_validation_error small,
    .input_container.error .input_validation_error small,
    .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_contract ul,
    .client_application_contract ol {
        margin: 32px;
        font-size: 14px;
        font-weight: 600;
    }

    .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;
    }
    .grid_list .stats.jc_r-LS,
    .client_stats .stats.jc_r-LS,
    .jc_r-LS {
        justify-content: flex-end;
    }
    .grid_list .stats.jc_c-LS,
    .client_stats .stats.jc_c-LS,
    .jc_c-LS {
        justify-content: center !important;
    }

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

    /* DISPLAY TYPES */
    .wrapper_header .info span.display_none-LS,
    .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: 88px;
    }
    .reports_cell.positive{
        color: var(--color-green);
    }
    .reports_cell.negative{
        color: var(--color-red);
    }
    .reports_cell.cell_btn{
        border: 1px dotted var(--cal-boder-color);
        cursor: pointer;
    }
    .reports_cell.cell_btn * {
        pointer-events: none;
        touch-action: none;
    }
    .reports_cell.cell_btn:hover{
        border-color: var(--active-color);
        border-style: solid;
    }
    .monthly_goals .reports_cell{
        color: var(--active-color);
    }
    .reports_cell_total {
        color: var(--active-color);
    }
    .reports_cell_total.loss{
        color: var(--color-red);
    }
    .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;
    }

    .reports .reports_heading h3{
        margin: 0;
        font-size: 12px;
        text-transform: uppercase;
    }

    /* DouglasCroti 24/02/2023 reports/trainer_sales */
    .display_grid_reports_data_trainers-LS {
        position: relative;
        display: grid;
        grid-template-columns: repeat(14, 1fr) 100px 100px;
        /* grid-auto-rows: minmax(min-content, max-content); */
    }

    .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;
    }

    .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;
        gap:8px;
    }

    .cal_total_sessions{
        background: var(--background-color);
        color: var(--label-color);
        border-radius: 4px;
        height: 38px;
        min-width: 50px;
        line-height: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap:4px;
    }

    .cal_total_sessions .label{
        font-size: 10px;
    }
    .cal_total_sessions .count{
        font-size: 12px;
        font-weight: bold;

    }

    .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;
    }

    .cal_select_day {
        width: 92px;
    }

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

    .cal_header_day{
        width: 30px;
        height: 30px;
        background: var(--active-color);
        border-radius: 30px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        line-height: 1;
        font-weight: bold;
        font-size: 16px;
        color: white;
    }

    .cal_month_year{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        line-height: 1;
       
    }

    .cal_month_year .day{
        margin-right: 3px;
    }

    .cal_month_year .month{
        font-size: 17px;
        font-weight: bold;
        text-transform: uppercase;
    }

    .cal_month_year .year sup{
        text-transform: uppercase;
        font-size: 10px;
    }

    .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);
        text-decoration: none;
    }

    .cal_header:hover{
        background: var(--color-dim);
    }

    .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_content_meal_plan .cal_day {
        min-width: 40px;
    }

    .cal_event {
        position: relative;
        flex: 1;
        width: 100%;
        min-height: 12px;
        display: flex;
        flex-direction: column;
        /* align-items: center; */
        justify-content: flex-start;
        border-bottom: 1px solid var(--cal-boder-color);
        font-size: 11px;
        padding: 0.5px 4px 0.5px 0px;
        min-height: 30.58px;
    }
    .cal_event.cal_event_hh{
        /* align-items: flex-start; */
        justify-content: flex-start;
    }

 
    .cal_content_meal_plan .cal_event{
        min-height: 33px;
        padding: 2px;
    }

    .cal_event_content {
        background-color: black;
        width: 100%;
        height: 100%;
        border-radius: 4px;
        text-align: left;
        padding: 4px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        cursor: pointer;
        opacity: 1;
        overflow: hidden;
        /* min-height:28.5px; */
    }

    .cal_event_content.not_available{
        color: #ddd;
        border-left: 2px solid #666;
    }
    .cal_event_content.not_available:hover{
        color: white;
    }

    .cal_event_hh.cal_event_content{
        height: 50%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 4px;
    }
    .cal_event_hh.cal_event_content .cal_event_name{
       flex: 1;
       overflow: hidden;
    }
    .cal_event_hh.cal_event_content .cal_event_desc{
        text-align: right;
        max-width: 47px;
        width: auto;
    }
    
    .cal_event_hours_1{ height: 100%; position: absolute; z-index: 90; justify-content: flex-start;}
    .cal_event_hours_2{ height: 200%; position: absolute; z-index: 90; justify-content: flex-start;}
    .cal_event_hours_3{ height: 300%; position: absolute; z-index: 90; justify-content: flex-start;}
    .cal_event_hours_4{ height: 400%; position: absolute; z-index: 90; justify-content: flex-start;}
    .cal_event_hours_5{ height: 500%; position: absolute; z-index: 90; justify-content: flex-start;}
    .cal_event_hours_6{ height: 600%; position: absolute; z-index: 90; justify-content: flex-start;}
    .cal_event_hours_7{ height: 700%; position: absolute; z-index: 90; justify-content: flex-start;}
    .cal_event_hours_8{ height: 800%; position: absolute; z-index: 90; justify-content: flex-start;}
    .cal_event_hours_9{ height: 900%; position: absolute; z-index: 90; justify-content: flex-start;}
    .cal_event_hours_10{ height: 1000%; position: absolute; z-index: 90; justify-content: flex-start;}
    .cal_event_hours_11{ height: 1100%; position: absolute; z-index: 90; justify-content: flex-start;}

    .cal_event_hours_130{ height: 150%; position: absolute; z-index: 90; justify-content: flex-start;}
    .cal_event_hours_230{ height: 250%; position: absolute; z-index: 90; justify-content: flex-start;}
    .cal_event_hours_330{ height: 350%; position: absolute; z-index: 90; justify-content: flex-start;}
    .cal_event_hours_430{ height: 450%; position: absolute; z-index: 90; justify-content: flex-start;}
    .cal_event_hours_530{ height: 550%; position: absolute; z-index: 90; justify-content: flex-start;}
    .cal_event_hours_630{ height: 650%; position: absolute; z-index: 90; justify-content: flex-start;}
    .cal_event_hours_730{ height: 750%; position: absolute; z-index: 90; justify-content: flex-start;}
    .cal_event_hours_830{ height: 850%; position: absolute; z-index: 90; justify-content: flex-start;}
    .cal_event_hours_930{ height: 950%; position: absolute; z-index: 90; justify-content: flex-start;}
    .cal_event_hours_1030{ height: 1050%; position: absolute; z-index: 90; justify-content: flex-start;}
    .cal_event_hours_1130{ height: 1150%; position: absolute; z-index: 90; justify-content: flex-start;}


    .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_half_hour{
        position: absolute;
        top: 53.5%;
        left: 0;
        z-index: 1;
        width: calc(100% - 4px);
    }

    .cal_event_meal_plan .icon{
        width: 100%;
        font-size: 0;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        min-width: 28px;
        max-width: 36px;
    }

    .cal_event_meal_plan svg{
        width: auto;
        height: 70%;
        max-height: 28px;
    }

    .cal_event_name {
        font-weight: bold;
        line-height: 1.3;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100%;
    }
    .cal_event_desc{
        line-height: 1.3;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100%;
    }
    .cal_event_default {
        background: var(--active-color);
        color: var(--color-white);
        border:1px solid var(--active-color);
        border-left: 3px solid var(--label-color);
    }
    .cal_event_as,
    .cal_event_cf,
    .cal_event_cp,
    .cal_event_cc,
    .cal_event_pt {
        background: var(--pt-color);
        color: var(--color-white);
        border:1px solid var(--pt-color);
        border-left: 3px solid var(--appointment-event-border-pt);
    }
    .cal_event_bc {
        background: var(--bc-color);
        color: var(--color-white);
        border:1px solid var(--bc-color);
        border-left: 3px solid var(--appointment-event-border-bc);
    }
    .cal_event_na {
        background: var(--background-color);
        color: var(--label-dim-color);
        border:1px solid var(--background-color);
        border-left: 3px solid var(--color-dim);
    }
    .cal_event_na:hover {
        background: var(--background-color);
        color: var(--label-color);
        border:1px solid var(--background-color);
        border-left: 3px solid var(--label-dim-color);
    }

    .cal_event_oc {
        background: var(--oc-color);
        color: var(--color-white);
        border:1px solid var(--oc-color);
        border-left: 3px solid var(--appointment-event-border-oc);
    }

    .cal_event_gp {
        background: var(--gp-color);
        color: var(--color-white);
        border:1px solid var(--gp-color);
        border-left: 3px solid var(--appointment-event-border-gp);
    }

    .cal_event_cc.success_session,
    .cal_event_cp.success_session,
    .cal_event_as.success_session,
    .cal_event_cf.success_session,
    .cal_event_pt.success_session,
    .cal_event_oc.success_session,
    .cal_event_gp.success_session,
    .cal_event_default.evaluations,
    .cal_event_cc.evaluations,
    .cal_event_cp.evaluations,
    .cal_event_as.evaluations,
    .cal_event_cf.evaluations,
    .cal_event_pt.evaluations,
    .cal_event_oc.evaluations,
    .cal_event_gp.evaluations,
    .cal_event_bc.evaluations {
        background: var(--color-red);
        color: var(--color-white);
        border-color: var(--color-red);
        border-left-color: var(--appointment-event-border-eval);
    }

    .cal_event_default.open_evaluation,
    .cal_event_pt.open_evaluation,
    .cal_event_oc.open_evaluation,
    .cal_event_gp.open_evaluation,
    .cal_event_oe.open_evaluation,
    .cal_event_bc.open_evaluation {
        background: #69211c;
        color: var(--color-white);
        border: 1px dotted var(--color-red);
        border-left: 2px solid red;
    }

    .cal_event_default.completed,
    .cal_event_cp.completed,
    .cal_event_cc.completed,
    .cal_event_as.completed,
    .cal_event_cf.completed,
    .cal_event_pt.completed,
    .cal_event_oc.completed,
    .cal_event_gp.completed {
        opacity:0.5;
    }
    .cal_event_default.completed:hover,
    .cal_event_cp.completed:hover,
    .cal_event_cc.completed:hover,
    .cal_event_as.completed:hover,
    .cal_event_cf.completed:hover,
    .cal_event_pt.completed:hover,
    .cal_event_oc.completed:hover,
    .cal_event_gp.completed:hover {
        opacity:0.65;
    }

    .cal_event_default:hover,
    .cal_event_cp:hover,
    .cal_event_cc:hover,
    .cal_event_as:hover,
    .cal_event_cf: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 {
        background: rgba(0, 0, 0, 0.2);
        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(--cal-boder-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: column;
        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_months_years_label{
        font-size: 10px;
        text-align: center;
        margin-bottom: 4px;
        text-transform: uppercase;
        color: var(--label-dim-color);
    }

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

    .date_picker_year_input_group{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap:4px;
    }

    .time_picker_input,
    .date_picker_custom_year_input{
        width: 80px;
        text-align: center;
        border-radius: 6px;
        background: var(--background-color) !important;
        border: none;
        color: var(--label-offset-color);
        font-size: 14px;
        padding: 14px;
        height: 38px;
    }
    .time_picker_input{
        width: 48px;
        max-width: 48px;
    }
    .date_picker_custom_year_input::-webkit-outer-spin-button,
    .date_picker_custom_year_input::-webkit-inner-spin-button {
        appearance: none;
        margin: 0;
    }

    /* Firefox */
    .date_picker_custom_year_input[type=number] {
        appearance: textfield;
    }

    .time_picker_button,
    .date_picker_year_button{
        width: 30px;
        padding: 8px;
        font-size: 0;
        background: transparent;
        color: var(--label-dim-color);
        border-radius: 6px;
        border:none;
        cursor: pointer;
    }
    .time_picker_button,
    .date_picker_year_button:hover{
        color:white;
    }

    .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_months{
        width: 77px;
    }

    .date_picker_years {
        flex: 1;
    }

    .select_time_picker_input_group{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .time_picker_label{
        font-size: 10px;
        font-weight: bold;
        color: var(--label-dim-color);
    }
    .time_picker_colon{
        padding-top: 12px;
    }

    .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);
    }

    .notes_homework_content{
        padding: 8px;
        border:1px solid var(--foreground-color);
        font-size: 13px;
        text-align: left;
    }

    .packages_item_container{
        border-top: 1px solid var(--foreground-color);
        margin: 4px -8px 0 -8px;
        padding: 8px 16px 0 16px;
    }

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

    .pac-container{
        z-index: 9000;
        background: var(--foreground-color);
        border-radius: 8px;
        border:2px solid var(--background-color);
        margin-top: 4px; 
        color: var(--label-color);
    }
    .pac-container::after{
        display: none;
    }

    .pac-item,
    .pac-item-query,
    .pac-item-query * {
        color:var(--label-color);
    }

    .pac-item{
        border-top:1px solid var(--background-color);
        padding-top: 4px;
        padding-bottom: 4px;
        cursor: pointer;
    }
    .pac-item:first-child{
        border:none;
    }
    .pac-item:hover{
        background: var(--active-color);
    }

    .add_new_card {
        display: block;
        color: var(--label-color);
        text-align: center;
        text-decoration: none;
        padding: 8px;
        border-radius: 6px;
    }
    .add_new_card:hover {
        color: white;
        background: var(--active-color);
    }
    img[data-modal]{
        cursor: pointer;
    }
     /*  */
     .app_version_container{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }
    .app_version_item{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        background: var(--background-color);
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 11px;
        text-transform: uppercase;
    }
    /*  */
    .signature_pad_block{
        padding: 16px 0;
    }
    .signature_pad_container{
        position:relative;
        max-width: 470px;
    }
    .signature_required{
        position: absolute;
        top:0;
        left:0;
        width: 100%;
        height: 100%;
        background: #ff8a8a;
        color: black;
        display: none;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        touch-action: none;
        pointer-events: none;
    }
    .signature_pad_container.error .signature_required{
        display: flex;
    }
    #signature-pad {
        border: 1px solid #ccc;
        touch-action: none;
        width: 100%;
        height: 100px;
        background: white;
        max-width: 470px;
    }
    /*  */
    .modal_merchant_user_info{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 8px;
        background: var(--background-color);
        width: 100%;
        padding: 16px;
        border-radius: 6px;
    }
    .modal_merchant_user_info h3{
        margin: 0;
        font-size: 18px;
        text-transform: uppercase;
        color: var(--label-dim-color);
    }
    .modal_body .modal_merchant_user_info p.label{
        font-size: 12px;
        font-weight: 400;
        color: var(--label-dim-color);
    }
    .modal_body .modal_merchant_user_info p{
        min-height: 20px;
    }
    .modal_body .modal_merchant_user_info p:empty::before {
        content: "N/A";
        color: var(--label-color);
        background: transparent;
    }

    .collapse_header {
        border-bottom: 1px dotted var(--color-dim-hover);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap:8px;
        padding-bottom: 8px;
        padding-right: 8px;
        cursor: pointer;
        margin-bottom: 8px;
    }
    .collapse_header:hover {
        color: var(--active-color);
    }

    .collapse_header .icon.open{
        color: var(--label-dim-color);
    }

    ._open ._collapse_item{
        display: block;
    }
    ._collapse_section{
        margin-bottom: 8px;
    }

    ._collapse_section._open .indicator.close {
        display: block;
    }
    ._collapse_section._open .indicator.open {
        display: none;
    }

    .blog_item p{
        font-size: 14px;
        font-weight: bold;
        display: block;
        line-height: 1.3;
    }
    .blog_item small{
        display: block;
        font-size: 10px;
        text-transform: uppercase;
        text-align: left;
    }
    .blog_item small .active{
        color: var(--color-green);
    }
    .blog_item small .inactive{
        color: var(--label-dim-color);
    }
    .blog_item small .pinned{
        color: var(--color-yellow);
        font-weight: bold;
        padding-left: 7px;
        margin-left: 3px;
        border-left:1px solid var(--color-dim-hover);
        position: relative;
    }

    .application_link {
        padding: 8px;
        margin-top: 16px;
        background: var(--background-color);
        border-radius: 6px;
    }
    .application_link .title{
        font-size: 11px;
        font-weight: bold;
        color: var(--label-dim-color);
    }
    .application_link .link{
        font-size: 14px;
        font-weight: bold;
        color: var(--active-color);
        text-decoration: none;
        cursor: pointer;
    }
    .application_link .copy{
        font-size: 11px;
        font-weight: bold;
        text-transform: uppercase;
        color: var(--label-color);
        text-decoration: none;
        text-align: right;
        cursor: pointer;
    }
    .application_link .copy:hover {
        color: var(--color-green);
    }
    .application_link .link:hover{
        text-decoration: underline;
    }

    /* ================ POST FEED CLASSES ================ */
    .menu_community {
        cursor: pointer;
    }
    .menu_community .menu_content{
        max-width: calc(100% - 30px);
    }
    .menu_community .menu_description{
        margin-top: 4px;
    }
    .post_feed {
        margin: 0 auto;
        max-width: 945px;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .post_feed__item {
        width: 100%;
        background: #2c2a2e;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        border: 1px solid var(--post-border);
        cursor: pointer;
        scroll-margin-top: 16px;
    }
    
    .post_feed__item._pinned{
        border-color: #007d1f;
    }

    .post_feed__item .icon_pin{
        display: none;
        width: 18px;
        height: 18px;
        color: #1dc447;
    }

    .post_feed__item._pinned .icon_pin{
        display: block;
    }

    .post_feed__item .btn_menu{
        width: 18px;
        height: 18px;
        color: var(--active-color);
        display: block;
        background: none;
        border: none;
        cursor: pointer;
    }

    .post_feed__item .btn_menu i{
        width: 18px;
        height: 18px;
    }
    .post_feed__item .btn_menu:hover{
        width: 18px;
        height: 18px;
        background: transparent;
        border: none;
        display: block;
        color: var(--active-color);
    }
    .post_feed__item .btn_menu:hover {
        color: var(--label-color);
    }

    .post_feed_bookmarked {
        display: none;
    }
    .post_feed__item .btn_menu._bookmarked .post_feed_bookmarked {
        display: block;
    }
    .post_feed__item .btn_menu._bookmarked .post_feed_bookmark {
        display: none;
    }
    
    .light_mode_alt {
        .post_feed__item {
            background: #f5f4f8;
        }
        .post_feed__item._pinned{
            border-color: #00dd2d;
        }
        .post_feed__item .icon_pin{
            color: #00b525;
        }
    }

    .post_feed__item:hover,
    .post_feed__item._pinned:hover{
        border-color: var(--active-color);
    }

    .post_feed__header {
        display: flex;
        flex-direction: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 16px 0 16px;
        gap: 8px;
    }
    .post_feed__header h2{
        font-size: 17px;
        text-transform: none;
        font-weight: 600;
    }
    .post_feed__item h3{
        font-size: 14px;
        text-transform: capitalize;
        font-weight: 600;
        margin: 0;
    }
    .post_feed__menu {
        display: flex;
        flex-direction: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
    }    
    .post_feed__modal_view {
        padding: 16px 8px 16px 16px;
        border-color: transparent;
    }    
    .post_feed__comments--tread{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 16px;
    }
    .post_feed__comments--replies_container{
        padding-left: 46px;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .post_feed__comments--item,
    .post_feed__profile {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 8px;
    }
    .post_feed__comments--item .thumb .image,
    .post_feed__profile .thumb .image{
        background: var(--color-img-background);
        border-radius: 100px;
        overflow: hidden;
        width: 38px;
        height: 38px;
    }
    .post_feed__profile--info {
        line-height: 1.5;
        text-align: left;
    }
    .post_feed__profile--info h3,
    .post_feed__profile--info .name {
        margin: 0;
    }
    .post_feed__date_title {
        color: var(--label-dim-color);
        font-size: 12px;
        font-weight: 400;
        line-height: 1.1;
    }
    .post_feed__topic {
        color: var(--label-dim-color);
        font-size: 11px;
        font-weight: bold;
        line-height: 1.1;
        text-transform: capitalize;
    }
    .post_feed__body--preview {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 16px;
        padding: 0px 16px;
    }
    .post_feed__content_container--preview{
        flex:1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 4px;
    }
    .post_feed__thumbnail--preview{
        height: 96px;
        width: 96px;
        border-radius: 6px;
        background: var(--foreground-color);
        overflow: hidden;
        border: 1px solid #464646;
        position: relative;
    }
    .light_mode_alt .post_feed__thumbnail--preview{
        border: 1px solid #cacaca;
    }
    .post_feed__thumbnail--preview img{
        height: 100%;
        width: 100%;
        object-fit: cover; /* Ensures full coverage, cropping if needed */
        display: block; /* Removes any default inline gaps */
    }
    
    .post_feed__title--preview {
        font-size: 18px;
        font-weight: bold;
        display: -webkit-box;
        line-clamp: 1;
        -webkit-line-clamp: 1; /* Limit to 1 lines */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .post_feed__content {
        font-size: 15px;
        line-height: 1.5;
    }
    .post_feed__content--preview {
        font-size: 15px;
        line-height: 1.5;
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2; /* Limit to 2 lines */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .post_feed__content--preview a {
        pointer-events:none;
        touch-action:none;
        color: var(--active-color);
        text-decoration:none;
    }
    .post_feed__view--content a {
        color: var(--active-color);
        text-decoration:none;
    }
    .post_feed__view--content a:hover {
        text-decoration:underline;
    }
    .post_feed__footer {
        display: flex;
        flex-direction: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 16px;
        border-top: 1px solid var(--post-border);
    }
    /* .post_view__footer{
        border-bottom: 1px solid var(--post-border);
    } */
    .post_feed__comments--action,
    .post_feed__footer--action {
        display: flex;
        flex-direction: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 8px;
    }
    .post_feed__footer--action_group {
        display: flex;
        flex-direction: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .post_feed__footer--needs_reply{
        display: flex;
        flex-direction: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
        font-size: 11px;
        font-weight: bold;
        color: var(--color-orange);

    }
    .post_feed__footer--needs_reply i{
        display: block;
        font-size: 0;
        width: 12px;
    }
    .post_feed__footer--btn_editor,
    .post_feed__footer--btn {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        height: 26px;
        border: none;
        background: transparent;
        color: var(--label-dim-color);
        font-weight: bold;
        /* border: 1px solid #ccc; */
        padding: 4px 6px;
        border-radius: 6px;
        cursor: pointer;
    }
    .post_feed__footer--btn i {
        width: 18px;
        height: 18px;
    }

    .post_feed__footer--btn_editor {
        width: 34px;
        height: 34px;
    }
    .post_feed__footer--btn_editor i {
        width: 22px;
        height: 22px;
    }
    .post_feed__footer--btn_editor:hover{
        color: var(--active-color);
        background: rgba(0, 0, 0, 0.4);
    }
    .light_mode_alt .post_feed__footer--btn_editor:hover{
        color: var(--active-color);
        background: rgba(0, 0, 0, 0.05);
    }

    .post_feed__footer--btn_editor[disabled]{
        opacity: 0.5;
        touch-action: none;
        pointer-events: none;
    }

    /* .post_feed__footer--btn._liked:hover .icon_like, */
    .post_feed__footer--btn._like .icon_like{  display: block; color:red}
    
    /* .post_feed__footer--btn._liked:hover .icon_liked, */
    .post_feed__footer--btn._like .icon_liked{ display: none; }

    /* .post_feed__footer--btn._like:hover .icon_like, */
    .post_feed__footer--btn._liked .icon_like{  display: none; }

    /* .post_feed__footer--btn._like:hover .icon_liked, */
    .post_feed__footer--btn._liked .icon_liked{ display: block; color:red; }

    .post_feed__footer--btn._like:hover,
    .post_feed__footer--btn._liked:hover{
        background: var(--foreground-color);
        color: red;
    }

    .post_feed__footer--btn._view_counter:hover {
        background: var(--foreground-color);
        color: var(--label-color);
    }
    .post_feed__footer--btn._comments:hover {
        background: var(--foreground-color);
        color: var(--label-color);
    }

    .post_feed__footer--counter {
        font-size: 13px;
        font-weight: bold;
        min-width: 18px;
    }
    .post_feed__footer--comments {
        font-size: 11px;
        font-weight: 600;
        color: var(--label-dim-color);
    }
    /* POST SUPPORT */
    .post_feed__support {
        padding-bottom: 11px;
        gap: 3px;
    }
    .post_feed__support--header {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 5px;
        padding: 16px 16px 2px;
    }    
    .modal .post_feed__support--header {
        padding: 0;
    }
    .post_feed__support--profile {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 7px;
        min-width: 0;
    }
    .post_feed__support--profile .thumb .image {
        background: var(--color-img-background);
        border-radius: 100px;
        overflow: hidden;
        width: 38px;
        height: 38px;
    }
    .post_feed__support--profile .userinfo {
        flex: 1;
        min-width: 0;        
        line-height: 1.5;
        text-align: left;
    }
    .post_feed__support--profile .userinfo h3 {
        margin: 0;
    }
    .post_feed__support--profile .userinfo p {
        color: var(--label-dim-color);
        font-size: 12px;
        font-weight: 400;
        line-height: 1.1;
    }
    .post_feed__support--profile .userinfo h3,
    .post_feed__support--profile .userinfo p {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .post_feed__support--metadata {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
    }
    .post_feed__support--infos {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        font-size: 11px;
        color: var(--label-color);
    }
    .post_feed__support--info {
        background-color: transparent;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        padding: 2px 6px;
        font-weight: bold;
        text-transform: uppercase;
    }
    .post_feed__support--status-new {
        border-color: var(--support-status-new);
        color: var(--support-status-new);
    }
    .post_feed__support--status-open {
        border-color: var(--support-status-open);
        color: var(--support-status-open);
    }
    .post_feed__support--status-in_progress {
        border-color: var(--support-status-in_progress);
        color: var(--support-status-in_progress);
    }
    .post_feed__support--status-pending {
        border-color: var(--support-status-pending);
        color: var(--support-status-pending);
    }
    .post_feed__support--status-closed {
        border-color: var(--support-status-closed);
        color: var(--support-status-closed);
    }
    .post_feed__support--status-reopened {
        border-color: var(--support-status-reopened);
        color: var(--support-status-reopened);
    }
    .post_feed__support--status-resolved {
        border-color: var(--support-status-resolved);
        color: var(--support-status-resolved);
    }
    .post_feed__support--status-escalated {
        border-color: var(--support-status-escalated);
        color: var(--support-status-escalated);
    }
    .post_feed__support--color-low {
        background-color: var(--support-priority-low);
        color: black;
    }
    .post_feed__support--color-medium {
        background-color: var(--support-priority-medium);
    }
    .post_feed__support--color-high {
        background-color: var(--support-priority-high);
    }
    .post_feed__support--color-monitoring {
        background-color: var(--support-priority-monitoring);
    }
    .post_feed__support--color-urgent {
        background-color: var(--support-priority-urgent);
    }
    .light_mode_alt .post_feed__support--color-urgent {
        color: white;
    }
    .post_feed__support .post_feed__menu {
        position: relative;
    }
    /* POST COMMENTS */
    .post_feed__comments {
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .post_feed__comments--comment_container {
        width: 100%;
        max-width: calc(100% - 46px);
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .post_feed__comments--comment_editor {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .post_feed__comments--add_comment .post_feed__field--content{
        padding: 8px;
    }
    .post_feed__comments--add_comment{
        width: 100%;
        padding: 4px;
        border: 1px solid var(--post-border);
        border-radius: 16px;
    }
    .post_feed__comments--comment{
        width: 100%;
        padding: 12px;
        border: 1px solid var(--menu-border);
        background: rgba(0, 0, 0, 0.3);
        border-radius: 16px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .light_mode_alt .post_feed__comments--comment{
        background: rgba(0, 0, 0, 0.05);
    }
    .post_feed__comments--comment_content{
        width: 100%;
    }
    .post_feed__comments--head{
        display: flex;
        justify-content: space-between;
        gap: 8px;
    }
    .post_feed__comments--heading{
        font-size: 13px;
        font-weight: 600;
    }
    .post_feed__comments--date{
        color: var(--label-dim-color);
        font-size: 12px;
        font-weight: 400;
        line-height: 1.1;
    }
    .post_feed__comments--content{
        width: 100%;
        font-size: 16px;
        font-weight: 400;
        outline: none;
        border: none;
        color: var(--post-content);
    }
    /* POST FEED FORM */
    .post_feed__form p{
        font-size: 16px;
        font-weight: 400;
    }
    .post_feed__form a{
        color: var(--color-blue);
        text-decoration: none;
    }
    .post_feed__form{
        width: 100%;
        min-height: 200px;
        padding: 12px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 8px;
    }
    .modal_post_feed__view {
        text-align: left;
    }
    .post_feed__view{
        width: 100%;
        padding: 0px 16px 16px 16px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 8px;
    }
    .post_feed__field--title{
        width: 100%;
        font-size: 20px;
        font-weight: bold;
        outline: none;
        border: none;
        min-height: 32px;
    }
    .post_feed__view--title{
        width: 100%;
        font-size: 20px;
        font-weight: bold;
        outline: none;
        border: none;
    }
    .post_feed__field--content,
    .post_feed__view--content{
        flex: 1;
        width: 100%;
        font-size: 16px;
        font-weight: 400;
        outline: none;
        border: none;
        color: var(--post-content);
        word-break: break-word;
        scroll-margin-top: 80px;
    }
    .post_feed__comments--content a,
    .post_feed__field--content a{
        color: var(--active-color);
        text-decoration: none;
    }

    .post_feed__comments--content a:hover,
    .post_feed__field--content a:hover {
        text-decoration: underline;
    }
    [contenteditable="true"] a:hover{
        text-decoration: none !important;
    }
    [contenteditable="true"]{
        -webkit-user-select: text;
        user-select: text;
        touch-action: manipulation; 
        -webkit-tap-highlight-color: transparent;
        cursor: text;
    }
    [contenteditable][data-name="content"] p { margin: 0; line-height: 1.4; }
    .post_feed__field--title:empty::before,
    .post_feed__field--content:empty::before {
        content: attr(data-placeholder);
        color: var(--label-dim-color);
        pointer-events: none;
        touch-action: none;
        display: block;
    }
    .post_feed__field--title._error{
        border-bottom: 1px dashed rgba(255, 99, 71, 0.5);
    }
    .post_feed__field--content{
        border-radius: 12px;
        padding: 8px;
        margin-bottom: 4px;
        background:rgba(0,0,0,0.1);
        border:1px solid rgba(0,0,0,0.1);
    }
    .post_feed__field--content._error{
        padding: 8px;
        font-weight: bold;
        border-radius: 12px;
        margin-bottom: 4px;
        border:1px dashed rgba(255, 99, 71, 0.5);
    }
    .post_feed__field--title._error:empty::before,
    .post_feed__field--content._error:empty::before {
        color: red;
    }
    .post_feed__comments--footer,
    .post_feed__editor--footer{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .post_feed__comments--footer-menu,
    .post_feed__editor--footer-menu{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap:12px;
    }
    .post_feed__comments--footer-menu {
        flex-grow: 4;
    }
    .post_feed__comments--footer-action{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        flex:1;
        gap: 4px;
    }
    .post_feed__editor--footer-menu._flex_end{
        justify-content: flex-end;
    }
    .post_feed__editor--footer-action {
        flex: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap:8px;
        max-width: 520px;
    }
    .post_feed__editor--footer-action .button_menu{
        background: transparent;
        border-color: #535353;
    }
    .post_feed__editor--footer-action .button_menu._error{
        border-color: red;
        background: rgba(255, 99, 71, 0.2);
    }
    .post_feed__comments--button_close,
    .post_feed__comments--button{
        cursor: pointer;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background: var(--color-dim);
        color: var(--label-color);
        height: 38px;
        min-width: 80px;
        border: none;
        padding: 0px 8px;
        font-weight: bold;
        border-radius: 12px;
        cursor: pointer;
        text-decoration: none;
        font-size: 14px;
        width: 100%;
    }
    .post_feed__comments--button:hover{
        background: var(--active-color);
        color: white;
    }
    .post_feed__comments--button_close{
        min-width: 38px;
        width: 38px;
        border: 1px solid var(--color-dim);
        background: transparent;
        color: var(--label-dim-color);
    }
    .post_feed__comments--button_close:hover{
        border-color: var(--post-border);
        color: var(--active-color);
    }
    .post_feed__comments--button_close i {
        font-size: 0;
        width: 10px;
    }
    .post_feed__comments--button._processing{
        opacity: 0.7;
        pointer-events: none;
        touch-action: none;
        background: var(--active-color);
        color: white;
    }

    .post_feed__poll_cast--container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 4px;
        padding:0 16px;
    }

    .post_feed__poll_cast--title i {
        display:block;
        width:10px;
        height:10px;
        font-size:0;
    }
    .post_feed__poll_cast--title {
        font-weight: bold;
        color: var(--color-green);
        border: 1px solid var(--color-green);
        padding: 2px 8px;
        border-radius: 50px;
        font-size: 12px;
        text-transform: uppercase;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 5px;
    }
    .post_feed__poll_cast--description {
        font-weight: bold;
        margin-left:4px;
        font-size: 12px;
        color: var(--color-green);
    }

    .post_feed__poll_container--options,
    .post_feed__poll_container{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 8px;
    }
    [data-append_poll_results="processing"] [data-poll_results]{
        opacity: 0.5;
        cursor: wait;
    }
    [data-append_poll_results="processing"] [data-poll_results] *{
        touch-action: none;
        pointer-events: none;
    }
    .post_feed__poll_container--header,
    .post_feed__poll_container--question{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
    }
    .post_feed__poll_container--header{
        justify-content: space-between;
    }
    .post_feed__poll_container--title i{
        font-size: 0;
        width: 16px;
        height: 16px;
        color: var(--label-dim-color);
    }
    .post_feed__poll_container--saving {
        display: none;
        font-size: 11px;
        font-weight: bold;
        text-transform: uppercase;
        color: var(--color-green);

    }
    [data-append_poll_results="processing"] .post_feed__poll_container--saving {
        display: block;
    }
    .post_feed__poll_container--saving i{
        font-size: 0;
        width: 16px;
        height: 16px;
        color: var(--label-dim-color);
    }
    .post_feed__poll_container--title h2{
        font-size: 16px;
        font-weight: bold;
    }
    .post_feed__poll_container--title {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
    }
    .post_feed__poll_container--remove_poll {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        border:none;
        border-radius: 4px;
        background: var(--color-red-x);
        color: white;
        padding: 4px 8px;
        cursor: pointer;
    }
    .post_feed__poll_container--remove_poll:hover{
        background: var(--color-red);
    }
    .post_feed__poll_container--remove_poll i{
        width: 10px;
        height: 10px;
        font-size: 0;
    }
    .post_feed__poll_container--add_option{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        border:2px solid transparent;
        border-radius: 6px;
        background: transparent;
        color: var(--label-color);
        padding: 4px 8px;
        cursor: pointer;
        font-size: 16px;
        opacity: 0.8;
    }
    .post_feed__poll_container--add_option i{
        width: 16px;
        height: 16px;
        font-size: 0;
        color: var(--active-color);
    }
    .post_feed__poll_container--add_option:hover{
        opacity: 1;
    }
    .post_feed__poll_container--add_option[disabled]{
        display: none;
        touch-action: none;
        pointer-events: none;
        opacity: 0.2;
    }
    .post_feed__poll_container--btn {
        width: 24px;
        height: 24px;
        padding: 4px;
        border: 0;
        border-radius: 6px;
        background: transparent;
        font-size: 0;
        color: var(--label-dim-color);
        cursor: pointer;
    }
    .post_feed__poll_container--btn:hover {
        color: red;
    }
    .post_feed__poll_container--input {
        width: 100%;
    }
    .post_feed__poll_container--input input{
        box-sizing: border-box;
        width: 100%;
        border: 1px solid var(--color-dim-hover);
        border-radius: 6px;
        background-color: transparent;
        color: var(--label-color);
        font-weight: normal;
        font-style: normal;
        font-size: 16px;
        line-height: 1.5;
        padding: 0px 14px;
        height: 44px;
    }
    .post_feed__poll_container--input input[readonly]{
        touch-action: none;
        pointer-events:none;
        opacity:0.5;
    }
    .post_feed__poll_container--vote {
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 16px ;
    }
    .post_feed__poll_container--result {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        overflow: hidden;
        padding: 8px;
        border: 1px solid var(--post-border);
        border-radius: 24px;
        flex: 1 1 0%;
        position: relative;
        font-weight: normal;
        font-style: normal;
        font-size: 16px;
        line-height: 1.5;
        cursor: pointer;
        z-index: 1;
    }
    .post_feed__poll_container--metric{
        height: 100%;
        width: 100%;
        /* background-color: rgba(0, 112, 255, 0.41); */
        background-color: var(--post-border);
        transform-origin: 0px 0px;
        transform: scaleX(0);
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 0;
        transition: transform 400ms;
        animation-delay: 2ms;
        z-index: 0;
    }
    .post_feed__poll_container--checkbox{
        position: relative;
        height: 20px;
        width: 20px;
        border-radius: 40px;
        border: 2px solid var(--color-dim-hover);
        flex-shrink: 0;
        background: var(--background-color);
    }
    .post_feed__poll_container--checkbox i{
        color: var(--color-green);
        display: none;
        font-size: 0;
        width: 20px;
        top: -3px;
        position: absolute;
        left: 1px;
    }
    .post_feed__poll_container--value{
        flex: 1;
    }
    .post_feed__poll_container--result:hover{
        border-color: var(--label-dim-editor);
    }
    .post_feed__poll_container--result:hover .post_feed__poll_container--checkbox {
        border-color: var(--active-color);
    }
    ._voted .post_feed__poll_container--checkbox i{
        display: block;
    }

    .post_feed__poll_container--result_content{
        width: 100%;
        z-index: 1;
    }
    .post_feed__poll_container--result_heading{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }
    
    .post_feed__poll_container--result_count {
        background: var(--background-color);
        font-size: 11px;
        font-weight: bold;
        text-transform: capitalize;
        border-radius: 50px;
        padding: 4px 10px;
    }

    .post_feed__media_viewer {
        width: 100%;
        overflow-y: hidden;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 8px;
    }

    .post_feed__media_viewer--videos,
    .post_feed__media_viewer--images {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 8px; 
    }

    .post_feed__media_viewer--video_thumb {
        width: 370px;
        height: 210px;
        position: relative;
    }
    .post_feed__media_viewer--video_thumb img{
        width: 100%;
        height: auto;
    }
    .post_feed__media_viewer--image_thumb {
        width: 210px;
        height: 210px;
    }
    .post_feed__media_viewer--play_button{
        position: absolute;
        width: 100%; height: 100%; top:0; left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 1;
    }
    .post_feed__media_viewer--play_button i {
        width: 50px;
        color: rgba(0,0,0,0.6);
        font-size: 0;
    }
    .post_feed__thumbnail--preview .post_feed__media_viewer--play_button i {
        width: 32px;
        color: rgba(0,0,0,0.6);
        font-size: 0;
    }

    .post_feed__comments .post_feed__media_viewer--video_thumb {
        width: 185px;
        height: 105px;
    }
    .post_feed__comments .post_feed__media_viewer--image_thumb {
        width: 105px;
        height: 105px;
    }

    .post_feed__media_viewer--image_thumb img{
        height: 100%;
        width: 100%;
        object-fit: cover; /* Ensures full coverage, cropping if needed */
        display: block; /* Removes any default inline gaps */
    }

    .post_feed__media_viewer--video_thumb,
    .post_feed__media_viewer--image_thumb{
        scroll-snap-align: start;
        flex-shrink: 0;
        border:1px solid var(--menu-border);
        border-radius: 8px;
        overflow: hidden;
        position: relative;
        background-color: var(--background-color);
    }

    .post_feed__media_viewer--files {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px; 
    }

    .post_feed__media_viewer--file_item a,
    .post_feed__media_viewer--file_item{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 4px;
        background: var(--foreground-offset-color);
        border: 1px solid var(--foreground-offset-color);
        padding: 4px;
        overflow: hidden;
        min-width: 180px;
        max-width: 320px;
        color: var(--label-color);
        border-radius: 4px;
        text-decoration: none;
        
    }
    .post_feed__media_viewer--file_item a{
        margin: -4px;   
    }
    .post_feed__media_viewer--file_item a:hover {
        color: var(--active-color);
    }
    .post_feed__media_viewer--file_item[data-target="processing"]{
        color: var(--label-dim-color);
    }
    .post_feed__media_viewer--file_name {
        font-size: 12px;
        display: -webkit-box;
        line-clamp: 1;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .post_feed__media_viewer--file_item i {
        display: block;
        width: 17px;
        font-size: 0;
    }
    .post_feed__media_viewer--file_btn{
        width: 22px;
        height: 22px;
        font-size: 0;
        padding: 4px;
        background: rgba(0,0,0,0.2);
        border-radius: 4px;
        cursor: pointer;
    }
    .post_feed__media_viewer--file_btn i {
        width: 13px;
    }
    .post_feed__media_viewer--file_btn:hover{
        background: red;
        color: white;
    }

    .post_feed__media_viewer--file_item[data-target="processing"] .post_feed__media_viewer--file_btn,
    .post_feed__media_viewer--file_item[data-target="processing"] .post_feed__media_viewer--file_btn:hover{
        background: transparent;
        padding: 2px;
        border-radius: 4px;
        cursor: wait;
    }

    .post_feed__media_viewer--top-controls {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 100;
        padding: 8px;
    }
    .post_feed__media_viewer--bottom-controls {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 100;
        padding: 8px;
    }

    .post_feed__media_viewer--button{
        width: 32px;
        height: 32px;
        font-size: 0;
        padding: 6px;
        background: rgba(0, 0, 0, 0.7);
        border-radius: 6px;
        cursor: pointer;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .post_feed__media_viewer--button._delete:hover{
        background: var(--color-red-x);
        color: rgba(255, 255, 255, 0.9);
    }

    .post_feed__media_viewer--processing {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .post_feed__media_viewer--processing .loading_icon {
        width: 32px;
        font-size: 0;
        opacity: 0.9;
    }

    .mention-menu.hidden {
        display: none;           /* ensures it doesn't intercept taps */
        pointer-events: none;    /* belt & suspenders */
        visibility: hidden;      /* optional */
    }
    .mention-menu:not(.hidden) {
        pointer-events: auto;    /* only when visible */
    }

    .mention-menu .mention-item { pointer-events: auto; }

    /* Skeleton Shimmer */

    .skeleton {
        display: block;
        border-radius: 6px;
        touch-action: none;
        pointer-events: none;
        user-select: none;
        color: rgba(0,0,0,0);
        line-height: 1.2;
        border: none !important;
    }
    span.skeleton {
        display: inline-block;
    }
    .skeleton * {
        opacity: 0;
    }

    .skeleton.profile_image {
        border-radius: 100px;
        overflow: hidden;
        width: 38px;
        height: 38px;
    }


    .dark_mode_alt {
        .lazyload_bg,
        .skeleton{
            background: linear-gradient(90deg, rgba(0,0,0,0.3) 20%, rgba(69, 69, 69, 0.3)  60%, rgba(0,0,0,0.3)  70%);
            background-size: 200% 100%;
            animation: bg_loading 1.5s infinite;
        }
    }

    .light_mode_alt {
        .lazyload_bg,
        .skeleton{
            background: linear-gradient(90deg, rgba(0,0,0,0.1) 20%, rgba(69, 69, 69, 0.1)  60%, rgba(0,0,0,0.1)  70%);
            background-size: 200% 100%;
            animation: bg_loading 1.5s infinite;
        }
    }
    

    @keyframes bg_loading {
        0% {
            background-position: 200% 0;
        }
        100% {
            background-position: -200% 0;
        }
    }

}

@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 */
    .wrapper_header .info span.display_none-LS_XXS,
    .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%;
    }

    .modal_video_playback,
    .modal_video_recording {
        width: 100%;
        height: auto;
    }

    .connect_messages .cm_list_container{
        width: 100%;
    }
}

/* 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 */
    .wrapper_header .info span.display_none-LS_XS,
    .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;
    }

    /*  */
    .content_multilevel_menu .cm_list,
    .content_multilevel_menu .cm_list_container {
        width: 40%;
    }

    .connect_messages .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%;
    }

    .modal_video_playback,
    .modal_video_recording {
        width: 100%;
        height: auto;
    }
}

/* 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 */
    .wrapper_header .info span.display_none-LS_SM,
    .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;
    }

    .content_multilevel_menu .cm_list,
    .content_multilevel_menu .cm_list_container {
        width: 40%;
    }

    .connect_messages .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%;
    }

    .modal_video_playback,
    .modal_video_recording {
        width: auto;
        height: 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 */
    .wrapper_header .info span.display_none-LS_MD,
    .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;
    }

    .content_multilevel_menu .cm_list,
    .content_multilevel_menu .cm_list_container {
        width: 40%;
        min-width: 360px;
    }

    .connect_messages .cm_list_container{
        width: 40%;
        min-width: 400px;
    }

    .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;
    }

    .modal_video_playback,
    .modal_video_recording {
        width: auto;
        height: 100%;
    }
}

/* 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 */
    .wrapper_header .info span.display_none-LS_LG,
    .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;
    }

    .content_multilevel_menu .cm_list,
    .content_multilevel_menu .cm_list_container {
        width: 30%;
        min-width: 360px;
    }

    .connect_messages .cm_list_container{
        width: 30%;
        min-width: 400px;
    }

    .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 */
    .wrapper_header .info span.display_none-PT,
    .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;
    }
    /*  */
    .modal_video_title {
        position: absolute;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, 0.8);
        height: 32px;
        z-index: 100;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .modal_video_title h2{
        transform:none;
        position: relative;
        bottom: auto;
        white-space: nowrap;
        
    }
    .modal_video_playback,
    .modal_video_recording {
        width: 100%;
        height: auto;
    }
    .modal_video_controls {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 64px;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 0px 16px;
        top: auto;
    }
    .modal_video_timer{
        top:auto;
        bottom:72px;
    }

    .modal_video_btn_group{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap:16px;
        width: 96px;
        height: auto;
    }
}

@media screen {
    .test {
        color: yellow;
    }
}

/* Portrait XXS */
/* For small phones eg.: iPhone 5 */
/* @media screen and (orientation:portrait) and (max-height: 666px) { */
@media screen and (orientation:portrait) and (max-width: 374px){
    /*******
    * 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_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_list .stats.display_none-PT_XXS, 
    .client_stats .stats.display_none-PT_XXS,
    .wrapper_header .info span.display_none-PT_XXS,
    .display_none-PT_XXS {
        display: none;
    }

    /* 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;
    }

    /*  */

    main{height:calc(100% - 111px);}
    .messages_body main{flex: 1;}

    /* FIX FOR IOS Safari position fixed bug */
    .body_dropdown_select_open .connect_messages .cm_chat .content,
    .body_dropdown_select_open  .content_multilevel_menu .cm_active_content .content { 
        overflow: visible;
    }
    .body_dropdown_select_open .main_body section {
        overflow: visible;
    }

    .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;
    }

    .select_custom.select_custom_products .button_menu{
        padding: 0 7px;
    }

    .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;
    }

    .stats_action.stats_action_relative{
        position: relative;
        top: auto;
        right: auto;
        height: auto;
        border-radius: 4px;
    }

    .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;
    }

    .client_stats .client.client_profile{
        border-bottom: 1px solid var(--background-color);
        margin: 0 -8px 0px -8px;
        padding: 0 8px 8px 8px;
    }
    .client_stats .client.client_profile.client_profile_pad{
        padding: 8px 16px;
    }
    .stats.last_ci.pastdue span, 
    .client_stats .stats.last_ci.pastdue span,
    .stats.last_ci.warning span, 
    .client_stats .stats.last_ci.warning span {
        min-width: 64px;
    }

    .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_content_meal_plan .cal_day {
        min-width: 10.4vw;
    }

    .cal_controls_date {
        justify-content: space-between;
    }

    .cal_select_day {
        width: 72px;
    }

    .flex_widget .fw_thumbnail.fw_product {
        min-width: 20px;
        display: none;
    }
    .dash_widget_progress_metrics{
        padding: 4px;
    }
    .circle-wrap {
        width: 80px;
        height: 80px;
    }
    .circle-wrap .circle .mask,
    .circle-wrap .circle .fill {
        width: 80px;
        height: 80px;
    }
    .circle-wrap .circle .mask {
        clip: rect(0px, 80px, 80px, 40px);
    }
    .circle-wrap .inside-circle {
        width: 70px;
        height: 70px;
    }
    .connect_messages .cm_list_container{
        width: 100%;
    }
    .client_progress_names{
        flex-direction: column;
    }
    .client_progress_names_wrap{
        font-size: 12px;
    }
    .client_progress_names_wrap .first_name,
    .client_progress_names_wrap .last_name{
        display: block;
    }
}

/* Portrait XS */
/* @media screen and (orientation:portrait) and (min-height: 667px) and (max-height:926px) { */
@media screen and (orientation:portrait) and (min-width: 375px) and (max-width:599px){
    /*******
    * 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 */
    .grid_list .stats.display_none-PT_XS, 
    .client_stats .stats.display_none-PT_XS,
    .wrapper_header .info span.display_none-PT_XS,
    .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;
    }

    /*  */
    main {
        height: calc(100% - 111px);
    }
    .messages_body main{flex: 1;}

    /* FIX FOR IOS Safari position fixed bug */
    .body_dropdown_select_open .connect_messages .cm_chat .content,
    .body_dropdown_select_open  .content_multilevel_menu .cm_active_content .content { 
        overflow: visible;
    }
    .body_dropdown_select_open .main_body section {
        overflow: visible;
    }

    .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;
    }

    .client_stats .client.client_profile{
        border-bottom: 1px solid var(--background-color);
        margin: 0 -8px 0px -8px;
        padding: 0 8px 8px 8px;
    }
    .client_stats .client.client_profile.client_profile_pad{
        padding: 8px 16px;
    }
    .stats.last_ci.pastdue span, 
    .client_stats .stats.last_ci.pastdue span,
    .stats.last_ci.warning span, 
    .client_stats .stats.last_ci.warning span {
        min-width: 67px;
    }

    .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_content_meal_plan .cal_day {
        min-width: 10.4vw;
    }

    .cal_controls_date {
        justify-content: space-between;
    }

    .circle-wrap {
        width: 90px;
        height: 90px;
    }
    .circle-wrap .circle .mask,
    .circle-wrap .circle .fill {
        width: 90px;
        height: 90px;
    }
    .circle-wrap .circle .mask {
        clip: rect(0px, 90px, 90px, 45px);
    }
    .circle-wrap .inside-circle {
        width: 75px;
        height: 75px;
    }
    .connect_messages .cm_list_container{
        width: 100%;
    }

    .client_progress_names{
        flex-direction: column;
    }
    .client_progress_names_wrap .first_name,
    .client_progress_names_wrap .last_name{
        display: block;
    }
}

/* Small phone */
@media screen and (max-width:399px) {
    /* POST SUPPORT */
    .post_feed__support--header {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 5px;
    }    
    .post_feed__support--profile,
    .post_feed__support--metadata {
        width: 100%;
    }    
    .post_feed__support--profile .thumb {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .post_feed__support--metadata {
        justify-content: space-between;
    }
    .post_feed__support--infos {
        font-size: 10px;
    }
}

/* */
@media screen and (max-width:480px) {
    /* POST SUPPORT */
    .post_feed__support--profile .thumb .image {
        width: 29px !important;
        height: 29px !important;
    }
    .post_feed__support--profile .userinfo h3 {
        font-size: 13px;
    }
    .post_feed__support--comment {
        display: none;
    }
}

/* Portrait SM */
/* @media screen and (orientation:portrait) and (min-height:927px) and (max-height:1112px) { */
@media screen and (orientation:portrait) and (min-width:600px) and (max-width:799px) {
    /*******
    * 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 */
    .wrapper_header .info span.display_none-PT_SM,
    .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;
    }

    .connect_messages .cm_list_container{
        width: 100%;
    }
}

/* Portrait MD */
/* @media screen and (orientation:portrait) and (min-height:1113px) and (max-height:1366px) { */
@media screen and (orientation:portrait) and (min-width:800px) and (max-width:1023px) {
    /*******
    * 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 */
    .grid_list .stats.display_none-PT_MD, 
    .client_stats .stats.display_none-PT_MD,
    .wrapper_header .info span.display_none-PT_MD,
    .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;
    }

    .client_stats .client.client_profile{
        border-bottom: 1px solid var(--background-color);
        margin: 0 -8px 0px -8px;
        padding: 0 8px 8px 8px;
    }
    .client_stats .client.client_profile.client_profile_pad{
        padding: 8px 16px;
    }
    .stats.last_ci.pastdue span, 
    .client_stats .stats.last_ci.pastdue span,
    .stats.last_ci.warning span, 
    .client_stats .stats.last_ci.warning span {
        min-width: 67px;
    }

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

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

    footer {
        display: none;
    }

    .connect_messages .cm_list_container{
        width: 100%;
    }

    .client_progress_names{
        flex-direction: column;
    }
    .client_progress_names_wrap .first_name,
    .client_progress_names_wrap .last_name{
        display: block;
    }
}

/* Portrait LG */
/* @media screen and (orientation:portrait) and (min-height:1367px) { */
@media screen and (orientation:portrait) and (min-width:1024px) {
    /*******
    * 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 */
    .wrapper_header .info span.display_none-PT_LG,
    .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;
    }

    .client_stats .client.client_profile{
        border-bottom: 1px solid var(--background-color);
        margin: 0 -8px 0px -8px;
        padding: 0 8px 8px 8px;
    }
    .client_stats .client.client_profile.client_profile_pad{
        padding: 8px 16px;
    }
    .stats.last_ci.pastdue span, 
    .client_stats .stats.last_ci.pastdue span,
    .stats.last_ci.warning span, 
    .client_stats .stats.last_ci.warning span {
        min-width: 90px;
    }

    footer {
        display: none;
    }
}

/* Laptop small screen */
@media screen and (min-width:1114px) and (max-width:1199px) {
    /* POST SUPPORT */
    .post_feed__support--profile .thumb .image {
        width: 30px !important;
        height: 30px !important;
    }
    .post_feed__support--profile .userinfo h3 {
        font-size: 13px;
    }
    .post_feed__support--infos {
        font-size: 10px;
    }
}

.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;
}

.modal_video_loading {
    --loader-color: white;
}

.loading_icon .loader-path {
    stroke: var(--loader-color);
    stroke-width: 4;
}
.loading_icon .loader-path.invert {
    stroke: #333;
    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;
}
.loader-path.invert {
    stroke-dasharray: 150, 200;
    stroke-dashoffset: -10;
    -webkit-animation: dash 1.5s ease-in-out infinite, color_invert 6s ease-in-out infinite;
    animation: dash 1.5s ease-in-out infinite, color_invert 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);
    }
}
@-webkit-keyframes color_invert {
    0% {
        stroke: #333;
    }

    40% {
        stroke: #333;
    }

    66% {
        stroke: #333;
    }

    80%,
    90% {
        stroke: #333;
    }
}

@keyframes color_invert {
    0% {
        stroke: #333;
    }

    40% {
        stroke: #333;
    }

    66% {
        stroke: #333;
    }

    80%,
    90% {
        stroke: #333;
    }
}

.hidden {
    display: none;
}

.icon_cc {
    width: 38px;
    font-size: 0;
}

 /* COACHES ONLY */
 body section .block.dash_widget{
    background: var(--background-color);
}

.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);
}

.dash_widget_footer{
    padding: 16px;
    border-top:1px solid var(--foreground-color);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}
.dash_widget_footer button{
    width: 100%;
    max-width: 100px;
}

.progress_bar_container {
    flex: 1;
    font-size: 14px;
    height: auto;
    font-weight: bold;
}

.progress_bar {
    height: 16px;
    position: relative;
    background: var(--foreground-color);
    border-radius: 4px;
    overflow: hidden;
}
.progress_bar_uploading{
    height: 26px;
    border-radius: 6px;
    background: var(--background-color);
}

.progress_bar_label{
    white-space: nowrap;
}


.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: inherit;
    position: absolute;
    background-color: transparent;
    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: var(--color-white);
    border-radius: 4px;
    max-width: 100%;
}
.animate_progress_bar.hidden{
    display: none;
}

.static_progress_bar.uploading {
    background-color: var(--active-color);
    color: white;
    height: inherit;
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--color-white);
    font-size: 10px;
    border-radius: 4px;
}
.animate_progress_bar.positive {
    background-color: var(--color-bar-green);
    color: black;
}
.animate_progress_bar.green_dark {
    background-color: var(--color-bar-green-dark);
    color: white;
}

.animate_progress_bar.red,
.animate_progress_bar.negative {
    background-color: var(--color-bar-red);
    color: white;
}

.animate_progress_bar.yellow,
.animate_progress_bar.progressing {
    background-color: var(--color-bar-yellow);
    color: black;
}
.animate_progress_bar.blue {
    background-color: blue;
    color: white;
}
.animate_progress_bar.active {
    background-color: var(--active-color);
    color: white;
}
.animate_progress_bar.purple {
    background-color: var(--color-bar-purple);
    color: white;
}

.green {
    color: var(--color-green);
}
.red {
    color: var(--color-red);
}

.progress {
    background-color: #3fee8c;
    position: relative;
    margin: 20px;
    height: 1.2rem;
}
.progress-bar {
    background-color: #7eeed8;
    width: 100%;
    height: 1.2rem;
}
progress::-webkit-progress-value {
    background: #3fee8c;
}
progress::-webkit-progress-bar {
    background: #1e1e3c;
}
progress::-moz-progress-bar {
    background: #3fee8c;
}

@-webkit-keyframes progress-bar-stripes {
    from {
        background-position: 40px 0;
    }
    to {
        background-position: 0 0;
    }
}
@keyframes progress-bar-stripes {
    from {
        background-position: 40px 0;
    }
    to {
        background-position: 0 0;
    }
}
.static_progress_bar.striped {
    -webkit-animation: progress-bar-stripes 2s linear infinite;
    -o-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 40px 40px;
    background-color: var(--progress-bar-striped-bg);
}