/*#sidebar .c-sidebar__list li a i:before {
}*/

:root {
    --main-business-color: #733fc1;
    --main-business-active-color: rgba(160,99,252,1);
    --light-main-business-color:#9659f0;
}

#sidebar .fa.fa-file-text.u-mr-xsmall:before,
#sidebar .icon.ion-chatboxes.u-mr-xsmall:before,
#sidebar .icon.ion-android-calendar.u-mr-xsmall:before,
#sidebar .fa.fa-th-large.u-mr-xsmall:before,
#sidebar .fa.fa-comment.u-mr-xsmall:before,
#sidebar .fa.fa-bar-chart.u-mr-xsmall:before,
#sidebar .fa.fa-check-square.u-mr-xsmall:before,
#sidebar .fa.fa-home.u-mr-xsmall:before,
#sidebar .fa.fa-cogs.u-mr-xsmall:before,
#sidebar .icon.ion-ios-briefcase.u-mr-xsmall:before,
#sidebar .icon.ion-ios-close-empty.u-mr-xsmall:before,
#sidebar .fa.fa-recycle.u-mr-xsmall:before {
    display: none;
}

#sidebar .fa.fa-home.u-mr-xsmall,
#sidebar .fa.fa-file-text.u-mr-xsmall,
#sidebar .icon.ion-chatboxes.u-mr-xsmall,
#sidebar .icon.ion-android-calendar.u-mr-xsmall,
#sidebar .fa.fa-th-large.u-mr-xsmall,
#sidebar .fa.fa-comment.u-mr-xsmall,
#sidebar .fa.fa-bar-chart.u-mr-xsmall,
#sidebar .fa.fa-check-square.u-mr-xsmall,
#sidebar .fa.fa-cogs.u-mr-xsmall,
#sidebar .icon.ion-ios-briefcase.u-mr-xsmall,
#sidebar .icon.ion-ios-close-empty.u-mr-xsmall,
#sidebar .fa.fa-recycle.u-mr-xsmall {
    width: 28px;
    height: 28px;
    margin-top: 5px;
}

#sidebar .icon.ion-ios-close-empty.u-mr-xsmall {
    background: url(../../Latest_Ui_Design/images/inbox-left-menu.svg) left top no-repeat;
}

#sidebar .icon.ion-ios-briefcase.u-mr-xsmall {
    background: url(../../Latest_Ui_Design/images/inbox-left-menu.svg) left top no-repeat;
}

#sidebar .fa.fa-cogs.u-mr-xsmall {
    background: url(../../Latest_Ui_Design/images/admin-left-menu.svg) left top no-repeat;
}

#sidebar .fa.fa-file-text.u-mr-xsmall {
    background: url(../../Latest_Ui_Design/images/files-left-menu.svg) left top no-repeat;
}

#sidebar .fa.fa-home.u-mr-xsmall {
    background: url(../../Latest_Ui_Design/images/home-left-menu.svg) left top no-repeat;
}

#sidebar .icon.ion-chatboxes.u-mr-xsmall {
    background: url(../../Latest_Ui_Design/images/chats-left-menu.svg) left top no-repeat;
}

#sidebar .icon.ion-android-calendar.u-mr-xsmall {
    background: url(../../Latest_Ui_Design/images/calendar-left-menu.svg) left top no-repeat;
}

#sidebar .fa.fa-th-large.u-mr-xsmall {
    background: url(../../Latest_Ui_Design/images/team-left-menu.svg) left top no-repeat;
}

#sidebar .fa.fa-comment.u-mr-xsmall {
    background: url(../../Latest_Ui_Design/images/feed-left-menu.svg) left top no-repeat;
}

#sidebar .fa.fa-bar-chart.u-mr-xsmall {
    background: url(../../Latest_Ui_Design/images/reports-left-menu.svg) left top no-repeat;
}

#sidebar .fa.fa-check-square.u-mr-xsmall {
    background: url(../../Latest_Ui_Design/images/projects-left-menu.svg) left top no-repeat;
}

/* #sidebar .fa.fa-recycle.u-mr-xsmall {
    background: url(../../Latest_Ui_Design/images/invoice.svg) left top no-repeat;
} */

#sidebar ul li {
    padding: 0;
    border-radius: 0;
}

    #sidebar ul li .c-sidebar__link {
        padding: 4px 10px 4px 20px;
        text-transform: capitalize;
    }

.c-sidebar__link.is-active {
    box-shadow: none;
    border-radius: 24px;
    background: rgb(139,69,244);
    background: linear-gradient(90deg, rgba(139,69,244,1) 0%, rgba(150,84,248,1) 49%, rgba(160,99,252,1) 100%);
    border-radius: 0;
}

.c-sidebar__link {
    padding: 5px 0 5px 20px;
}

.c-sidebar__title {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    padding-right: 15px;
    padding-left: 15px;
}

#sidebar ul li .color-success {
    background: rgb(139,69,244);
    background: linear-gradient(90deg, rgba(139,69,244,1) 0%, rgba(150,84,248,1) 49%, rgba(160,99,252,1) 100%);
    border-radius: 6px;
    position: relative;
    width: 35px;
    height: 35px;
}

#sidebar ul li .fa.fa-circle:before {
    position: absolute;
    right: 0;
    top: 0;
    background-color: #6c5395;
    border-radius: 6px;
    padding: 0 0 2px 2px;
}

.c-modal__header {
    background-color: transparent;
    background: #fff;
}

.c-modal__title {
    margin: 0 auto;
}

.c-modal__header .ion-close {
    position: absolute;
    right: 0;
    top: 2px;
    background-size: contain;
    content: '';
    display: flex;
    justify-content: center;
    align-items: center;
}

    .c-modal__header .ion-close:before {
        display: none;
    }

.c-modal__header .c-modal__title {
    color: #445870;
    font-size: 25px;
    font-weight: 700;
    padding-top: 20px;
}

.c-modal__header .c-modal__close {
    background: url('../../Latest_Ui_Design/images/popup-closebtn.png') left top no-repeat;
    width: 60px;
    height: 70px;
    background-size: contain;
    position: absolute;
    top: 0;
    right: 0;
}

.c-sidebar {
    background-color: #733fc1;
}

a.logo {
    padding: 20px;
}

a.logo,
.business-dropdown,
.business-dropdown .c-btn {
    background-color: var(--main-business-color) !important;
}

    a.logo img {
        width: 70%;
        margin-bottom: 10px;
    }

    .business-dropdown .c-btn {
        padding-top: 11px !important;
    }

        .business-dropdown .c-btn::after {
            top: 0 !important;
        }

.jumppl-popup button,
.c-modal__footer .c-btn,
.c-modal__body .c-btn--info {
    background: #964ce9;
    color: #fff;
    font-size: 16px;
    line-height: 2;
    font-family: sf_compact_roundedbold;
    border: 0;
    transition: all ease .3s;
}

    .jumppl-popup button:hover,
    .c-modal__footer .c-btn:hover,
    .c-modal__body .c-btn--info:hover {
        background-color: #1a98f7 !important;
        color: #fff !important;
    }

.modal_box_shadow {
    -webkit-box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.3);
    box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.3);
}

@media screen and ( max-width:767px ) {
    .modal_z_index .c-modal__dialog.modal-dialog {
        width: 100%;
    }
}

.modal_z_index {
    z-index: 99999 !important;
}

/*New Task filter design styling*/
* {
    padding: 0;
    margin: 0;
}

@font-face {
    font-family: 'sf_compact_roundedmedium';
    src: url(https://aplome.blob.core.windows.net/jumppl-landing-features/fonts/sf-compact-rounded-medium-webfont.woff2) format('woff2'), url(https://aplome.blob.core.windows.net/jumppl-landing-features/fonts/sf-compact-rounded-medium-webfont.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sf_pro_textregular';
    src: url(https://aplome.blob.core.windows.net/jumppl-landing-features/fonts/sf-pro-text-regular-webfont.woff2) format('woff2'), url(https://aplome.blob.core.windows.net/jumppl-landing-features/fonts/sf-pro-text-regular-webfont.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sf_compact_roundedbold';
    src: url(https://aplome.blob.core.windows.net/jumppl-landing-features/fonts/sf-compact-rounded-bold.woff2) format('woff2'), url(https://aplome.blob.core.windows.net/jumppl-landing-features/fonts/sf-compact-rounded-bold.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sf_compact_roundedheavy';
    src: url(https://aplome.blob.core.windows.net/jumppl-landing-features/fonts/sf-compact-rounded-heavy.woff2) format('woff2'), url(https://aplome.blob.core.windows.net/jumppl-landing-features/fonts/sf-compact-rounded-heavy.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sf_compact_roundedregular';
    src: url(https://aplome.blob.core.windows.net/jumppl-landing-features/fonts/sf-compact-rounded-regular.woff2) format('woff2'), url(https://aplome.blob.core.windows.net/jumppl-landing-features/fonts/sf-compact-rounded-regular.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}


body {
    background-color: #f8f8f8;
    font-size: 14px;
    line-height: 1.5;
    font-family: 'sf_pro_textregular';
    height: auto !important;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, li, a, span {
    padding: 0;
    margin: 0;
}

    a, a:hover, a:focus {
        outline: none;
        text-decoration: none;
    }

.clearfix {
    clearfix: both;
    width: 100%;
}

/*.task-filters {
}*/

.task-filters > ul {
    display: inline-block;
    width: 100%;
}

.c-table__title span {
    font-size: 14px;
    margin-bottom: 5px;
}

.c-table__title .u-text-small {
    font-size: 12px !important;
}

.task-filters > ul > li {
    display: inline-block;
    width: auto;
    padding: 10px;
}

    .task-filters > ul > li:nth-child(2) svg,
    .task-filters > ul > li:nth-child(3) svg,
    .task-filters > ul > li:nth-child(4) svg {
        margin-right: 5px;
    }

    .task-filters > ul > li:nth-child(3) .filter-label span {
        position: relative;
        top: -1px;
    }

    .task-filters > ul > li:first-child svg {
        position: relative;
        top: 1px;
    }

.task-filters ul li .btn.btn-default .cart img {
    width: 10px;
}

.task-filters > ul > li img {
    width: 16px;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.task-filters > ul > li .ion-android-favorite-outline:before {
    color: #000;
}

.task-filters ul li:last-child {
    margin: 0;
    padding: 0;
}

    .task-filters ul li:last-child img {
        width: auto;
    }

    .task-filters ul li:last-child .caret {
        margin-left: 10px;
    }

.task-filters ul li.filterby-label {
    background-color: #f5f9ff;
    font-weight: 600;
    padding: 8px 12px;
}

    .task-filters ul li.filterby-label span {
        cursor: pointer;
        color: #000;
    }

        .task-filters ul li.filterby-label span img {
            margin-right: 3px;
        }

.task-filters ul li span {
    display: inline-block;
    color: #354052;
    font-size: 14px;
    font-family: 'sf_pro_textregular';
    font-weight: 400;
}

.task-filters ul li .btn.btn-default {
    border: 0;
    background-color: transparent;
    color: #000;
    font-size: inherit;
}

    .task-filters ul li .btn.btn-default .cart {
        margin: 0;
    }

    .task-filters ul li .btn.btn-default img {
        width: 18px;
    }

.task-filters ul li .dropdown .btn.btn-default .caret img {
    width: 12px;
}

.task-filters .dropdown-toggle:focus {
    background-color: transparent !important;
    border: 0;
}

.task-filters .caret {
    border: 0;
    width: auto;
    height: auto;
}

.task-filters .dropdown-menu {
    width: auto;
    padding: 0;
}

.task-filters ul li .dropdown-menu li {
    width: 100%;
}

.task-filters .filterby-row {
    padding: 20px 25px;
    background-color: #f5f9ff;
    display: none;
    width: 100%;
}

.task-filters .filterby-dropdown-row {
    /*display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;*/
    display: inline-block;
    width: 100%;
}

.task-filters .filterby-selectbox {
    /*display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;*/
    display: inline-block;
    width: 250px;
    margin: 0 10px 10px 0;
}

    .task-filters .filterby-selectbox span {
        display: inline-block;
        width: 100%;
        color: #222;
        font-size: 12px;
        line-height: .9;
        text-transform: capitalize;
        font-family: 'sf_pro_textregular';
        margin: 0 0 20px 0;
        font-weight: 600;
    }

        .task-filters .filterby-selectbox span img {
            margin: -2px 5px 0 0;
        }

    .task-filters .filterby-selectbox .dropdown ul {
        width: 100%;
        padding: 0;
    }

    .task-filters .filterby-selectbox .dropdown,
    .task-filters .filterby-selectbox .btn-default {
        width: 100%;
        background-color: #fff;
        font-size: 16px;
        color: #000;
        text-align: left;
    }

    .task-filters .filterby-selectbox span.caret {
        text-align: right;
        width: auto;
        margin: 0;
        float: right;
    }

.task-filters .dropdown-menu > li > a:focus,
.task-filters .dropdown-menu > li > a:hover {
    background-color: #7675f7;
    color: #fff !important;
}

.task-filters .dropdown-menu > li > a {
    font-size: 14px;
    line-height: 2;
}

.task-filters .filterby-dropdown-buttons {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
}

    /*.task-filters .filterby-dropdown-buttons ul {
        }*/

    .task-filters .filterby-dropdown-buttons ul li {
        display: inline-block;
        width: 130px;
    }

        .task-filters .filterby-dropdown-buttons ul li button {
            display: inline-block;
            width: 100%;
            background-color: #7675f7;
            color: #fff;
            font-size: 14px;
            line-height: 3;
            border-radius: 3px;
            border: 0;
            text-transform: capitalize;
        }

        .task-filters .filterby-dropdown-buttons ul li:last-child button {
            background-color: transparent;
            border: 0;
            color: #000;
            font-family: 'sf_compact_roundedmedium';
        }

.task-filters .filterby-closebutton {
    display: inline-block;
    color: #000;
    font-size: 16px;
    line-height: .9;
    font-family: 'sf_compact_roundedmedium';
    text-transform: capitalize;
    cursor: pointer;
}

    .task-filters .filterby-closebutton img {
        margin-right: 5px;
    }

.input-group-btn .c-btn--secondary {
    padding-top: 13px !important;
    padding-bottom: 13px !important;
}

.dhx_cal_container div {
    /*border-radius:12px !important;*/
}

.brand.client-portal {
    background-color: #7b46c8 !important;
    display: flex;
    align-items: center;
}

.powered-by-text {
    display: flex;
    width: 100%;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 20px;
    margin-top: 100px;
}

.c-table__title span {
    font-weight: 700;
    font-size: 16px;
}

#main-content .wrapper > div {
    border-top: 1px solid #d7d7d7;
}

.c-toolbar__nav {
    line-height: 1 !important;
}

.c-toolbar__nav-item {
    padding-bottom: 14px;
    display: inline-block;
    transition: all .3s ease-in-out;
}


.c-toolbar {
    padding: 10px 20px 0 20px;
}

    .c-toolbar.u-mb-small.files-header .right .c-input {
        padding: 5px 15px;
    }

    .c-toolbar.u-mb-small.files-header .right .c-btn {
        padding: 5px 20px;
    }

    .c-toolbar.u-mb-small.files-header .c-toolbar__nav-item {
        padding-bottom: 25px;
    }

.tab-content .grid-wrapper .item repeat-animation span {
    background-color: #1a91eb !important;
}

.panel-heading.widget-pannel-heading .panel-title {
    color: #fff;
    font-size: 18px;
}

.panel-success .panel-heading.widget-pannel-heading .panel-title {
    color: #000 !important;
}

.panel-heading.widget-pannel-heading .btn-filter {
    background-color: #19578c;
    padding: 6px 15px;
    color: #fff;
    font-size: 14px;
    border: 0;
}

.panel-success .panel-heading.widget-pannel-heading .btn-filter {
    background-color: #effbea;
    color: #000;
}

.panel-heading.widget-pannel-heading .glyphicon {
    top: 3px;
    right: 3px;
}

.filterby-selectbox.widget-filter-selectbox {
    padding: 20px 0 20px 30px;
}

    .filterby-selectbox.widget-filter-selectbox .btn-default {
        color: #000;
        font-size: 14px;
        padding: 10px 14px;
    }

.panel-heading.widget-pannel-heading .date-selector {
    height: 30px;
    background-color: transparent;
    border: 1px solid #fff;
    color: #fff !important;
}

.panel-success .panel-heading.widget-pannel-heading .date-selector {
    color: #000 !important;
}

.task-widget-box {
    margin: 0 0 20px 0;
}

.filterby-selectbox.widget-filter-selectbox .dropdown-menu {
    width: 280px;
}
/*Themeing start here*/
.c-sidebar {
    background-color: var(--main-business-color) !important;
}

.right-stat-bar ul {
    background: var(--main-business-color) !important;
}

.right-sidebar {
    background: var(--main-business-color) !important;
}

.li .prog-row {
    background: var(--main-business-color) !important;
}

li .prog-row.active {
    background: var(--main-business-active-color) !important;
}

a.logo .business-dropdown .business-dropdown .c-btn {
    background: var(--main-business-color) !important;
}

.chat-tabs > li.active > a,
.chat-tabs > li.active > a:focus,
.chat-tabs > li.active > a:hover {
}

.people-list .c-btn--secondary {
    background: var(--main-business-color) !important;
}

.people-list .task-btn {
    background-color: var( --main-business-color) !important;
}

.business-dropdown .dropdown-menu li.active a {
    background: var(--main-business-active-color) !important;
}

.j-tabs .breadcrumb li a {
    background-color: var( --main-business-color) !important;
}

.breadcrumb > li.active {
    background: var(--main-business-color) !important;
}

.c-btn--info {
    background: var(--main-business-color) !important;
}

.panel-primary > .panel-heading {
    background-color: var(--main-business-color);
    border-color: var(--main-business-color);
}

.conversation-list .odd .conversation-text .ctext-wrap {
    background-color: var(--main-business-color);
}

.right-sidebar .search-row {
    background: var(--main-business-color) !important;
}

.c-sidebar__link.is-active {
    background: var(--main-business-active-color) !important;
}
/*Themeing end here*/

.c-btn.chat-btns.c-btn--info {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 9999;
    padding: 7px 13px !important;
    background-color: #1a91eb !important;
}

.show-chatbar svg {
    display: none;
}

.c-btn i.ion-chatboxes {
}

.c-btn i.close-chat {
    display: none;
}

.c-btn.show-chatbar i.ion-chatboxes {
    display: none;
}

.c-btn.show-chatbar i.close-chat {
    display: block;
    bottom: 1px;
    color: #fff;
}

.sidebar-info-fixed {
    position: fixed;
    left: 30px;
    bottom: 20px;
    z-index: 999;
}

.main-portal-sidebar .c-sidebar {
    height: 80vh;
}

#sidebar {
    background-color: var(--main-business-color) !important;
}

.caleran-container, .caleran-container-mobile {
    z-index: 9999999999;
}

.c-toolbar__nav {
    width: 100%;
    border-bottom: 1px solid #ccc;
}

.c-toolbar.u-mb-small.files-header .c-toolbar__nav-item {
    padding: 6px 8px;
    margin-right: 5px;
}

.c-toolbar__nav-item.is-active {
    color: var(--main-business-color) !important;
}

/* feed css starts here -------------------- */
/* .jumppl-feed-outer {
    margin: 30px 15px 0;
}

.main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

    .main .feed-row-outer {
        width: 100%;
    }

.feed-row-outer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.main .feed-row-outer .jumppl-feed-slider {
    margin-left: auto;
}

.jumppl-feed-row {
    -webkit-box-shadow: 0px 3px 8px 0px rgba(50, 50, 50, 0.15);
    -moz-box-shadow: 0px 3px 8px 0px rgba(50, 50, 50, 0.15);
    box-shadow: 0px 3px 8px 0px rgba(50, 50, 50, 0.15);
    border-radius: 6px;
    background-color: #fff;
    border: 1px solid #ccc;
    margin-bottom: 25px;
    width: 100%;
}

.feed-title-row a {
    padding: 12px 16px 0;
    margin-bottom: 8px;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.feed-delete-download ul li {
    margin-right: 10px;
}

.feed-title-row .title-thumb {
    display: flex;
    flex-shrink: 0;
    box-sizing: border-box;
    border: 2px solid transparent;
    border-radius: 49.9%;
}

    .feed-title-row .title-thumb img {
        width: 48px;
        height: 48px;
        border-radius: 100%;
    }

.feed-title-row .title-detail {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    flex-basis: 0;
    margin-left: 8px;
}

.feed-title-row .heading {
    color: rgba(0,0,0,.9);
    font-weight: 600;
    font-size: 16px;
    line-height: .9;
    width: 100%;
}

.feed-title-row .description, .feed-title-row .date {
    color: rgba(0,0,0,.6);
    font-size: 12px;
    line-height: .9;
    font-weight: 400;
    width: 100%;
    text-transform: capitalize;
    margin: 5px 0 0 0;
}

.feed-title-outer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}

    .feed-title-outer .right {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        padding: 10px 10px 0 0;
    }

        .feed-title-outer .right .dropdown-menu {
            max-width: 264px;
            max-height: 548px;
            width: 90vw;
            left: auto;
            right: -10px;
            top: 30px;
            background-color: rgba(236,236,236,1);
            border: 0;
        }

        .feed-title-outer .right .dropdown button {
            letter-spacing: 1px;
            font-size: 20px;
            font-weight: 600;
            line-height: .8;
            background-color: transparent;
            border: 0;
            box-shadow: none;
        }

            .feed-title-outer .right .dropdown button:focus {
                outline: none;
                border: 0;
            }

        .feed-title-outer .right ul:before {
            position: absolute;
            border: 0 solid transparent;
            content: "";
            height: 0;
            width: 0;
            left: calc( 100% - 24px );
            border-right-width: 15px;
            border-bottom: 15px solid rgba(236,236,236,1);
            border-left-width: 15px;
            top: -14px;
            margin-left: -10px;
        }

        .feed-title-outer .right ul li {
            display: inline-block;
            width: 100%;
            padding: 5px 15px 5px 10px;
        }

            .feed-title-outer .right ul li svg {
                width: 18px;
                height: 18px;
                margin-right: 5px;
            }

            .feed-title-outer .right ul li i {
                font-size: 16px;
            }

            .feed-title-outer .right ul li span {
                color: rgba(0,0,0,.75);
                font-size: 14px;
                text-transform: capitalize;
                margin-left: 5px;
                letter-spacing: .5px;
                font-weight: 600;
            }

.feed-title-row .feed-detail {
    padding: 0 15px 5px;
}

    .feed-title-row .feed-detail h2 {
        color: rgba( 0,0,0.6 );
        font-size: 22px;
        line-height: 2;
        font-weight: 700;
    }

    .feed-title-row .feed-detail p {
        color: rgba( 0,0,0.6 );
        font-size: 14px;
        line-height: 2;
        font-weight: 400;
        margin: 0 0 15px 0;
    }

.jumppl-feed-row .feed-thumbnail {
    margin: 10px 0 20px 0;
}

    .jumppl-feed-row .feed-thumbnail ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 5px;
        grid-row-gap: 5px;
        padding: 0;
        margin: 0 15px;
    }

        .jumppl-feed-row .feed-thumbnail ul li {
            display: inline-grid;
        }

    .jumppl-feed-row .feed-thumbnail img {
        width: 100%;
        object-fit: cover;
    }

.jumppl-feed-row .feed-comments-status ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 6px 8px;
}

    .jumppl-feed-row .feed-comments-status ul li {
        position: relative;
        display: flex;
        align-items: center;
        margin-right: 10px;
    }

        .jumppl-feed-row .feed-comments-status ul li:nth-child {
            padding: 0 10px;
        }

        .jumppl-feed-row .feed-comments-status ul li button {
            background-color: transparent;
            border: 0;
            outline: none;
            display: flex;
            align-items: center;
            transition: all ease .3s;
        }

            .jumppl-feed-row .feed-comments-status ul li button:hover {
                background-color: hsla(0,0%,81.2%,.25);
            }

        .jumppl-feed-row .feed-comments-status ul li img {
            width: 24px;
            height: 24px;
        }

.feed-title-outer .feed-comments-status {
    margin: 5px 10px 0 0;
}

.jumppl-feed-row .feed-comments-status ul li span {
    font-size: 14px;
    color: rgba( 0,0,0, .5 );
    line-height: .9;
    text-transform: capitalize;
    margin-left: 5px;
    display: inline-block;
    font-weight: 400;
}

.jumppl-feed-row .feed-comments-status ul li .feed-icons {
    width: 18px;
    height: 18px;
    color: #000;
}

.jumppl-feed-row .feed-comment-box {
    padding: 4px 16px 8px;
    display: flex;
    justify-content: unset;
    align-items: flex-start;
}

.jumppl-feed-row .comment-thumb {
    display: flex;
    flex-shrink: 0;
    margin-right: 5px;
}

    .jumppl-feed-row .comment-thumb img {
        width: 30px;
        height: 30px;
        border-radius: 100%;
    }

.jumppl-feed-row .comment-desc {
    display: flex;
    flex-wrap: wrap;
    border-radius: 8px;
    border: 1px solid #cdcfd2 !important;
    max-width: 100%;
    flex: 1 1 auto;
    max-width: calc(100% - 55px);
    /*padding: 8px 15px;*/
/* } */

    /* .jumppl-feed-row .comment-desc:focus {
        outline: none;
    }

    .jumppl-feed-row .comment-desc p {
        color: rgba(0,0,0,.75);
        font-size: 14px;
        line-height: 1.4;
        font-weight: 400;
        margin: 0;
    }

.feed-comment-box.feed-comment-posted .comment-desc {
    background-color: #eff3f6;
    border: 1px solid #eff3f6;
    border-radius: 6px;
    padding: 5px 8px 8px 8px;
}

    .feed-comment-box.feed-comment-posted .comment-desc .title {
        color: rgba( 0, 0, 0, .75 );
        font-size: 15px;
        font-weight: 600;
        line-height: .9;
        margin: 5px 0;
        display: block;
        width: 100%;
        text-transform: capitalize;
    }

    .feed-comment-box.feed-comment-posted .comment-desc .designation {
        color: rgba( 0, 0, 0, .5 );
        font-size: 12px;
        line-height: .9;
        margin: 0 0 10px 0;
    }

.jumppl-feed-slider {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 2px 3px rgba(0,0,0,.3);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

    .jumppl-feed-slider.topFixed {
        position: fixed;
        right: 15px;
        transform: translatey(15px);
        transition: all 0.5s ease;
    }

    .jumppl-feed-slider img {
        width: 100%;
    }

.jumppl-feed-row-outer {
    display: flex;
    flex-wrap: wrap;
    /* align-items-flex-start; */
    /* margin-right: 15px; */
/* } */

/* @media ( min-width:1280px ) {
    .jumppl-feed-row-outer {
        width: 100%;
    }

    .jumppl-feed-slider {
        width: 460px;
    }
} */


/* @media ( min-width:1450px ) {
    .jumppl-feed-row-outer {
        width: calc( 100% - 45px );
    }

    .jumppl-feed-slider {
        width: 530px;
    }
} */

/* .jumppl-feed-slider .item {
    height: auto !important;
    margin: 0 !important;
}

    .jumppl-feed-slider .item img {
        border-radius: unset;
    }


.comment-desc .emojionearea-editor {
    min-height: 3em !important;
    width: 100%;
    padding: 5px 12px !important;
    line-height: 1;
} */

/* .feed-title > p {
    font-size: 18px !important;
    font-weight: bold !important;
} */  

.picker-dialog {
    z-index: 99999;
}

.client-portalicon {
    width: 26px;
    border-radius: 10%;
    margin-right: 10px;
}

.task-filters > ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 550px;
    padding: 10px 20px;
}

    .task-filters > ul > li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: auto;
        padding: 0;
    }

.task-filters ul li.view-options span {
    width: auto;
}

.view-dropdown .caret {
    width: 12px !important;
    display: inline-block;
    object-fit: cover;
    margin: 2px 0 0 0;
    padding: 0 !important;
}

.task-filters ul li span {
    padding: 0;
    margin: 0;
    width: auto;
}

.task-filters > ul > li .hover-icon {
    position: initial;
    margin: 0;
}

.task-filters > ul > li svg {
    width: 14px;
    height: 14px;
}

.feed-title-outer {
    border-bottom: 1x solid #ccc;
}

.feed-title-row .feed-detail p {
    text-transform: capitalize;
}

.task-filters ul li span.filter-label,
.task-filters ul li span.sort {
    padding: 0;
}

.panel-heading.widget-pannel-heading .date-selector {
    border: 1px solid var(--main-business-color) !important;
    color: #000 !important;
}

.people-pager svg {
    width: 20px;
    height: 20px;
    fill: #000;
    margin-right: 10px;
}

.feed-delete-download ul {
    display: flex;
    justify-content: space-between;
    margin: 10px 0 0 0;
}

.feed-delete-download .feed-download {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
}

.feed-delete-download ul li span {
    color: rgba( 0,0,0, .5 );
    font-size: 14px;
    line-height: .9;
    font-weight: 400;
}

.feed-delete-download ul li svg {
    position: relative;
    top: 4px;
    width: 18px;
    height: 18px;
    fill: #222;
}

.jumppl-feed-row .feed-comments-status ul li svg {
    width: 14px;
    height: 16px;
}

.JobRequestformouter {
    padding-bottom: 50px !important;
}

    .JobRequestformouter h2 {
        padding: 50px 0 30px 0;
    }

    .JobRequestformouter .dynamic_row_inline > label {
        font-weight: 400;
    }

    .JobRequestformouter .dynamic_row_inline textarea.form-control {
        height: 90px;
        resize: none;
    }

    .JobRequestformouter .jobrequestfooter {
        width: 64%;
    }

        .JobRequestformouter .jobrequestfooter > button {
            font-size: 14px;
        }

    .JobRequestformouter .dropzone {
        padding: 0;
    }

#sidebar ul li {
    padding: 0 0 0 0;
}

.client-text-wrap {
    /*position:absolute;*/
    right: 6px;
    top: -20px;
    /*white-space:initial !important;*/
    word-break: break-all;
    width: 100%;
    /*text-align:center;*/
    display: inline-block;
    /*font-size:12px;
    text-overflow:initial !important;
    visibility:hidden;*/
}

#sidebar ul li:hover .client-text-wrap {
    visibility: visible;
}

.header-NUI-portal {
    position: fixed;
    width: 100%;
    height: 130px;
    background-color: var(--main-business-color) !important;
    padding: 0 22px 0 84px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-end;
    z-index: 2;
}

    .header-NUI-portal .header-NUI-bg {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }

        .header-NUI-portal .header-NUI-bg svg {
            fill: #fff;
        }

    .header-NUI-portal .header-NUI-inner {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: calc( 100% - 260px );
        position: relative;
        margin: 0 0 25px 0;
    }

    .header-NUI-portal .header-NUI-left {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .header-NUI-portal .title-col {
        display: flex;
        flex-wrap: wrap;
        width: 165px;
    }

    .header-NUI-portal .title-col-info {
        display: flex;
        color: #fff;
        font-size: 16px;
        line-height: 1;
        font-weight: 700;
        font-family: 'Roboto', sans-serif;
        margin: 5px 0 5px 0;
        letter-spacing: 1px;
    }

    .header-NUI-portal .title-col-date {
        display: flex;
        width: 100%;
        color: #fff;
        font-size: 12px;
        line-height: 1;
        font-weight: 400;
        font-family: 'Roboto', sans-serif;
    }

    .header-NUI-portal .user-list {
        display: flex;
        margin: 0 12px 0 25px;
    }

        .header-NUI-portal .user-list ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .header-NUI-portal .user-list li {
            display: flex;
            margin-right: 3px;
        }

            .header-NUI-portal .user-list li img {
                width: 26px;
                height: 26px;
                border-radius: 50%;
            }

    .header-NUI-portal .invite-btn {
        display: flex;
        justify-content: center;
        width: 51px;
        height: 24px;
        background-color: #fff;
        border-radius: 4px;
    }

        .header-NUI-portal .invite-btn button {
            display: flex;
            background-color: transparent;
            border: 0;
            line-height: 24px;
            color: var(--main-business-color);
            font-size: 14px;
            font-weight: 500;
            font-family: 'Roboto', sans-serif;
            text-transform: capitalize;
        }

    .header-NUI-portal .header-NUI-right {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: auto;
    }

    .header-NUI-portal .header-newportal-btn {
        display: flex;
        align-items: center;
        width: 122px;
        height: 32px;
        background-color: #fff;
        border-radius: 4px;
        margin: 8px 0 10px 0;
    }

        .header-NUI-portal .header-newportal-btn svg {
            stroke: var(--main-business-color);
            width: 12px;
            height: 12px;
            margin-left: 15px;
        }

        .header-NUI-portal .header-newportal-btn span {
            display: flex;
            color: var(--main-business-color);
            font-size: 14px;
            line-height: 1 !important;
            font-weight: 400;
            font-family: 'Roboto', sans-serif;
            margin: 0 15px 0 5px;
            text-transform: capitalize;
        }

    .header-NUI-portal .header-NUI-right .btn-group {
    }

        .header-NUI-portal .header-NUI-right .btn-group button {
            background: transparent;
            border: 0;
            margin: 0;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
        }

            .header-NUI-portal .header-NUI-right .btn-group button:focus {
                background-color: transparent;
                border: 0;
            }

        .header-NUI-portal .header-NUI-right .btn-group img {
            width: 34px;
            height: 34px;
            border-radius: 100%;
            margin-right: 8px;
        }

        .header-NUI-portal .header-NUI-right .btn-group h3 {
            color: #fff;
            font-size: 16px;
            line-height: 1;
            font-weight: 500;
            font-family: 'Roboto', sans-serif;
            text-transform: capitalize;
            margin-right: 8px;
        }

    .header-NUI-portal .header-NUI-right .dropdown-menu li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 0 0 10px 0;
    }

    .header-NUI-portal .header-NUI-right .btn-group svg {
        width: 16px;
        height: 16px;
        stroke: #000;
        margin: 0 8px 0 0;
    }

    .header-NUI-portal .header-NUI-right .dropdown-menu a {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        color: #222831;
        font-size: 14px;
        line-height: 1;
        font-weight: 500;
        font-family: 'Roboto', sans-serif;
        text-transform: capitalize;
        width: 100%;
    }

    .header-NUI-portal .header-NUI-right .caret {
        border: solid white;
        border-width: 0 1.5px 1.5px 0;
        display: inline-block;
        padding: 3px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }

.main-NUI-sidebar {
    position: fixed;
    left: 20px;
    top: 70px;
    width: 270px;
    height: 100%;
    border-radius: 8px;
    box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.08);
    -webkit-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.08);
    background-color: #fff;
    z-index: 4;
}

.sidebar-NUI-logo {
    display: flex;
    justify-content: center;
    width: 122px;
    margin: 22px auto 25px auto;
}

    .sidebar-NUI-logo img {
        width: 100%;
        object-fit: contain;
    }

.sidebar-NUI-list-outer {
    width: 100%;
    padding: 0 15px;
}

.sidebar-NUI-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
}

    .sidebar-NUI-list li {
        display: flex;
        width: 100%;
    }

        .sidebar-NUI-list li.active {
            border-radius: 8px;
        }

        .sidebar-NUI-list li a {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            width: 100%;
            height: 48px;
            padding: 10px 15px;
            border-radius: 28px;
            transition: all .3s ease-in-out;
        }

            .sidebar-NUI-list li a img {
                display: flex;
                width: 28px;
                height: 28px;
                margin-right: 10px;
                border-radius: 4px;
            }

            .sidebar-NUI-list li a span {
                color: #222831;
                font-size: 16px;
                line-height: 1;
                font-weight: 400;
                font-family: 'Roboto', sans-serif;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                width: 80%;
            }

            .sidebar-NUI-list li a:hover, .sidebar-NUI-list li.active {
                background-color: var(--main-business-color) !important;
                color: #fff;
            }

                .sidebar-NUI-list li a:hover span, .sidebar-NUI-list li.active a span {
                    color: #fff;
                }

.content-area-NUI {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    position: relative;
    padding: 0 25px 0 85px;
}

.cp-content .tab-content {
    width: 100%;
    background-color: #fff;
}

    .cp-content .tab-content .row {
        margin: 0;
    }

.cp-content .job-request-clientPortal {
    display: flex;
    flex-wrap: wrap;
    width: calc( 100% - 220px );
    /*padding: 25px 25px 25px 25px;*/
    margin: 150px 0 0 0;
}

.cp-content .job-request-title {
    color: #222831;
    font-size: 20px;
    line-height: 1;
    font-family: 'Roboto', sans-serif;
    margin: 20px 0 40px 15px;
    text-transform: capitalize;
}

.cp-content .job-request-detail {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.cp-content .job-request-titlerow {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 56px;
    padding: 0 20px;
    background-color: #FAFAFA;
    margin: 0 0 20px 0;
}

.cp-content .jobrequest-titlecont {
    display: flex;
}

    .cp-content .jobrequest-titlecont span {
        display: flex;
        color: #000;
        font-size: 14px;
        line-height: 1;
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
    }

.cp-content .job-request-detailrow {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0 0 40px 0;
    padding: 0 20px 20px 25px;
    border-bottom: 1px solid #DFDFDF
}

.cp-content .jobrequest-detailcont {
    display: flex;
}

.cp-content .jobrequest-detailrow span {
    display: flex;
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
    line-height: 1;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    padding: 4px;
    border-radius: 4px;
    background-color: #8472FF;
}

.cp-content .job-request-detailrow .jobrequest-pending {
    color: #8472FF
}

.cp-content .job-request-detailrow .jobrequest-inprogress {
    color: #8472FF
}

.cp-content .job-request-detailrow .jobrequest-completed {
    color: #1EA845;
}

.cp-content .jobrequest-viewbtn {
    display: flex;
    justify-content: center;
    width: 65px;
    border: 1px solid #605A89;
    border-radius: 4px;
    color: #605A89;
    font-size: 14px;
    line-height: 30px;
    font-weight: 400;
    font-family: 'Roboto' sans-serif;
    text-transform: capitalize;
}

.jobrequest-detail-col1 {
    width: 130px;
}

.jobrequest-detail-col2 {
    width: 270px;
}

.jobrequest-detail-col3 {
    width: 150px;
}

.jobrequest-detail-col4 {
    width: 140px;
}

.jobrequest-detail-col5 {
    width: 65px;
}

.create-new-request-row {
    display: flex;
}

    .create-new-request-row button {
        display: flex;
        justify-content: center;
        width: 188px;
        border-radius: 8px;
        text-align: center;
        color: white;
        font-size: 16px;
        line-height: 40px;
        font-weight: 500;
        font-family: 'Roboto', sans-serif;
        height: 40px;
        background-color: var(--main-business-color);
        border: 0;
        margin: 0 0 20px 15px;
        text-transform:capitalize;
    }

#new_JobRequestModal .modal-dialog {
    background-color: #fff;
    border-radius: 8px;
}

#new_JobRequestModal .modal-body {
    position: relative;
    padding: 25px 25px 35px 25px;
}

#new_JobRequestModal .modal-title {
    color: #393E46;
    font-size: 16px;
    line-height: 1 !important;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
}

#new_JobRequestModal .form-group {
    margin: 0 0 15px 0;
}

    #new_JobRequestModal .form-group label {
        color: #393E46;
        font-size: 14px;
        line-height: 1;
        font-weight: 400;
        font-family: 'Roboto', sans-serif;
        margin: 0 0 10px 0;
    }

    #new_JobRequestModal .form-group select {
        border: 1px solid #E5E5E5;
        border-radius: 4px;
        padding: 0 12px;
        color: #605A89;
        font-size: 12px;
        font-weight: 400;
        height: 38px;
    }

#new_JobRequestModal .job-request-share-btn {
    width: 100%;
    background: var(--main-business-color) !important;
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
    line-height: 44px;
    font-weight: 400;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    padding: 0;
    margin: 10px 0 0 0;
}

#new_AttachProjectModal .modal-dialog {
    background-color: #fff;
    border-radius: 8px;
}

#new_AttachProjectModal .modal-body {
    position: relative;
    padding: 25px 25px 35px 25px;
}

#new_AttachProjectModal .modal-title {
    color: #393E46;
    font-size: 16px;
    line-height: 1 !important;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
}

#new_AttachProjectModal .form-group {
    margin: 0 0 15px 0;
}

    #new_AttachProjectModal .form-group label {
        color: #393E46;
        font-size: 14px;
        line-height: 1;
        font-weight: 400;
        font-family: 'Roboto', sans-serif;
        margin: 0 0 10px 0;
    }

    #new_AttachProjectModal .form-group select {
        border: 1px solid #E5E5E5;
        border-radius: 4px;
        padding: 0 12px;
        color: #605A89;
        font-size: 12px;
        font-weight: 400;
        height: 38px;
    }

#new_AttachProjectModal .job-request-share-btn {
    width: 100%;
    background: var(--main-business-color) !important;
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
    line-height: 44px;
    font-weight: 400;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    padding: 0;
    margin: 10px 0 0 0;
}

.job-request-clientPortal .nav-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: auto;
    margin: 0 auto 30px auto;
    border-radius: 68px;
    background-color: #fff;
    border: 1px solid #ccc;
    position: sticky;
    /*z-index: 9;*/
    top: 130px;
}

    .job-request-clientPortal .nav-tabs li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        height: 38px;
        padding: 0 21px;
        border-radius: 68px;
    }

        .job-request-clientPortal .nav-tabs li.active,
        .job-request-clientPortal .nav-tabs li:hover {
            background-color: var(--main-business-color) !important;
            box-shadow: 2px 4px 8px rgb(0 0 0 / 12%);
        }

        .job-request-clientPortal .nav-tabs li a {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            color: #605a89;
            font-size: 16px;
            line-height: 1 !important;
            font-family: 'Roboto', sens-serif;
            font-weight: 500;
            text-transform: capitalize;
        }

        .job-request-clientPortal .nav-tabs li.active a,
        .job-request-clientPortal .nav-tabs li:hover a {
            color: #fff;
            border: 0;
            background-color: transparent;
        }

.jobrequest-toptabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    max-width: 1140px;
    margin: 0 0 55px 0;
}

.jobrequest-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

    .jobrequest-breadcrumbs .breadcrumbs-tabs {
        display: flex;
        flex-wrap: wrap;
    }

        .jobrequest-breadcrumbs .breadcrumbs-tabs ul {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
        }

            .jobrequest-breadcrumbs .breadcrumbs-tabs ul li {
            }

                .jobrequest-breadcrumbs .breadcrumbs-tabs ul li:after {
                    content: '';
                    position: relative;
                    margin: 0 12px;
                    border: solid #393E46;
                    border-width: 0 1.5px 1.5px 0;
                    display: inline-block;
                    padding: 2px;
                    transform: rotate( -45deg );
                    -webkit-transform: rotate( -45deg );
                }

                .jobrequest-breadcrumbs .breadcrumbs-tabs ul li:last-child:after {
                    display: none;
                }

                .jobrequest-breadcrumbs .breadcrumbs-tabs ul li button {
                    border: 1.5px solid #605A89;
                    border-radius: 4px;
                    background-color: transparent;
                    color: #605A89;
                    font-size: 12px;
                    line-height: 28px;
                    font-weight: 500;
                    font-family: 'Roboto', sens-serif;
                    text-transform: capitalize;
                    padding: 0 8px;
                }

                .jobrequest-breadcrumbs .breadcrumbs-tabs ul li span {
                    color: #7D8085;
                    font-size: 12px;
                    line-height: 28px;
                    font-weight: 500;
                    font-family: 'Roboto', sens-serif;
                }

.jobrequest-sharebtn {
    display: flex;
    flex-wrap: wrap;
    width: 75px;
    height: 32px;
    padding: 4px 8px;
    border-radius: 4px;
    background-color: #46BDD6;
    margin-top: 15px;
    margin-right: 15px;
}

    .jobrequest-sharebtn svg {
        fill: #fff;
        width: 11px;
        height: 17px;
    }

    .jobrequest-sharebtn span {
        color: #fff;
        font-size: 12px;
        line-height: 28px;
        font-weight: 500;
        font-family: 'Roboto', sens-serif;
        text-transform: capitalize;
        margin-left: 10px;
    }

.jobrequest-form {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

    .jobrequest-form h2 {
        text-align: center;
        color: #222831;
        font-size: 28px;
        line-height: 1;
        font-weight: 700;
        font-family: 'Roboto', sens-serif;
        text-transform: capitalize;
        margin: 0 0 25px 0;
        width: 100%;
    }

    .jobrequest-form form, .jobrequest-form .form-group {
        width: 100%;
    }

    .jobrequest-form label {
        color: #393E46;
        font-size: 14px;
        line-height: 1.5;
        font-weight: 400;
        font-family: 'Roboto', sens-serif;
        margin: 16px 0 5px 0;
        letter-spacing: 0.65px;
    }

    .jobrequest-form input {
        display: flex;
        width: 100%;
        height: 38px;
        border: 1px solid #E5E5E5;
        border-radius: 4px;
        background-color: #fff;
        padding: 8px 12px;
        font-size: 14px;
        line-height: 1;
        font-weight: 400;
        font-family: 'Roboto', sens-serif;
    }

    .jobrequest-form textarea {
        display: flex;
        width: 100%;
        height: 128px;
        border: 1px solid #E5E5E5;
        border-radius: 4px;
        background-color: #fff;
        padding: 8px 12px;
        font-size: 14px;
        line-height: 1;
        font-weight: 400;
        font-family: 'Roboto', sens-serif;
    }

    .jobrequest-form select {
        display: flex;
        width: 100%;
        height: 38px;
        border: 1px solid #E5E5E5;
        border-radius: 4px;
        background-color: #fff;
        padding: 8px 12px;
        font-size: 14px;
        line-height: 1;
        font-weight: 400;
        font-family: 'Roboto', sens-serif;
    }

.jobrequest-createbtn {
    display: flex;
    justify-content: center;
    width: 100%;
    border-radius: 4px;
    background-color: #46BDD6;
    border: 0;
    padding: 8px 12px;
    color: #fff;
    font-size: 16px;
    line-height: 40px;
    font-weight: 700;
    font-family: 'Roboto', sens-serif;
    text-align: center;
    margin: 0 0 25px 0;
    text-transform: capitalize;
}

.jobrequest-cancelbtn {
    display: flex;
    justify-content: center;
    width: 100%;
    border-radius: 4px;
    border: 1px solid #46BDD6;
    background-color: transparent;
    padding: 8px 12px;
    color: #7D8085;
    font-size: 16px;
    line-height: 40px;
    font-weight: 700;
    text-align: center;
    font-family: 'Roboto', sens-serif;
    text-transform: capitalize;
}

.NUI-sidbarscroll {
    height: calc( 100vh - 130px );
    width: 100%;
    position: absolute;
    overflow: hidden;
    overflow-y: scroll;
    padding-bottom: 150px;
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid #e6e3e3;
}

.switchuser-tab {
    position: relative;
    margin-left: 30px;
    width: calc( 100% - 60px );
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}

    .switchuser-tab img {
        width: 28px;
        height: 28px;
        border-radius: 100%;
        margin: 0 10px 0 0;
    }

    .switchuser-tab .dropdown > button {
        border: 0;
        background-color: transparent;
        color: #222831;
        font-size: 16px;
        line-height: 1.5;
        font-weight: 500;
        font-family: 'Roboto', sens-serif;
    }

    .switchuser-tab .down-arrow {
        content: '';
        position: relative;
        top: -2px;
        margin: 0 12px;
        border: solid #393E46;
        border-width: 0 1.5px 1.5px 0;
        display: inline-block;
        padding: 2px;
        transform: rotate( 40deg );
        -webkit-transform: rotate( 40deg );
    }

    .switchuser-tab .dropdown-menu {
        border: 0;
        padding: 0;
        margin: 0;
        top: 30px;
        border: 0;
        box-shadow: none;
    }

        .switchuser-tab .dropdown-menu li {
            color: #222831;
            font-size: 12px;
            line-height: 1;
            font-weight: 400;
            font-family: 'Roboto', sens-serif;
            padding: 5px 0;
        }

.job-request-clientPortal .feed-container .nav-tabs {
    position: initial;
    top: 0;
    border: 0;
}

.task-detail-slidepopup.show #feed-detail .feed-container {
    padding: 0;
}

    .task-detail-slidepopup.show #feed-detail .feed-container .nav-tabs li {
        height: 38px;
        padding: 0 12px;
    }

        .task-detail-slidepopup.show #feed-detail .feed-container .nav-tabs li:hover a,
        .task-detail-slidepopup.show #feed-detail .feed-container .nav-tabs li:active a {
            border: 0;
            border-bottom: 3px solid black;
            /* color: #fff; */
            color: black;
        }

.NUI-client-portal-settings {
    width: calc( 100% - 260px );
    padding: 25px 25px 25px 25px;
    margin: 160px 0 0 0;
}

.header-NUI-portal .clientportal-chaticon {
    display: flex;
    align-items: center;
    background-color: #1a91eb;
    padding: 0 10px;
    border-radius: 6px;
    height: 40px;
    cursor: pointer;
}

    .header-NUI-portal .clientportal-chaticon svg {
        fill: #fff;
        width: 24px;
        height: 24px;
    }

.chat-cont {
    position: fixed;
    right: -100%;
    top: 0;
    width: 850px;
    height: 100%;
    background-color: #fff;
    -webkit-box-shadow: 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
    z-index: 99;
    transition: all 1s ease-in-out;
}

    .chat-cont.chat-show {
        right: 0;
    }

.chaticon-close {
    display: flex;
    width: 100%;
    position: relative;
}

    .chaticon-close span {
        position: absolute;
        display: flex;
        width: 40px;
        height: 40px;
        right: 20px;
        top: 15px;
        cursor: pointer;
        background-color: #1a91eb;
        border-radius: 6px;
        -webkit-box-shadow: 0px 2px 3px 2px rgb(50 50 50 / 35%);
        -moz-box-shadow: 0px 2px 3px 2px rgb(50 50 50 / 35%);
        box-shadow: 0px 2px 3px 2px rgb(50 50 50 / 35%);
    }

        .chaticon-close span:before,
        .chaticon-close:after {
            position: absolute;
            left: 9px;
            top: 20px;
            width: 22px;
            height: 2px;
            background-color: #fff;
            transform: rotate(45deg);
            content: '';
        }

    .chaticon-close:after {
        transform: rotate(-45deg);
        left: auto;
        right: 29px;
        top: 35px;
    }

.c-btn {
    z-index: 1;
}

.emojionearea .emojionearea-button {
    z-index: 1 !important;
}

.clientportal-login {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background-color: #fff;
    width: 100%;
    height: 100%;
}

.clientportal-loginleft {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 50%;
    height: 100%;
}

.loginleft-detail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 500px;
    margin: 0 auto;
}

    .loginleft-detail a {
        display: flex;
        width: 315px;
        margin: 0 0 20px 0;
    }

        .loginleft-detail a img {
            width: 100%;
        }

    .loginleft-detail p {
        color: #605A89;
        font-size: 24px;
        line-height: 34px;
        text-align: center;
        font-weight: 500;
        font-family: 'Roboto', sens-serif;
    }

.clientportal-loginright {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 50%;
    height: 100vh;
    background: #605A89;
}

.loginright-detail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    width: 465px;
    margin: 0 0 0 60px;
}

    .loginright-detail a {
        display: inline-block;
        width: 200px;
        margin: 0 0 10px 0;
    }

        .loginright-detail a img {
            width: 100%;
        }

    .loginright-detail p {
        color: #fff;
        font-size: 14px;
        line-height: 24px;
        font-weight: 400;
        font-family: 'Roboto', sens-serif;
    }

.clientportal-loginright .form-group {
    margin: 0;
}

    .clientportal-loginright .form-group label {
        color: #fff;
        font-size: 14px;
        line-height: 24px;
        font-weight: 400;
        font-family: 'Roboto', sens-serif;
        width: 100%;
        margin: 20px 0 0 0;
    }

    .clientportal-loginright .form-group input {
        display: inline-block;
        width: 455px;
        margin: 10px 0 25px 0;
        background-color: #fff;
        border-radius: 8px;
        border: 0;
        padding: 15px;
        font-size: 14px;
        line-height: 1;
        font-family: 'Roboto', sens-serif;
        margin: 0;
    }

.clientportal-loginright .checkbox {
    margin: 20px 0 0 0;
}

    .clientportal-loginright .checkbox + .checkbox {
        margin: 10px 0 0 0;
    }

.clientportal-loginright .form-group input::-webkit-input-placeholder,
.clientportal-loginright .form-group input::-moz-placeholder,
.clientportal-loginright .form-group input:-moz-placeholder,
.clientportal-loginright .form-group input:-ms-input-placeholder {
    color: #393E46;
}

.clientportal-loginright .form-group {
}
/* Hide the browser's default checkbox */
.clientportal-loginright .container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.clientportal-loginright .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: rgba( 255,255,255, .24);
}

/* On mouse-over, add a grey background color */
.clientportal-loginright .container:hover input ~ .checkmark {
    background-color: #fff;
}

/* When the checkbox is checked, add a blue background */
.clientportal-loginright .container input:checked ~ .checkmark {
    background-color: #fff;
}

/* Create the checkmark/indicator (hidden when not checked) */
.clientportal-loginright .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.clientportal-loginright .container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.clientportal-loginright .container .checkmark:after {
    left: 5px;
    top: 1px;
    width: 6px;
    height: 10px;
    border: solid;
    border-color: #605a89;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.clientportal-loginright .label-text {
    color: #fff;
    font-size: 12px;
    line-height: 1;
    font-family: 'Roboto', sens-serif;
    font-weight: 400;
    margin: 0 0 0 5px;
}

.clientportal-loginright .btn-default {
    display: inline-block;
    width: 215px;
    margin: 25px 0 0 0;
    background-color: #fff;
    border-radius: 8px;
    border: 0;
    text-align: center;
    color: #605A89;
    font-size: 16px;
    line-height: 50px;
    font-family: 'Roboto', sens-serif;
    font-weight: 700;
    padding: 0;
}

    .clientportal-loginright .btn-default:active {
        background-color: #fff !important;
        color: #605a89 !important;
    }

/* files-element-Nui starts here */
.files-element-Nui {
    width: 95%;
}

.filesNui-heading-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.filesNui-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}

    .filesNui-title span {
        color: #000;
        font-size: 14px;
        line-height: 1;
        font-family: 'Roboto', sens-serif;
        font-weight: 500;
        text-transform: capitalize;
    }

.name-label {
    width: 232px;
}

.description-label {
    width: 130px;
}

.update-label {
    width: 60px;
}

.action-label {
    width: 100px;
    justify-content: flex-end;
}

.filesNui-detail-row {
    margin: 35px 0 0 0;
}

.filesNui-detail {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 30px 0;
}

    .filesNui-detail svg {
        width: 25px;
        margin-right: 10px;
    }

    .filesNui-detail .name-label {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
    }

.namelabel-detail {
    display: flex;
    flex-wrap: wrap;
    width: 190px;
    align-items: flex-start;
}

    .namelabel-detail h3,
    .description-label h3 {
        color: #000;
        font-size: 12px;
        line-height: 1.5;
        font-family: 'Roboto', sens-serif;
        font-weight: 500;
    }

    .namelabel-detail span,
    .filesNui-detail .description-label span {
        color: rgba( 0,0,0, .85 );
        font-size: 10px;
        line-height: 1.5;
        font-family: 'Roboto', sens-serif;
        font-weight: 400;
    }

.update-label button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 26px;
    color: #fff;
    font-size: 12px;
    line-height: 40px;
    font-weight: 400;
    font-family: 'Roboto', sens-serif;
    text-transform: uppercase;
    border-radius: 4px;
    background-color: #6A2C70;
    border: 0;
}

.filesNui-detail .action-label {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

    .filesNui-detail .action-label svg {
        width: 25px;
        height: 25px;
        margin-right: 10px;
    }

    .filesNui-detail .action-label span {
        color: #605A89;
        font-size: 14px;
        line-height: 1.3;
        font-family: 'Roboto', sens-serif;
        font-weight: 500;
        text-transform: capitalize;
    }

.c-toolbar.clientportal-files-toolbar.u-mb-small {
    justify-content: flex-start;
    padding: 10px 0 0 0;
}

/* files-element-Nui ends here */
/* .cp-top-outer, .feed-cp-title {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px;
    align-items: center
} */

.sidebar-icon {
    display: none;
}

.feed-delete-download {
    margin: 5px 0 0 0;
}

#feed .feed-delete-download ul {
    margin: 2px 0 0 0;
}

#project .task-filters .dropdown-menu {
    padding: 15px;
}

@media screen and ( max-width:1620px ) {
    .feed-cp-title {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
        margin: 0 0 20px 0;
    }
}

@media screen and ( max-width:1285px ) {
    .content-area-NUI .job-request-clientPortal {
        padding: 25px 10px;
    }

    .job-request-clientPortal .nav-tabs {
        width: 100%;
    }

        .job-request-clientPortal .nav-tabs li {
            height: 34px;
            padding: 0 13px;
        }

            .job-request-clientPortal .nav-tabs li a {
                font-size: 13px;
            }
}

@media screen and ( max-width:1200px ) {
    #jobrequest, #tasks, #files, #project {
        overflow-x: scroll;
    }

    .content-area-NUI .job-request-detail {
        width: 800px;
    }

    #files .row .col-md-12.ng-scope > div, #files .c-table.client-mobileview-table,
    #files .c-toolbar.clientportal-files-toolbar.u-mb-small {
        width: 650px !important;
    }

    #project .col-md-12 {
        width: 910px;
    }

    #project .c-tasks-list .c-table.c-table--highlight.u-mb-small {
        width: 100%;
    }
}

@media screen and (max-width:1023px) {
    .sidebar-icon {
        display: block;
        position: fixed;
        left: 18px;
        top: 30px;
        z-index: 99;
        width: 22px;
    }

        .sidebar-icon span {
            position: relative;
            width: 22px;
            height: 1.5px;
            background-color: #fff;
            display: flex;
            flex-wrap: wrap;
            transition: all .3s ease-in-out;
        }

            .sidebar-icon span:before, .sidebar-icon span:after {
                content: '';
                position: absolute;
                left: 0;
                top: 6px;
                width: 100%;
                height: 1.5px;
                background-color: #fff;
            }

            .sidebar-icon span:after {
                top: auto;
                bottom: -12px;
            }

    .show-sidebar .sidebar-icon span:before {
        display: none;
    }

    .show-sidebar .sidebar-icon span {
        transform: rotate(45deg);
    }

        .show-sidebar .sidebar-icon span:after {
            transform: rotate(85deg);
            bottom: auto;
            top: 1px;
        }

    .header-NUI-portal {
        padding: 0 15px;
    }

        .header-NUI-portal .dropdown-menu {
            left: -20px;
        }

    .main-NUI-sidebar {
        left: -100%;
        transition: all .3s ease-in-out;
    }

    .show-sidebar .main-NUI-sidebar {
        left: 2%;
        z-index: 999;
    }

    .header-NUI-portal .header-NUI-inner {
        width: 100%;
    }

    .content-area-NUI {
        padding: 0 15px;
    }

        .content-area-NUI .job-request-clientPortal {
            width: 100%;
        }

    .job-request-clientPortal .nav-tabs li {
        padding: 0 16px;
    }

        .job-request-clientPortal .nav-tabs li a {
            font-size: 14px;
        }
}

@media screen and (max-width:767px) {
    .job-request-clientPortal .nav-tabs > span {
        width: 100%;
    }

    .job-request-clientPortal .nav-tabs {
        border: 1px solid #ccc;
        border-radius: 8px;
        z-index: 9
    }

        .job-request-clientPortal .nav-tabs li {
            border-radius: 8px;
            height: auto;
            display: none;
            padding: 10px 16px;
            position: relative;
        }

            .job-request-clientPortal .nav-tabs li.active {
                display: block;
                background-color: var(--main-business-color) !important;
                width: 100%;
            }

                .job-request-clientPortal .nav-tabs li.active a {
                    color: #fff;
                }

                    .job-request-clientPortal .nav-tabs li.active a:after {
                        content: '';
                        position: absolute;
                        right: 20px;
                        top: 12px;
                        border: solid white;
                        border-width: 0 3px 3px 0;
                        display: inline-block;
                        padding: 3px;
                        transform: rotate(45deg);
                        -webkit-transform: rotate(45deg);
                    }

        .job-request-clientPortal .nav-tabs.open li {
            display: block;
        }

        .job-request-clientPortal .nav-tabs li {
            color: #333;
        }

    .c-tasks-list .Jumppl h4 {
        padding-left: 0 !important;
    }

    #project .col-md-12 {
        width: 100%;
    }

    #project .c-table .c-dropdown__menu {
        left: auto;
        right: 0;
    }

    #home .loadmore-btn a {
        display: inline-block;
        padding: 0;
    }

    .feed-title-row .description, .feed-title-row .date {
        line-height: 1.2;
    }

    #jobrequest {
        padding-bottom: 50px;
    }

    #feed .cp-top-outer {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }

    #feed .feed-title-outer .right {
        margin-left: auto;
    }

    #tasks .c-tasks-list .Jumppl h4 {
        padding-left: 15px !important;
    }

    .header-NUI-portal {
        z-index: 99;
    }

        .header-NUI-portal .dropdown-menu {
            left: 0;
        }

    #project .task-filters .dropdown-menu {
        left: auto !important;
        right: 0;
    }

    #tasks {
        padding: 0 15px;
    }

    .content-area-NUI {
        padding: 0 5px;
    }

        .content-area-NUI .job-request-clientPortal {
            padding: 25px 0;
        }

    .loadmore-btn {
        text-align: left;
    }

    .no-tasks-banner {
        padding: 0 !important;
    }

    .panel-heading.widget-pannel-heading .panel-title {
        width: 100%;
    }

    .panel-footer.chat-panel-footer {
        z-index: 99;
    }

    .content-area-NUI .job-request-detail {
        width: 500px;
    }

    .content-area-NUI .job-request-title {
        margin-bottom: 10px;
    }

    .content-area-NUI .job-request-titlerow {
        padding: 0 10px;
    }

    .content-area-NUI .job-request-detailrow {
        margin-bottom: 10px;
        padding: 0 10px 20px 10px;
    }

    .jobrequest-detail-col1, .jobrequest-detail-col3, .jobrequest-detail-col4 {
        width: 80px;
    }

    .jobrequest-detail-col2 {
        width: 130px;
    }

    .content-area-NUI .jobrequest-titlecont span, .content-area-NUI .jobrequest-detailcont span {
        font-size: 12px;
        word-break: break-all;
    }

    .filterby-selectbox.widget-filter-selectbox {
        padding: 20px 0 0 15px;
    }

    .jobrequest-form {
        padding: 0 10px;
    }

    #files .row .col-md-12.ng-scope > div, #files .c-table.client-mobileview-table, #files .c-toolbar.clientportal-files-toolbar.u-mb-small {
        width: 100% !important;
    }

    .c-table__head--slim .c-table__cell {
        text-align: left;
    }

    .header-NUI-portal {
        height: auto;
    }

        .header-NUI-portal .header-NUI-left {
            width: 142px;
        }

        .header-NUI-portal .header-NUI-inner {
            align-items: flex-end;
            margin: 0;
        }

        .header-NUI-portal .header-NUI-right {
            margin-bottom: 20px;
        }

        .header-NUI-portal .title-col {
            width: 100%;
        }

        .header-NUI-portal .user-list {
            width: 100%;
            margin: 10px 0 0 0;
        }

    .sidebar-icon {
        top: 20px;
    }

    .header-NUI-portal .dropdown-menu {
        left: auto;
        right: 0;
    }

    .header-NUI-portal .title-col-info {
        margin: 45px 0 0 0;
    }

    .header-NUI-portal .header-NUI-bg {
        overflow: hidden;
    }

    .content-area-NUI .job-request-clientPortal {
        margin-top: 130px;
    }

    .job-request-clientPortal .nav-tabs {
        top: 135px;
    }

    #project .dropdown-menu.pull-right {
        left: 0;
        right: auto;
        min-width: 200px;
    }

    #project .task-detail-slidepopup.show #feed-detail .feed-container .nav-tabs li {
        margin-top: 40px;
    }

    .jumppl-feed-row-outer {
        margin-right: 0;
    }

    .task-detail-slidepopup.show #feed-detail .feed-container .nav-tabs li {
        padding: 0 25px 0 10px;
    }

    .job-request-clientPortal #feed-detail .nav-tabs li.active a:after {
        top: 15px;
        right: -10px;
    }

    #project .task-detail-slidepopup.show #feed-detail .feed-container .nav-tabs li {
        margin: 5px 0 0 10px;
    }

    .job-request-clientPortal .nav-tabs {
        margin-left: 0;
    }

    .newui-top-breadcrumbs {
        margin-left: 5px;
    }

        .newui-top-breadcrumbs > ul > li:last-child {
            margin-right: 0;
        }

    .howtovideos-tabs {
        padding: 0;
    }

    .nui-task-section {
        margin-right: 0 !important;
    }

    .nuitask-detail-inner {
        padding: 0 0 15px 0;
    }

    #project .col-md-12 > .col-md-12 {
        padding: 0;
    }

    .nuitask-detail-left {
        width: 100px !important;
    }

    .nuitask-detail-info {
        width: 100%;
        padding-left: 0 !important;
    }

    .filterby-selectbox.widget-filter-selectbox {
        width: 95% !important;
    }

    .feed-details.task-details .c-card.u-p-medium {
        padding: 5px !important;
    }

    .right-sidebar.open-right-bar #chat_open_btn {
        display: none !important;
    }

    .desktop-chat-banner:before {
        width: 0% !important;
        height: 0% !important;
        display: none;
    }
}

.newui-top-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 20px;
    margin-top: 25px;
}

    .newui-top-breadcrumbs > ul {
        display: flex;
        flex-wrap: wrap;
    }

        .newui-top-breadcrumbs > ul > li {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            border: 1.5px solid #733FC1;
            background-color: rgba( 247, 247, 247 );
            height: 28px;
            padding: 0 8px;
            position: relative;
            border-radius: 4px;
            margin-right: 35px;
        }

            .newui-top-breadcrumbs > ul > li:before {
                content: '';
                position: absolute;
                right: -20px;
                top: 8px;
                border: solid #605A89;
                border-width: 0 1.5px 1.5px 0;
                display: inline-block;
                padding: 2px;
                transform: rotate(-45deg);
                -webkit-transform: rotate(-45deg);
            }

    .newui-top-breadcrumbs ul li:last-child:before {
        display: none;
    }

    .newui-top-breadcrumbs ul li a {
        display: inline-block;
        color: #733FC1;
        font-size: 12px;
        line-height: 1;
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
        text-transform: capitalize;
    }

    .newui-top-breadcrumbs ul li.create-project-btn a svg {
        stroke: #733FC1;
        margin-right: 8px;
    }

    .newui-top-breadcrumbs ul li.search-icon a svg {
        fill: #733FC1;
        width: 14px;
        height: 14px;
    }

    .newui-top-breadcrumbs ul li .icon-arrow {
        border: solid #733FC1;
        border-width: 0 1.5px 1.5px 0;
        display: inline-block;
        padding: 2px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        margin-left: 8px;
        position: relative;
        top: -4px;
    }

    .newui-top-breadcrumbs .dropdown-menu {
        left: -10px;
        top: 20px;
    }

        .newui-top-breadcrumbs .dropdown-menu li {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            margin: 0 0 8px 0;
            padding: 10px 12px;
            text-transform: capitalize;
            border-bottom: 1px solid #c7c7c7;
            position: relative;
        }

            .newui-top-breadcrumbs .dropdown-menu li input {
                font-weight: 400;
            }

                .newui-top-breadcrumbs .dropdown-menu li input::placeholder { /* Most modern browsers support this now. */
                    color: #0e0e0e;
                }

                .newui-top-breadcrumbs .dropdown-menu li input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
                    color: #0e0e0e;
                }

                .newui-top-breadcrumbs .dropdown-menu li input:-moz-placeholder { /* WebKit, Blink, Edge */
                    color: #0e0e0e;
                }

                .newui-top-breadcrumbs .dropdown-menu li input::-moz-placeholder { /* WebKit, Blink, Edge */
                    color: #0e0e0e;
                }

                .newui-top-breadcrumbs .dropdown-menu li input:-ms-input-placeholder { /* WebKit, Blink, Edge */
                    color: #0e0e0e;
                }

            .newui-top-breadcrumbs .dropdown-menu li.toptabs-maincreatebtn {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;
                width: calc( 100% - 25px );
                height: 32px;
                border-radius: 8px;
                background-color: var(--main-business-color);
                padding: 0 10px;
                margin: 0 auto;
            }

                .newui-top-breadcrumbs .dropdown-menu li.toptabs-maincreatebtn:after {
                    display: none;
                }

                .newui-top-breadcrumbs .dropdown-menu li.toptabs-maincreatebtn span {
                    color: #fff;
                    font-size: 12px;
                    line-height: 1;
                    font-weight: 700;
                    text-transform: uppercase;
                    font-family: 'Roboto', sans-serif;
                    margin-right: 5px;
                    display: flex;
                }

                .newui-top-breadcrumbs .dropdown-menu li.toptabs-maincreatebtn svg {
                    stroke: #fff;
                }

            .newui-top-breadcrumbs .dropdown-menu li:last-child {
                border: 0;
            }

            .newui-top-breadcrumbs .dropdown-menu li span {
                color: #444;
                font-size: 12px;
                line-height: 1;
            }

        .newui-top-breadcrumbs .dropdown-menu > li:after,
        .newui-top-breadcrumbs .dropdown-menu > li > .submenu li:after {
            content: '';
            position: absolute;
            right: 15px;
            top: 15px;
            border: solid #605A89;
            border-width: 0 1.5px 1.5px 0;
            display: inline-block;
            padding: 2px;
            transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
        }

    .newui-top-breadcrumbs li.toptabs-dropdown2 .dropdown-menu > li:after {
        display: none;
    }

    .newui-top-breadcrumbs .dropdown-menu li .submenu {
        display: none;
        position: absolute;
        left: 100%;
        top: 0;
        width: 100%;
        z-index: 2;
        background-color: rgba( 255,255,255, 1 );
        border: 1px solid rgba(0,0,0,.15);
        border-radius: 4px;
        -webkit-box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
        box-shadow: 0 6px 12px rgb(0 0 0 / 18%)
    }

    .newui-top-breadcrumbs .dropdown-menu > li:hover > .submenu {
        display: block;
    }

    .newui-top-breadcrumbs .dropdown-menu li input {
        display: flex;
        width: calc( 100% - 70px);
        color: #393E46;
        font-size: 12px;
        line-height: 1;
        padding: 6px 10px;
        border-radius: 8px;
        border: 1px solid #c7c7c7;
        font-family: 'Roboto', sans-serif;
        margin-right: 5px;
    }

    .newui-top-breadcrumbs .dropdown-menu li .dropdown-fieldbutton {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        width: 65px;
        height: 32px;
        border-radius: 8px;
        background-color: var(--main-business-color);
    }

        .newui-top-breadcrumbs .dropdown-menu li .dropdown-fieldbutton span {
            display: flex;
            color: #fff;
            font-size: 12px;
            line-height: 1;
            font-family: 'Roboto', sans-serif;
            text-transform: capitalize;
            margin-right: 5px;
        }

        .newui-top-breadcrumbs .dropdown-menu li .dropdown-fieldbutton svg {
            stroke: #fff;
            width: 12px;
            height: 12px;
        }

    .newui-top-breadcrumbs .dropdown-menu li.create-projectfield:after {
        display: none;
    }

    .newui-top-breadcrumbs .dropdown-menu li .submenu-3rdlevel {
        display: none;
    }

    .newui-top-breadcrumbs .dropdown-menu li .submenu li:hover .submenu-3rdlevel {
        display: block;
    }

    .newui-top-breadcrumbs .dropdown-menu li .submenu li .submenu-3rdlevel li:after {
        display: none;
    }


.howtovideos-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: 25px 0 0 0;
    padding: 0 35px 0 20px;
}

.howtovideos-left {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 452px;
}

.howtovideos-title {
    display: flex;
    flex-wrap: wrap;
    width: 250px;
}

    .howtovideos-title h3 {
        color: #222831;
        font-size: 20px;
        line-height: 1 !important;
        font-weight: 700;
        font-family: 'Roboto', sans-serif;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.howtovideos-left .due-date {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 120px;
    color: rgba(34, 40, 49, 0.33);
    font-size: 12px;
    line-height: 1;
    margin: 5px 0 0 0;
}

    .howtovideos-left .due-date span {
        color: #DE6490;
        font-weight: 700;
    }

.howtovideos-tabslist {
    display: flex;
    flex-wrap: wrap;
    width: 200px;
}

    .howtovideos-tabslist > ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
        height: 32px;
        background-color: #eee;
        border-radius: 4px;
        padding: 0 20px 0 12px;
    }

        .howtovideos-tabslist > ul li {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
        }

        .howtovideos-tabslist > ul > li > span {
            display: inline-block;
            color: #393E46;
            font-size: 12px;
            line-height: 1;
            font-weight: 500;
            font-family: 'Roboto', sans-serif;
            margin-right: 5px;
            text-transform: capitalize;
        }

        .howtovideos-tabslist > ul li svg {
            display: inline-block;
            width: 14px;
            height: 14px;
            fill: #393E46;
        }

.howtovideos-dropdown-tab {
}

.howtovideos-tabs .dropdown-button {
    position: relative;
    border: 0;
    outline: none;
    width: 10px;
    height: 5px;
}

    .howtovideos-tabs .dropdown-button .caret {
        display: inline-block;
        width: 5px;
        height: 5px;
        background-color: rgba(34, 40, 49, 0.33);
        border: 0;
        border-radius: 50%;
        margin-right: 2px;
    }

    .howtovideos-tabs .dropdown-button:before,
    .howtovideos-tabs .dropdown-button:after {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: rgba(34, 40, 49, 0.33);
    }

    .howtovideos-tabs .dropdown-button:before,
    .howtovideos-tabs .dropdown-button:after {
        position: absolute;
        content: '';
        left: -6px;
        top: 4px;
    }

    .howtovideos-tabs .dropdown-button:after {
        left: auto;
        right: -7px;
    }

.howtovideos-tabs .howtovideos-left .dropdown-button:after {
    right: -6px;
}

.howtovideos-tabs .dropdown-menu {
    padding: 0;
}

    .howtovideos-tabs .dropdown-menu li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        margin: 0 0 8px 0;
        color: #444;
        font-size: 12px;
        line-height: 1;
        padding: 10px 12px;
        text-transform: capitalize;
        border-bottom: 1px solid #c7c7c7;
        position: relative;
    }

        .howtovideos-tabs .dropdown-menu li svg {
            fill: #444;
            width: 16px;
            height: 16px;
        }

        .howtovideos-tabs .dropdown-menu li span {
            color: #444;
            font-size: 12px;
            line-height: 1;
            text-transform: capitalize;
            display: flex;
            margin-left: 8px;
        }

        .howtovideos-tabs .dropdown-menu li:last-child {
            margin: 0;
            border: 0;
        }

.howtovideos-right {
    display: flex;
    flex-wrap: wrap;
}

    .howtovideos-right > ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        width: 100%;
    }

        .howtovideos-right > ul > li {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            background-color: #eee;
            border-radius: 4px;
            padding: 0 12px;
            height: 32px;
            margin-right: 8px;
        }

    .howtovideos-right ul li:first-child {
        /*background-color: transparent;*/
    }

    .howtovideos-right ul li svg {
        fill: #393E46;
        margin-right: 8px;
        width: 16px;
        height: 12px;
        margin-top: 6px;
    }

    .howtovideos-right ul li.top-reports-dropdown svg {
        width: 17px;
        height: 16px;
    }

    .howtovideos-right ul li:nth-child(2) svg {
        width: 15px;
        height: 16px;
    }

    .howtovideos-right ul li:nth-child(3) svg {
        width: 16px;
        height: 16px;
    }

    .howtovideos-right ul li a {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .howtovideos-right ul li span {
        display: inline-block;
        color: #393E46;
        font-size: 12px;
        line-height: 1;
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
        text-transform: capitalize;
        margin-top: 10px;
    }

.howtovideos-tabs .howtovideos-right ul li .dropdown-menu {
    left: auto;
    right: 0;
}

.howtovideos-right ul li .howtovideos-dropdown-tab .dropdown-menu {
    min-width: 200px;
    right: -10px;
    left: auto;
}

.howtovideos-tabs .dropdown-menu li:hover .dropdown-menu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background-color: #fff;
}

.howtovideos-tabs .dropdown-menu li:hover .dropdown-menu {
    display: block;
}

.howtovideos-tabs .howtovideos-right ul li.top-reports-dropdown .dropdown-menu,
.howtovideos-tabs .howtovideos-right ul li.top-sort-dropdown .dropdown-menu {
    left: -10px;
    min-width: 300px;
}

.howtovideos-tabs .howtovideos-right ul li.top-sort-dropdown .dropdown-menu {
    left: auto;
    right: 0;
}

.filterby-row {
    padding: 20px 25px;
    background-color: #f5f9ff;
    width: 100%;
    position: relative;
    display: none;
}

.filterby-dropdown-row {
    display: inline-block;
    width: 100%;
}

.filterby-selectbox {
    display: inline-block;
    width: 23%;
    margin: 0 10px 10px 0;
}

    .filterby-selectbox span {
        display: inline-block;
        width: auto;
        color: #222;
        font-size: 12px;
        line-height: .9;
        text-transform: capitalize;
        margin: 0 0 20px 0;
        font-family: 'Roboto', sans-serif;
        font-weight: 600;
    }

        .filterby-selectbox span.caret {
            float: right;
            text-align: right;
            color: transparent;
        }

        .filterby-selectbox span img {
            margin: -2px 5px 0 0;
        }

    .filterby-selectbox .dropdown,
    .filterby-selectbox .btn-default {
        width: 100%;
        background-color: #fff;
        font-size: 16px;
        color: #000;
        text-align: left;
        font-family: 'Roboto', sans-serif;
    }

    .filterby-selectbox .dropdown,
    .filterby-selectbox .btn-default {
        width: 100%;
        background-color: #fff;
        font-size: 16px;
        color: #000;
        text-align: left;
        font-family: 'Roboto', sans-serif;
    }

        .filterby-selectbox .dropdown ul {
            width: 100%;
            padding: 0;
        }

.dropdown-menu > li > a {
    font-size: 14px;
    line-height: 2;
}

.filterby-dropdown-buttons {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: wrap;
}

    .filterby-dropdown-buttons ul li {
        display: inline-block;
        width: 130px;
    }

        .filterby-dropdown-buttons ul li:first-child button {
            font-weight: 700;
            letter-spacing: 1px;
        }

        .filterby-dropdown-buttons ul li button {
            display: inline-block;
            width: 100%;
            background-color: #7675f7;
            color: #fff;
            font-size: 14px;
            line-height: 3;
            border-radius: 3px;
            border: 0;
            text-transform: capitalize;
            font-family: 'Roboto', sans-serif;
        }

        .filterby-dropdown-buttons ul li:last-child {
            margin: 0;
            padding: 0;
        }

.filterby-closebutton {
    display: inline-block;
    color: #000;
    font-size: 16px;
    line-height: .9;
    font-family: 'Roboto', sans-serif;
    text-transform: capitalize;
    cursor: pointer;
    position: absolute;
    right: 40px;
    top: 10px;
    font-weight: 600;
    font-family: 'Roboto', sans-serif;
}

    .filterby-closebutton img {
        margin-right: 5px;
    }

.filterby-selectbox .form-control {
    font-weight: 600;
    font-family: 'Roboto', sans-serif;
}

    .filterby-selectbox .form-control option {
        font-weight: 400;
    }

.addtask-editable {
    width: 323px;
    min-height: 70px;
    overflow-x: hidden;
    word-break: initial;
    color: #151b26;
    font-size: 12px;
    line-height: 1.4;
    padding: 10px 6px;
    margin: 0;
    resize: none;
}

.nui-task-section {
    padding: 15px 0;
    margin: 15px 25px 0 0;
    background-color: #fff;
    border-radius: 8px;
}

.nuitask-title-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #eee;
}

.nuitask-title-left {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: auto;
    padding-left: 15px;
}

.nuitask-titleuser {
    display: flex;
    width: 20px;
    margin-right: 20px;
}

    .nuitask-titleuser svg {
        stroke: #393E46;
    }

.nuitask-titleuser-title {
}

    .nuitask-titleuser-title span {
        display: inline-block;
        color: #222831;
        font-size: 16px;
        line-height: 1;
        font-family: 'Roboto', sans-serif;
        font-weight: 700;
        margin: 0 20px 0 0;
    }

.nuitask-title-btn {
    display: inline-block;
    width: 138px;
    background-color: #605A89;
    border-radius: 4px;
    padding: 0 8px;
}

    .nuitask-title-btn a {
        color: #fff;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }

        .nuitask-title-btn a svg {
            stroke: #fff;
        }

    .nuitask-title-btn span {
        color: #fff;
        display: flex;
        line-height: 32px;
        font-size: 14px;
        justify-content: space-between;
        font-weight: 500;
        font-family: 'Roboto', sans-serif;
    }

.nuitask-title-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: auto;
    padding-right: 15px;
    margin: 15px;
}

.nuitask-title-select {
    color: #605A89;
    font-size: 14px;
    line-height: 32px;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    text-transform: capitalize;
    background-color: rgba(238, 238, 238, 0.6);
    width: 56px;
    text-align: center;
    border-radius: 4px;
}

.nuitask-title-cancel {
    color: #fff;
    background-color: #B83B5E;
    margin-right: 20px;
}

.nuitask-title-right-btnslist {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-right: 20px;
}

    .nuitask-title-right-btnslist li {
        display: flex;
        margin-right: 20px;
    }

        .nuitask-title-right-btnslist li a {
            display: flex;
            color: var(--main-business-color);
            font-size: 12px;
            line-height: 1;
            text-transform: capitalize;
            font-weight: 500;
            font-family: 'Roboto', sans-serif;
        }

.nui-task-detail {
    margin: 20px 0 0 0;
    padding: 0;
}

.nuitask-detail-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 15px;
    transition: all .3s ease-in-out;
    padding: 0 15px 15px 10px;
    border-bottom: 1px solid #eee;
    position: relative;
}

    .nuitask-detail-inner:hover {
        z-index: 9;
    }

.task-status-border {
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 100%;
}

.nuitask-detail-left {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: auto;
}

.nuitask-detailleft-top {
    width: 100%;
}

.nuitask-detailicon {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 55px;
    position: relative;
}

    .nuitask-detailicon i {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        margin: 0 0 5px 0;
        font-size: 24px;
    }

    .nuitask-detailicon small {
        display: flex !important;
        flex-direction: column;
        align-items: center;
    }

    .nuitask-detailicon span {
        display: inline-block;
        width: 100%;
        text-align: center;
        color: #605A89;
        font-size: 10px;
        line-height: 1 !important;
        font-weight: 500;
        font-family: 'Roboto', sans-serif;
        text-transform: capitalize;
    }

.nuitask-detail-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-left: 15px;
    max-width: 360px;
}

    .nuitask-detail-info h3 {
        color: #393E46;
        font-size: 14px;
        line-height: 1;
        font-weight: 500;
        font-family: 'Roboto', sans-serif;
        text-transform: capitalize;
        margin: 3px 0 10px 0;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.nuitask-detailleft-tags {
    display: flex;
    flex-wrap: wrap;
}

    .nuitask-detailleft-tags ul {
        display: flex;
        flex-wrap: wrap;
        margin: 10px 0 0 0;
    }

        .nuitask-detailleft-tags ul li {
            display: flex;
            padding: 8px 6px;
            text-transform: capitalize;
            background-color: var(--main-business-color);
            border-radius: 8px;
            margin-right: 10px;
        }

            .nuitask-detailleft-tags ul li span {
                display: inline-block;
                color: #fff;
                font-size: 10px;
                line-height: 1;
                font-family: 'Roboto', sans-serif;
                font-weight: 500;
            }

.nuitask-info-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-right: 15px;
}

    .nuitask-info-list li {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        margin-right: 5px;
    }

        .nuitask-info-list li svg {
            width: 12px;
            height: 14px;
            fill: #605A89;
        }

.nuitask-detail-right {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.nuitask-right-detailtab, .nuitask-right-subtasktab {
    opacity: 0;
    visibility: hidden;
    padding: 6px 8px;
    cursor: pointer;
    display: inline-block;
    background-color: rgba(205, 205, 205, 0.56);
    border-radius: 4px;
}

.nuitask-right-subtasktab {
    opacity: 1 !important;
    visibility: visible;
}

.nuitask-spans {
    margin-right: 15px;
}

    .nuitask-spans span {
        color: var(--main-business-color);
        font-size: 12px;
        line-height: 1;
        font-weight: 500;
        font-family: 'Roboto', sans-serif;
        text-transform: capitalize;
    }

.nuitask-detail-inner:hover .nuitask-right-detailtab,
.nuitask-detail-inner:hover .nuitask-right-subtasktab {
    opacity: 1 !important;
    visibility: visible;
}

.nuitask-right-subtasktab svg {
}

.nuitask-duedateTab {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin-right: 15px;
}

.duedate-text {
    display: flex;
    color: #BDBDBD;
    font-size: 14px;
    line-height: 1;
    font-weight: 400;
    font-family: 'Roboto', sans-serif;
    text-transform: capitalize;
}

.duedate-number {
    display: flex;
    color: #B83B5E;
    font-size: 12px;
    line-height: 1;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    text-transform: capitalize;
    margin: 5px 0 0 0;
}

    .duedate-number.inProgress {
        color: #3CB44B
    }

.nuitask-right-addusers {
}

    .nuitask-right-addusers > ul {
        display: flex;
        flex-wrap: wrap;
    }

.business-dropdown .c-btn.has-dropdown.dropdown-toggle {
    color: #222831 !important;
}

.nuitask-right-addusers ul li {
    width: 34px;
    height: 34px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.dropdown-menu.addusers-list-dropdown {
    left: auto;
    right: 0;
    padding: 10px 0;
}

    .dropdown-menu.addusers-list-dropdown li {
        width: 100%;
        height: auto;
        padding: 0 6px 12px 6px !important;
        display: inline-block;
        border-radius: 0;
        border-bottom: 1px solid #c7c7c7;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }

        .dropdown-menu.addusers-list-dropdown li:last-child {
            border: 0;
        }

.addusers-dropdown-title {
    color: #444;
    font-size: 12px;
    line-height: 1;
    padding: 10px 12px;
    text-transform: capitalize;
    display: inline-block;
    width: calc( 100% - 40px );
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding: 0;
}

.addusers-list-dropdown li img {
    display: flex;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    margin-right: 5px;
}

.nuitask-right-addusers ul li:first-child img {
    padding: 2px;
    cursor: pointer;
}

.nuitask-right-addusers ul li img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #c7c7c7;
}

.nuitask-right-checkbox {
    display: flex;
    align-items: center;
    width: 24px;
    height: 24px;
    margin: 0 0 0 15px;
}

    .nuitask-right-checkbox .container {
        display: flex;
        position: relative;
        height: 20px;
        padding-left: 35px;
        margin-bottom: 12px;
        cursor: pointer;
        font-size: 22px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
        /* Hide the browser's default checkbox */
        .nuitask-right-checkbox .container input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }
    /* Create a custom checkbox */
    .nuitask-right-checkbox .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 24px;
        width: 24px;
        background-color: transparent;
        border: 2px solid #E5E5E5;
    }
    /* On mouse-over, add a grey background color */
    .nuitask-right-checkbox .container:hover input ~ .checkmark {
        background-color: transparent;
        border: 2px solid #E5E5E5;
    }
    /* When the checkbox is checked, add a blue background */
    .nuitask-right-checkbox .container input:checked ~ .checkmark {
        background-color: var(--main-business-color);
    }
    /* Create the checkmark/indicator (hidden when not checked) */
    .nuitask-right-checkbox .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }
    /* Show the checkmark when checked */
    .nuitask-right-checkbox .container input:checked ~ .checkmark:after {
        display: block;
    }
    /* Style the checkmark/indicator */
    .nuitask-right-checkbox .container .checkmark:after {
        left: 7px;
        top: 3px;
        width: 6px;
        height: 12px;
        border: solid white;
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

.nui-addtask-row {
    display: flex;
    flex-wrap: wrap;
    margin: 15px 0 15px 15px;
}

    .nui-addtask-row input {
        display: inline-block;
        width: calc( 100% - 150px );
        border: 0;
        border-bottom: 1px solid #c1c1c1;
        padding: 0 6px 10px 6px;
        font-size: 14px;
        color: #000;
        margin-right: 15px;
    }

    .nui-addtask-row button {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        background-color: var(--main-business-color);
        width: 120px;
        height: 38px;
        border-radius: 4px;
        padding: 0 15px;
        border: 0;
    }

        .nui-addtask-row button img {
            margin-right: 10px;
            width: 12px;
            height: 12px;
        }

        .nui-addtask-row button span {
            display: inline-block;
            color: #fff;
            font-size: 16px;
            line-height: 1;
            font-weight: 500;
            font-family: 'Roboto', sans-serif;
        }

.nui-clientportal-tabs .nav-tabs > li {
    margin-right: 35px;
}

    .nui-clientportal-tabs .nav-tabs > li:first-child {
        margin-left: 25px;
    }

    .nui-clientportal-tabs .nav-tabs > li a {
        border: 0;
        border-bottom: 1px solid transparent;
        padding: 0 0 15px 0;
        color: #605A89;
        font-size: 16px;
        line-height: 1;
        font-weight: 400;
        font-family: 'Roboto', sans-serif;
    }

    .nui-clientportal-tabs .nav-tabs > li.active a {
        color: var(--main-business-color);
        font-weight: 700;
        border-bottom: 1px solid var(--main-business-color);
    }

.nui-clientportal-tabs .tab-content {
    padding: 0 25px;
}

.nui-clientportal-tabsouter {
    padding: 15px 0;
    margin: 15px 25px 0 0;
    background-color: #fff;
    border-radius: 8px;
}

.information-tab-row {
    margin: 25px 0 0 15px;
}

.newclient-portal-title {
    display: inline-block;
    width: 100%;
    color: #222831;
    font-size: 20px;
    line-height: 1;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    margin: 0 0 15px 25px;
}

.nui-clientportal-tabs {
    padding: 0;
}
/*  skeleton starts here ----------------------- */
.header-skeleton {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 153px;
    background-color: #ebebeb;
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

.sidebar-skeleton {
    position: fixed;
    left: 50px;
    top: 70px;
    border-radius: 8px;
    width: 270px;
    height: 100%;
    box-shadow: 1px 2px 2px rgb(0 0 0 / 8%);
    -webkit-box-shadow: 1px 2px 2px rgb(0 0 0 / 8%);
    -moz-box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.08);
    background-color: #e3e3e3;
    z-index: 4;
}

.sidebar-skeleton-logo {
    width: 122px;
    height: 50px;
    margin: 22px auto;
    background: linear-gradient(-45deg, #cbcbcb, #ebebeb, #cbcbcb, #ebebeb);
    background-size: 400% 400%;
    animation: gradient 3s ease infinite;
}

.sidebar-skeleton ul {
    padding: 0 15px;
}

    .sidebar-skeleton ul li {
        display: inline-block;
        width: 100%;
        height: 48px;
        border-radius: 8px;
        background: linear-gradient(-45deg, #cbcbcb, #ebebeb, #cbcbcb, #ebebeb);
        background-size: 400% 400%;
        animation: gradient 3s ease infinite;
    }

.skeleton-content-outer {
    display: flex;
    justify-content: flex-end;
    padding: 0 30px 0 85px;
}

.skeleton-content {
    display: flex;
    flex-wrap: wrap;
    width: calc( 100% - 260px );
    padding: 25px 25px 25px 25px;
    margin: 160px 0 0 0;
    background-color: #e3e3e3;
}

.skeleton-tabs {
}

.skeleton-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 600px;
    margin: 0 auto 30px auto;
    border-radius: 68px;
    background-color: #fff;
    border: 1px solid #ccc;
}

    .skeleton-tabs li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 100px;
        height: 40px;
        border-radius: 60px;
        background: linear-gradient(-45deg, #cbcbcb, #ebebeb, #cbcbcb, #ebebeb);
        background-size: 400% 400%;
        animation: gradient 3s ease infinite;
    }

.skeleton-tabs-content {
    position: relative;
    background-color: #ebebeb;
    width: 100%;
    height: calc( 100vh - 220px );
}

.right-sidebar.open-right-bar #chat_open_btn {
    display: none !important;
}

.right-sidebar.open-right-bar .chat-close-btn {
    display: block !important;
    position: relative;
    float: right;
    margin: 30px 15px 0 0;
    width: 22px;
}

.chat-close-btn:before, .chat-close-btn:after {
    content: '';
    position: absolute;
    left: 0;
    top: -5px;
    width: 22px;
    height: 2px;
    background-color: #222;
    transform: skewy( -40deg);
}

.chat-close-btn:after {
    left: auto;
    right: 0;
    top: -5px;
    transform: skewy( 40deg);
}

.c-btn.chat-btns.c-btn--info {
    z-index: 10000;
}

    .c-btn.chat-btns.c-btn--info svg {
        fill: #fff;
        width: 22px;
        height: 22px;
    }

    .c-btn.chat-btns.c-btn--info i {
        display: block;
        bottom: 1px;
        color: #fff;
    }

.chat-scrollbtn {
    position: fixed;
    right: 20px;
    bottom: 100px;
    z-index: 9999;
    width: 45px;
    height: 40px;
    border-radius: 4px;
    background-color: #1a91eb;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .chat-scrollbtn span {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

        .chat-scrollbtn span:before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: auto;
            margin: 0 auto;
            border: solid white;
            border-width: 0 2px 2px 0;
            display: inline-block;
            padding: 3px;
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            width: 10px;
            height: 10px;
        }

.chat-download-btn {
    display: flex;
    justify-content: center;
    text-transform: capitalize;
    padding: 0 5px;
    border-radius: 4px;
    margin: 5px auto 5px auto;
}

    .chat-download-btn i {
        font-size: 18px !important;
    }

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}
/*  skeleton ends here ---------------- */
.skeleton {
    animation: skeleton-loading 1s linear infinite alternate;
}

@keyframes skeleton-loading {
    0% {
        background-color: hsl(200,20%,70%);
    }

    100% {
        background-color: hsl(200,20%,95%);
    }
}

.CP-task-title {
    color: #0e0e0e;
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
    padding: 10px 0 10px 10px;
}

#tasks {
    overflow-x: scroll;
}

.c-tasks-list .Jumppl h4 {
    position: relative;
    cursor: pointer;
}

.c-tasks-list .tasktable-arrow {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    position: absolute;
    right: 25px;
    top: 25px;
}

.c-tasks-list .tasktable-arrow-down {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(226deg);
    -webkit-transform: rotate(226deg);
    position: absolute;
    right: 25px;
    top: 25px;
}

.c-tasks-list .Jumppl.show-task-table .tasktable-arrow {
    content: '';
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    position: absolute;
    right: 25px;
    top: 25px;
}

.CP-task-table-outer {
    display: inline-block;
    padding: 0 25px;
}

.show-task-table .CP-task-table-outer {
    display: block;
}

.CP-task-table-outer .c-table {
    width: 1200px;
}

.CP-task-table-outer .c-table__cell {
    padding-right: 0;
}

.CP-task {
    width: 450px;
}

.CP-status {
    width: 105px;
    text-align: center;
}

.CP-tag {
    width: 70px;
}

.CP-attachment {
    width: 80px;
    padding-left: 0;
    text-align: center;
}

.CP-assigned {
    width: 200px;
}

.CP-task-table-outer .CP-assigned .assigned-name > span {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.CP-assigned img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.CP-duedate {
    width: 80px;
}

.CP-comment {
    width: 100px;
}

.CP-task-table-outer .task-cell .move-icon {
    left: 0;
}

.CP-task-table-outer .c-dropdown {
    width: 100%;
}

.CP-task-table-outer .fa.fa-circle {
    color: transparent;
    border-radius: 8px;
}

.CP-task-table-outer .status-name {
    position: absolute;
    top: 3px;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    color: #000;
    font-size: 10px;
}

.CP-task-table-outer .assigned-name > span {
    font-size: 14px;
    line-height: 1 !important;
    color: #000;
}

.assigned-name .c-dropdown__menu {
    top: 35px;
}

.CP-task-table-outer .attachment-number {
    display: inline-block;
    color: #fff;
    font-size: 10px;
    line-height: 1;
    margin: 0 3px;
    padding: 0 8px;
    background-color: var(--main-business-color) !important;
    border-radius: 8px;
}

.CP-task-table-outer .attachment-btn {
    display: inline-block;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    padding: 0 8px;
    height: 28px;
    border: 0;
    font-weight: 400;
    text-transform: capitalize;
    background-color: transparent;
}

.clienttask-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-right: 50px;
    width: 300px;
}

    .clienttask-info .progress-bar {
        display: inline-block;
        width: 100%;
        height: 20px;
        border-radius: 8px;
        background-color: green;
        position: relative;
    }

    .clienttask-info .progress {
        margin: 0;
        width: 90%;
        position: relative;
    }

    .clienttask-info .progress-bar span {
        position: absolute;
        right: 10px;
        top: 0;
        color: #fff;
        font-size: 10px;
        line-height: 1;
        padding: 5px;
        border-radius: 50%;
    }
/*.clienttask-info .progress-info {
    display:inline-block;
    color:#000;
    font-size:14px;
    line-height:1;
    margin-left:5px;
}*/
.Jumppl.show-task-table {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.docs-view-active {
    color: #2ea1f8 !important;
    background-color: transparent;
}

@media ( max-width:767px ) {
    .Jumppl.show-task-table h4 {
        width: 100%;
    }

    .clienttask-info {
        width: 100%;
    }
}

@media ( min-width:768px ) {
    .Jumppl.show-task-table h4 {
        width: calc( 100% - 350px );
    }
}

/**********************************************************************Project progress***********************************************************/
.all_project_progress__table th {
    padding: 10px 6px !important;
}

.all_project_progress__table [ng-show="expanded"] .all_project_progress__table {
    width: 98% !important;
    margin: 0 0 20px 0;
    border: 1px solid #ddd !important;
}

.all_project_progress__table td div {
    font-size: 11px;
    display: flex;
    justify-content: center;
}

.CP-status {
    width: 105px;
    text-align: center;
}

.all_project_progress__table th span {
    display: inline-block;
}

.all_project_progress__table.table th {
    font-size: 12px;
    text-align: center;
    padding: 10px 2px !important;
}

.all_project_progress__table th:first-child {
    text-align: left;
}

.all_project_progress__table {
    width: 100%;
    max-width: initial;
}

.newui-top-breadcrumbs > ul > li.create-project-btn {
    height: 40px;
    border: 2px solid #605A89;
}

    .newui-top-breadcrumbs > ul > li.create-project-btn a {
        font-size: 14px;
        margin-top: 10px;
    }

.newui-top-breadcrumbs > ul > li:before {
    content: '';
    position: absolute;
    right: -20px;
    top: 8px;
    border: solid #605A89;
    border-width: 0 1.5px 1.5px 0;
    display: inline-block;
    padding: 2px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.CP-task-table-outer .fa.fa-circle {
    color: transparent;
    border-radius: 8px;
}

.status-name {
    position: relative;
    top: 3px;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    color: #000;
    font-size: 10px;
}

.all_project_progress__table td {
    padding: 10px 10px 0 10px !important;
}

.progress-bar {
    box-shadow: none;
    line-height: 1;
    padding: 2px;
    background-color: #39b54a !important;
}

.all_project_progress__table .prog_col .progress-text {
    color: #fff;
    line-height: 1;
    overflow: visible;
}

.progress-text-black {
    margin-left: 15px;
    color: black;
    font-size: 15px;
}

.progress-text-white {
    margin-left: 15px;
    color: #000;
    font-size: 15px;
}

.CP-status {
    width: 105px;
    text-align: center;
}

.all_project_progress__table .dropdown-menu {
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin: 0 0 8px 0;
    color: #444;
    font-size: 12px;
    line-height: 1;
    padding: 0;
    text-transform: capitalize;
    border-bottom: 1px solid #c7c7c7;
    left: -90px;
}

.all_project_progress__table li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    color: #444;
    font-size: 12px;
    line-height: 1;
    padding: 10px 12px;
    text-transform: capitalize;
    border-bottom: 1px solid #c7c7c7;
    position: relative;
}

.progress-task-btn {
    background-color: var(--main-business-color);
    padding: 3px 6px;
    text-align: center;
    color: #fff;
    font-size: 10px !important;
    text-transform: capitalize;
    font-weight: 500;
    border-radius: 6px;
    margin: 0 0 0 5px;
    display: inline-block;
    border: 0;
}

.all_project_progress__table_lable {
    min-width: 250px;
    max-width: 250px;
    width: 250px;
}

    .all_project_progress__table_lable span {
        font-size: 14px !important;
        font-weight: 500;
    }

.all_project_progress__table.table {
}

.all_project_progress__table .CP-status li a {
    width: 100%;
}

.all_project_progress__table svg {
    fill: #444;
    width: 20px;
    height: 20px;
    display: inline-block;
}

.all_project_progress__table span {
    font-size: 12px;
    line-height: 1.3;
    text-transform: capitalize;
    display: flex;
    margin-left: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 25px;
}

.all_project_progress__table .progress {
    background: #edeef0;
    justify-content: flex-start !important;
    width: calc( 100% - 46px);
    height: 13px;
    justify-content: flex-start;
}

.all_project_progress__table .all_project_progress__table_lable span {
    color: #004fa5;
    font-family: Roboto, sans-serif;
}

.all_project_progress__table th span.fa-caret-down {
    position: relative;
    top: 3px;
    margin: 0;
    color: #444;
}

.all_project_progress__table .CP-status .dropdown-menu {
    padding: 0;
    width: 210px;
}

.all_project_progress__table .CP-status li {
    padding: 0;
}

    .all_project_progress__table .CP-status li .c-dropdown__item {
        border: 0 !important;
    }

.all_project_progress__table .dropdown-button {
    border: 0;
    background: transparent;
}

    .all_project_progress__table .dropdown-button span {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: rgba(34, 40, 49, 0.33);
        display: inline-block;
    }

        .all_project_progress__table .dropdown-button span:before,
        .all_project_progress__table .dropdown-button span:after {
            position: absolute;
            content: '';
            left: 25px;
            top: 6px;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background-color: rgba(34, 40, 49, 0.33);
            z-index: 9;
        }

        .all_project_progress__table .dropdown-button span:after {
            right: 17px;
            left: auto;
        }

.description.task-detail-buttons .dropdown-menu {
    width: 90%;
}

.all_project_progress__table th span {
    display: inline-block;
}

.all_project_progress__table.table th {
    font-size: 12px;
    text-align: center;
    padding: 10px 2px !important;
}

.all_project_progress__table th:first-child {
    text-align: left;
}

.all_project_progress__table {
    width: 100%;
    max-width: initial;
}

.label-outer {
    line-height: 1.3;
    display: flex;
    text-align: left;
    flex-wrap: wrap;
    width: 85%;
}

.edit-jcustom-field-grabbed {
    -webkit-box-shadow: 0px 3px 8px 0px rgba(50, 50, 50, 0.35);
    -moz-box-shadow: 0px 3px 8px 0px rgba(50, 50, 50, 0.35);
    box-shadow: 0px 3px 8px 0px rgba(50, 50, 50, 0.35);
    padding: 10px;
}

.all_project_progress__table .btn.btn-info {
    font-size: 12px;
    padding: 6px;
    display: flex;
    justify-content: center;
    margin: 0 auto 10px auto;
    width: 100%;
    background-color: var(--main-business-color);
}

.all_project_progress__table_CB > img {
    max-width: 24px !important;
    border-radius: 50%;
    text-align: center;
}

.prog_col {
    display: flex;
    flex-wrap: wrap;
    max-width: 260px;
    min-width: 130px !important;
    display: flex;
    flex-wrap: wrap;
}

.progress-total-tasks {
    display: inline-block;
    margin-right: 10px;
}

@media ( max-width:1450px) {
    .all_project_progress__table_lable {
        min-width: 215px;
        max-width: 215px;
        width: 215px;
    }
}

/**********************************************************************Project progress***********************************************************/
@media ( max-width:991px ) {
    .right-sidebar .row {
        display: flex;
        flex-wrap: wrap;
    }

    .right-sidebar {
        width: 100%;
    }

        .right-sidebar .row .col-md-4, .right-sidebar .row .col-md-8 {
            width: 100%;
        }

        .right-sidebar .row .col-md-8 {
            position: fixed;
            width: 100%;
            z-index: 999999;
            right: -120%;
            top: 0;
            transition: all .3s ease-in-out;
        }

            .right-sidebar .row .col-md-8.chatvisbile {
                right: 0;
            }

    .right-stat-bar ul li {
        display: inline-block;
        width: 100%;
    }

    .nav-tabs.nav-justified > li > a {
        text-align: left;
        padding-left: 15px;
    }

    .content-area-NUI .tab-content {
        margin: 0;
    }
}

@media ( min-width:501px ) and ( max-width:767px ) {
    .job-request-clientPortal .nav-tabs {
        top: 150px !important;
    }
}

@media ( max-width: 767px ) {
    .CP-task-table-outer {
        width: 100%;
        overflow-x: hidden;
    }

    .CP-task {
        width: 100px;
        display: inline-block;
        text-align: left;
    }

    .CP-assigned {
        width: 100px;
    }

    .CP-duedate {
        width: 80px;
        display: inline-block;
    }

    .job-request-clientPortal .nav-tabs {
        top: 240px;
    }

    .content-area-NUI .tab-content {
        margin-top: 45px;
    }

    .btn-group .invite-btn_v2 {
        width: 50%;
        height: 45px;
        font-size: 12px !important;
        font-weight: 400 !important;
    }

    .CP-task-table-outer {
        padding: 0 20px;
        margin: 20px 0 0 0;
    }

    .clienttask-info .progress {
        width: 80%;
    }

    .header-NUI-portal .header-NUI-right .btn-group {
        align-items: center;
    }

    .right-sidebar .row {
        display: flex;
        flex-wrap: wrap;
    }

    .c-tasks-list .c-table__cell p {
        font-size: 12px;
    }

    .modal.fade .modal-dialog {
        width: 100% !important;
    }

    .modal-open .modal {
        z-index: 99999;
    }

    .c-modal__body .col-md-12 {
        padding: 0;
    }

    .gridster .e_widget_list li {
        left: 0 !important;
    }

    .c-modal__header .c-modal__title {
        padding-right: 0 !important;
        font-size: 18px;
    }

    .filterby-selectbox {
        width: 100%;
    }

        .filterby-selectbox .dropdown, .filterby-selectbox .btn-default {
            font-size: 10px;
        }

    .jobrequest-detail-col1, .jobrequest-detail-col3, .jobrequest-detail-col4 {
        width: 95px;
    }

    .jumppl-modal .c-field span {
        width: 100%;
    }

    .inbox-aside.task-detail-slidepopup {
        width: 100% !important;
    }

    .Inbox-pane {
        min-width: 0;
    }

    .NUI-client-portal-settings {
        width: 100%;
        margin: 190px 0 0 0;
    }

    .u-mb-medium div {
        overflow-x: scroll;
    }

    .c-table__cell {
        text-align: left;
    }

    .NUI-client-portal-settings {
        padding: 25px 15px;
    }

        .NUI-client-portal-settings .container-fluid {
            padding: 0;
        }

        .NUI-client-portal-settings .c-toolbar__nav-item.is-active {
            font-size: 13px !important;
        }

        .NUI-client-portal-settings .c-toolbar__nav-item {
            font-size: 13px;
            margin-right: 5px;
        }

        .NUI-client-portal-settings .c-toolbar {
            padding: 10px 10px 0 10px;
        }

    .newui-top-breadcrumbs > ul > li {
        margin-right: 25px;
    }

    .howtovideos-tabs {
        padding: 0;
    }

    .howtovideos-tabslist {
        margin: 10px 0;
    }
}

@media ( max-width:1440px ) {
    .filterby-selectbox {
        width: 40%;
    }
}

.task-detail-slidepopup {
    z-index: 99999999999 !important;
}

.description p {
    line-height: 1.8;
}

.expanded_iframe > .iframeContent iframe,
.expanded_iframe > iframe ,
.expanded_iframe > .iframeContent {
    display: block;
    position: fixed;
    background-color: white;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100% !important;
    height: 97% !important;
    border: none;
    margin: 0;
    padding: 10px;
    overflow: scroll;
    z-index: 999999;
    margin-top: 25px;
    padding-top: 26px;
}


.expanded_toolbar {
    padding-top:5px;
    padding-bottom:5px;
    display: block;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    margin: 0;
    /* padding: 0; */
    overflow: hidden;
    z-index: 9999999;
    background: white;
    box-shadow: inset 0 0 10px #dfdad1;
    border: solid 1px #faf0f0;
}

/* New UI Design Client Portal*/
.cp-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 225px;
    height: 100vh;
    background-color: #f3f3f3;
    padding-top: 22px;
    z-index: 99;
}

.cp-logo {
    display: flex;
    width: 125px;
    margin: 0 auto 25px auto;
}

.cp-navbar {

}

    .cp-navbar ul {
        margin: 0;
        padding: 0;
    }

        .cp-navbar ul li {
            list-style-type: none;
            padding: 10px 22px;
            line-height: 0;
            transition: all .3s ease-in-out;
        }

            .cp-navbar ul li a {
                display: flex;
                align-items: center;
            }

                .cp-navbar ul li a img {
                    width: 18px;
                    height: 18px;
                    margin-right: 10px;
                }

                .cp-navbar ul li a span {
                    display: inline-block;
                    color: #2D2D2D;
                    font-size: 12px;
                    line-height: 1;
                    font-weight: 500;
                    font-family: 'Inter', sans-serif;
                    width: calc( 100% - 25px );
                }

            .cp-navbar ul li:hover, .cp-navbar ul li.active {
                box-shadow: 0px 3px 4px rgba(153, 155, 168, 0.25);
                -webkit-box-shadow: 0px 3px 4px rgba(153, 155, 168, 0.25);
                -moz-box-shadow: 0px 3px 4px rgba(153, 155, 168, 0.25);
                border-radius: 8px;
                background-color: #fff !important;
            }

            .cp-navbar ul li a span:first-letter {
                text-transform: capitalize !important;
            }

            .cp-navbar ul li:hover span, .cp-navbar ul li.active a span {
                color: var(--main-business-color) !important;
            }

.cp-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: #fff;
    width: calc( 100% - 225px );
    padding: 10px 22px 6px 32px;
    margin-left: 225px;
}

.cp-header-left {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 335px;
}

.cp-header-title {
    display: flex;
    flex-wrap: wrap;
    width: 165px;
}

    .cp-header-title h1 {
        display: flex;
        color: black;
        font-size: 16px;
        line-height: 1;
        font-weight: 700;
        font-family: 'Roboto', sans-serif;
        margin: 5px 0 5px 0;
        letter-spacing: 1px;
    }

.cp-header-date {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

    .cp-header-date span {
        color: #969696;
        font-size: 12px;
        line-height: 1;
        font-weight: 500;
        font-family: 'Inter', sans-serif;
    }

.cp-header-right {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 355px;
}

.cpheader-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 245px;
    margin: 0;
    padding: 0;
}

    .cpheader-btns li {
        display: inline-block;
        width: 118px;
    }

        .cpheader-btns li button {
            display: inline-block;
            width: 100%;
            background-color: transparent;
            border: 1px solid var(--main-business-color);
            border-radius: 40px;
            color: var(--main-business-color);
            line-height: 40px;
            font-size: 12px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            text-transform: capitalize;
            box-shadow: 0px 3px 4px rgba(153, 155, 168, 0.25);
            -webkit-box-shadow: 0px 3px 4px rgba(153, 155, 168, 0.25);
            -moz-box-shadow: 0px 3px 4px rgba(153, 155, 168, 0.25);
        }

            .cpheader-btns li button.invite-users {
                background-color: var(--main-business-color);
                text-align: center;
                color: #fff;
                box-shadow: 0;
            }

.cp-header-comment {
    width: 40px;
    height: 40px;
}

    .cp-header-comment img {
        border-radius: 50%;
        cursor: pointer;
    }

    .cp-header-comment .dropdown-menu {
        background-color: #fff;
        left: auto;
        right: 0;
    }

.cp-content {
    margin: 4px 25px 0 225px;
    padding: 0 0 0 30px;
}

.cp-content-special ul {
    padding: 0;
    margin: 0;
    border-bottom: 2px solid #fff;
}

    .cp-content-special ul li {
        display: inline-block;
    }

        .cp-content-special ul li a {
            color: #7c7c7c !important;
            font-size: 16px;
            line-height: 1;
            letter-spacing: .2px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            text-transform: capitalize;
            padding: 0 12px 20px 19px;
            margin: 0 25px 0 0;
            transition: all .3s ease-in-out;
            background-color: transparent;
            border: 0;
            border-bottom: 2px solid transparent;
        }

        .cp-content-special ul li:nth-child(1) {
        }

        .cp-content-special ul li a:hover,
        .cp-content-special ul li.active a {
            color: var(--main-business-color) !important;
            border: 0;
            border-bottom: 2px solid var(--main-business-color) !important;
            background-color: transparent !important;
        }

.cpheader-userslist {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    width: 120px;
}

    .cpheader-userslist li {
        display: flex;
        width: 30px;
        height: 30px;
        position: relative;
        z-index: 9;
    }

        .cpheader-userslist li img {
            width: 100%;
            border: 1px solid #fff;
            border-radius: 50%;
        }

        .cpheader-userslist li:nth-child(2) {
        }

        .cpheader-userslist li:nth-child(3) {
        }

        .cpheader-userslist li:nth-child(4) {
            left: -45px;
            z-index: 6;
        }

.toggle-sidebar {
    display: none;
}
/*New UI Design Client Portal*/
@media screen and ( max-width:991px ) {
    .cp-header-left {
        width: 100%;
        margin: 0 0 20px 0;
    }

    .cpheader-userslist {
        width: 125px;
    }

    .toggle-sidebar-btn {
        display: block;
        position: fixed;
        left: 135px;
        top: 20px;
        width: 26px;
        height: 2px;
        background-color: #733fc1;
        cursor: pointer;
    }

        .toggle-sidebar-btn:before,
        .toggle-sidebar-btn:after {
            position: absolute;
            left: 0;
            top: 16px;
            width: 100%;
            height: 2px;
            background-color: #733fc1;
            content: '';
        }

        .toggle-sidebar-btn:after {
            content: '';
            top: 8px;
        }

    .cp-sidebar {
        width: 70px;
        transition: all .3s ease-in-out;
        padding-top: 0;
    }

    .cp-logo {
        padding: 10px;
        background-color: #733fc1;
        transition: all .3s ease-in-out;
    }

    .cp-navbar ul li a span {
        opacity: 0;
        visibility: hidden;
        width: 0;
        line-height: 0;
        transition: all .3s ease-in-out;
    }

    .cp-header {
        width: calc( 100% - 42px );
        margin-left: 22px;
        transition: all .3s ease-in-out;
        padding-top: 16px;
    }

    .cp-content {
        margin: 40px 25px 0 -9px;
        transition: all .3s ease-in-out;
    }

    .sidebar-toggle-active .toggle-sidebar-btn {
        left: 260px;
    }

    .sidebar-toggle-active .cp-sidebar {
        width: 225px;
    }

    .sidebar-toggle-active .cp-logo {
        padding: 0;
        background-color: transparent;
    }

    .sidebar-toggle-active .cp-navbar ul li a span {
        opacity: 1;
        visibility: visible;
        width: calc( 100% - 32px );
        line-height: 1;
    }

    .sidebar-toggle-active .cp-header {
        width: 100%;
        margin-left: 0;
    }

    .sidebar-toggle-active .cp-content {
    }

    .sidebar-toggle-active .toggle-sidebar-btn {
        background-color: transparent;
        transition: all .3s ease-in-out;
    }

        .sidebar-toggle-active .toggle-sidebar-btn:before {
            transform: rotate(45deg);
            top: 8px;
        }

        .sidebar-toggle-active .toggle-sidebar-btn:after {
            transform: rotate(-45deg);
        }

    .cp-content ul {
        border: 1px solid #dddddd;
        border-radius: 5px;
        overflow: hidden;
        position: relative;
    }

        .cp-content ul li {
            display: block;
            float: none;
        }

            .cp-content ul li a {
                position: absolute;
                top: 0;
                left: 0;
                margin: 0;
                width: 100%;
                height: 100%;
                display: inline-block;
                border-color: transparent;
                text-align: center;
            }

    .cp-content .nav-tabs.nav-tabs > li.active > a, .cp-content .nav-tabs > li.active > a {
        display: block;
        border-color: transparent;
        position: relative;
        z-index: 1;
        background: #fff;
        text-align: center;
    }

    .cp-content .nav-tabs.nav-tabs.open a, .cp-content .nav-tabs.open a {
        position: relative;
        display: block;
        color: #733fc1;
    }

    .cp-content .nav-tabs.nav-tabs.open > li.active > a, .cp-content .nav-tabs.open > li.active > a {
        background-color: #eeeeee;
    }
}

@media screen and ( max-width:480px ) {
    .cp-header {
        width: ( 100% - 120px );
    }

    .cp-header-right {
        justify-content: flex-end;
    }

    .cpheader-btns {
        margin-bottom: 10px;
    }

    .cp-header-right, .cpheader-btns {
        width: 100%;
    }

        .cpheader-btns li {
            width: 48%;
        }

    .cp-header-comment {
        margin-left: 10px;
    }
}

.c_chat_btn_nui {
    display: none !important;
}

.avatar-1 i {
    position: absolute;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    bottom: -3px;
    left: 25px;
    border: 2px solid #f8f8f8;
}

    .avatar-1 i.online {
        background: #2ecc71;
    }

    .avatar-1 i.offline {
        background: #e74c3c;
    }

    .avatar-1 i.reconnecting {
        background: #f39c12;
    }

.header_setting_btn > svg {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    fill: var(--main-business-color);
    margin-right: 5px;
}

/**********  Project List New UI **********/

.projectlist-row-updates {
    background-color: #fafafa;
    padding:38px 30px 50px 25px;
}
.projectlist-title-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    margin:0 0 30px 0;
}
.projectlist-title-row h1 {
    color:#505050;
    font-size:24px;
    line-height: 1;
    letter-spacing: .3px;
    font-weight: 700px;
    font-family: 'Inter', sans-serif;
    margin:0 0 20px 0;
}
.projectlist-btn-list {
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
    padding:8px;
    background-color:#F3F3F3;
    border-radius: 40px;
    max-width:330px;
}
.projectlist-btn-list li {
    display: flex;
    cursor:pointer;
}
.projectlist-btn-list li button {
    display: flex; 
    align-items: center;
    width:100%;
    color:#737373;
    font-size:16px;
    line-height: 1;
    font-family: 'Inter', sans-serif;
    font-weight:500;
    background-color:#fff;
    border-radius:40px;
    height:35px;
    transition:all .3s ease-in-out;
    padding:0 16px;
    border:0;
}
.projectlist-btn-list li:hover button {
    background-color:#974EEE;
    color:#fff;
}
.projectlist-btn-list li.active button {
    background-color:#974EEE;
    color:#fff;
}
.projectlist-title-row .create-projectbtn {
    display: flex;
    flex-wrap:wrap;
    justify-content: center;
    align-content: center;
    border-radius: 40px;
    text-transform: capitalize;
    width:150px;
    height:40px;
    color:#974EEE;
    font-size:12px;
    line-height: 2;
    font-weight:700;
    font-family: 'Inter', sans-serif;
    background-color:#fff;
    border:1px solid #974EEE;
    transition:all .3s ease-in-out;
}
.projectlist-title-row .create-projectbtn svg {
    margin-right:5px;
    fill:#974eee;
}
.projectlist-title-row .create-projectbtn:hover {
    background-color:#974eee;
    color:#fff;
}
.projectlist-title-row .create-projectbtn:hover svg {
    fill:#fff;
}
.projectlist-formfield {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-content: center;
}
.projectlist-title-row form {
    position:relative;
    margin-right:15px;
}
.projectlist-title-row input[type="text"] {
    width:320px;
    height:40px;
    border-radius:40px;
    color:#969696;
    font-size:16px;
    line-height: 1;
    font-weight:400;
    font-family: 'Inter', sans-serif;
    padding-right:35px;
}
.projectlist-title-row form svg {
    position:absolute;
    right:12px;
    top:12px;
    cursor:pointer;
}
.projectlist-table-row {
    background-color:#fff;
    border:1px solid #f3f3f3;
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    /* padding-bottom:400px; */
}
.projectlist-table-row th {
    color:#737373;
    font-size:16px;
    line-height: 1;
    font-weight:500;
    font-family: 'Inter', sans-serif;
    padding:28px 10px !important;
    height:75px;
    border:1px solid #F3F3F3 !important;
    letter-spacing: .3px;
    text-align: center;
}
.th-title-row {
    border:0;
}
.name-table-data {
    width:295px !important;
    border-left:0;
    padding-left:20px !important;
    text-align: left !important;
}
.status-table-data {
    width:175px !important;
}
.progress-table-data {
    width:200px !important;
}
.share-table-data {
    width:88px !important;
}
.update-table-data {
    width:100px !important;
}
.created-table-data {
    width:130px !important;
}
.date-table-data {
    width:115px !important;
}
.budget-table-data {
    width:100px !important;
}
.action-table-data {
    width:95px !important;
    border-right:0;
}
.projectlist-table-row td {
    border:0;
    border-right: 1px solid #f3f3f3;    
    height:58px;
}
.projectlist-table-row .due-date-picker th {
    /* Styles for table cells other than the calendar */
    border: 0 !important;
    border-radius: 4px;
    height: 20px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    font-family: 'sf_pro_textregular';
    padding: 5px !important;
}


.td.name-table-data {
    font-weight:700;
    color:#4D2A81;
}
.td.name-table-data img {
    margin-right:5px;
}
.subproject-td-title {
    color:#505050;
    font-size:14px;
    line-height: 1;
    font-weight:400;
    font-family: 'Inter', sans-serif;
    padding-left:35px;
}
.pending.status-table-data {
    padding:10px 10px 3px 10px;
}
.pending.status-table-data .btn-group {
    width:100%;
}
.pending.status-table-data button {
    background-color: #ffdd2d;
    border: 1px solid #969696;
    color: #2d2d2d;
    font-size: 16px;
    line-height: 40px;
    font-weight: 700;
    font-family: Inter,sans-serif;
    letter-spacing: .3px;
    text-transform: capitalize;
    width: 80%;
    border-radius: 40px;
    box-shadow: 0 3px 4px #999ba840;
    -webkit-box-shadow: 0px 3px 4px rgba(153,155,168,.25);
    -moz-box-shadow: 0px 3px 4px rgba(153,155,168,.25);
    -ms-box-shadow: 0px 3px 4px rgba(153,155,168,.25);
    transition: all .3s ease-in-out;
}
.pending.status-table-data .dropdown-toggle::after,
.td.action-table-data .dropdown-toggle::after {
    display: none;
}
.pending.status-table-data .btn-group.open .dropdown-menu {
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
    width:365px;
    height:385px;
    border-radius: 12px;
    box-shadow: 0px 3px 4px rgba(153, 155, 168, 0.25);
    -webkit-box-shadow: 0px 3px 4px rgba(153, 155, 168, 0.25);
    -moz-box-shadow: 0px 3px 4px rgba(153, 155, 168, 0.25);
    -ms-box-shadow: 0px 3px 4px rgba(153, 155, 168, 0.25);
    border:2px solid #b9b9b9;
    padding:18px 12px 22px 12px;
}
.pending.status-table-data .btn-group.open .dropdown-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    left:-70px !important;
    top:60px !important;
}
.pending.status-table-data .btn-group.open .dropdown-menu:before {
    content:'';
    position:absolute;
    left:0;
    right:0;
    top:-10px;
    margin:0 auto;
    /* background:url(../images/dropdown-arrow.png) left top no-repeat; */
    background-size:cover;
    width:32px;
    height:10px;
}
.pending.status-table-data .dropdown-menu button {
    margin:0 0 8px 0;
    width:167px;
}
.pending.status-table-data .delayed {
    background-color:#E07B7D;
}
.pending.status-table-data .starting-soon {
    background-color:#FFB300;
}
.pending.status-table-data .finished {
    background-color: #7CC3FC
}
.pending.status-table-data .inprocess {
    background-color: #AC92EC;
}
.pending.status-table-data .completed {
    background-color: #61C9AF;
}
.pending.status-table-data .waiting-client {
    background-color: #00C875;
}
.pending.status-table-data .archive {
    background-color: #BDC4CB;
}
.pending.status-table-data .waiting-internal {
    background-color: #F2CF77;
}
.pending.status-table-data .add {
    border:1px solid #974EEE;
    background-color:#fff;
}
.pending.status-table-data .stuck {
    background-color: #E53935;
    color:#fff;
}
.pending.status-table-data button:hover {
    color:#fff;
    background-color:#974EEE;
}
.progressfield-td  {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width:100%;
    height:100%;
}
.progressfield-ele {
    display:flex;
    width:136px;
    height:9px;
    background-color:#e4e4e4;
    border-radius:40px;
    position:relative;
}
.progressfield-ele .progressfield-status {
    width:106px;
    height:100%;
    background-color:#32C225;
    position:absolute;
    left:0;
    top:0;
    border-radius: 40px;
}
.progressfield-data {
    color:#969696;
    font-size:16px;
    line-height: 1;
    font-weight:700;
    font-family: 'Inter', sans-serif;
    letter-spacing: .3px;
}
.projectlist-table-row .share-list {
    position:relative;
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
}
.projectlist-table-row .share-list li {
    display: flex;
    position:absolute;
    left:0;
    top:5px;
    z-index: 9;
}
.projectlist-table-row .share-list li:nth-child(2) {
    left:12px;
    z-index: 8;
}
.projectlist-table-row .share-list li:nth-child(3) {
    left:24px;
    z-index: 7;
}
.projectlist-table-row .share-list li:nth-child(4) {
    left:36px;
    z-index: 6;
}   
.projectlist-table-row .share-list li:nth-child(5) {
    left:48px;
    z-index: 5;
}
.projectlist-table-row .share-list li img {
    border-radius:50%;
    border:2px solid #FBFBFF;
    width:36px;
    height:36px;
}
.td.update-table-data span, .td.date-table-data span, .td.budget-table-data span,
.td.created-table-data span {
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%;
    height:100%;
    color:#969696;
    font-size:12px;
    line-height: 1;
    font-weight:700;
    font-family: 'Inter', sans-serif;
    letter-spacing: .3px;
}
.td.created-table-data img {
    width:36px;
    height:36px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin:5px auto 0 auto;
    border-radius: 50%;
}
.td.action-table-data {
    margin:12px auto 0 auto;
}
.td.action-table-data button {
    display: flex;
    justify-content: center;
    align-items: center;
    width:20px;
    height:20px;
    border-radius: 50%;
    background-color:#969696;
    border:0;
    margin:13px auto 0 auto;
}
.td.action-table-data .action-btn {
    color:#fff;
    font-size:20px;
    line-height: 1;
    position: relative;
    top:-5px;
}
.td.action-table-data .dropdown-menu {
    width:365px;
    height:385px;
    border-radius: 12px;
    box-shadow: 0px 3px 4px rgba(153, 155, 168, 0.25);
    -webkit-box-shadow: 0px 3px 4px rgba(153, 155, 168, 0.25);
    -moz-box-shadow: 0px 3px 4px rgba(153, 155, 168, 0.25);
    -ms-box-shadow: 0px 3px 4px rgba(153, 155, 168, 0.25);
    border:2px solid #b9b9b9;
    padding:18px 12px 22px 12px;
}
.td.action-table-data .btn-group.open .dropdown-menu {
    right:-35px !important;
    left:auto;
    top:40px;
    height:145px;
    display: flex;
    flex-wrap: wrap;
}
.td.action-table-data .dropdown-menu li {
    display: inline-block;
    width:167px;
    height:32px;
    margin:0 0 8px 0;
}
.td.action-table-data .dropdown-menu button {
    margin: 0 0 8px 0;
    width: 100%;
    height: 32px;
    background-color: #974EEE;
    color: #fff;
    font-size:12px;
    line-height: 32px;
    border-radius: 40px;
    font-weight:500;
    font-family: 'Inter', sans-serif;
    letter-spacing: .3px;
    transition: all .3s ease-in-out
}
.td.action-table-data .dropdown-menu button:hover {
    background-color:#FFDD2D;
    color:#2D2D2D;
}
.td.action-table-data .btn-group.open .dropdown-menu:before {
    content:'';
    position:absolute;
    right:30px;
    top:-10px;
    margin:0 auto;
    /* background:url(../images/dropdown-arrow.png) left top no-repeat; */
    background-size:cover;
    width:32px;
    height:10px;
}
.dark-thead {
    background-color:#f3f3f3;
}
.dark-thead th {
    border-right:1px solid #B9B9B9;
}
.dark-thead th:last-child {
    border-right:0;
}
.td.action-table-data {
    display: flex;
    flex-wrap:wrap;
    justify-content: center;
    align-items: center;
}
.td.action-table-data .action-btn {
    display: flex;
    justify-content: center;
    align-items: center;
}
.td.action-table-data .dropdown-menu li button {
    display: flex;
    justify-content: center;
    align-content: center;
}
.finance-td {
    display: flex;
    flex-wrap:wrap;
    width:100%;
}
.add_proj_status_btn{
    background-color: var(--main-business-color) !important;
    color: white !important;
    width: 333px !important;
    margin-top: 15px !important;
}
.finance-td >i{
    margin-right: 10px;
    font-size: 18px;
}
.update-table-data_nui{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap:4px;
}
.update-table-data_nui p ,.update-table-data_nui time{
   
    color:#969696;
    font-size:12px;
    line-height: 1;
    font-weight:700;
    font-family: 'Inter', sans-serif;
    letter-spacing: .3px;
}
@media screen and ( max-width:1370px ) {
    .projectlist-table-row {
        width:1400px;
        overflow-y: visible !important;
    }

}

/**********  Project List New UI **********/










/* Feed Styling New Starts Here */

.jumppl-feed-outer {
    margin: 30px 15px 0;
    
}

.main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

    .main .feed-row-outer {
        width: 100%;
    }

.feed-row-outer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.main .feed-row-outer .jumppl-feed-slider {
    margin-left: auto;
}

.jumppl-feed-row {
    -webkit-box-shadow: 0px 3px 8px 0px rgba(50, 50, 50, 0.15);
    -moz-box-shadow: 0px 3px 8px 0px rgba(50, 50, 50, 0.15);
    box-shadow: 0px 3px 8px 0px rgba(50, 50, 50, 0.15);
    border-radius: 15px;
    background-color: #fff;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    width: 100%;
}

.feed-title-row a {
    padding: 12px 16px 0;
    margin-bottom: 8px;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.feed-delete-download ul li {
    margin-right: 10px;
}

.feed-title-row .title-thumb {
    display: flex;
    flex-shrink: 0;
    box-sizing: border-box;
    border: 2px solid transparent;
    border-radius: 49.9%;
}

    .feed-title-row .title-thumb img {
        width: 48px;
        height: 48px;
        border-radius: 100%;
    }

.feed-title-row .title-detail {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    flex-basis: 0;
    margin-left: 8px;
}

.feed-title-row .heading {
    color: rgba(0,0,0,.9);
    font-weight: 600;
    font-size: 16px;
    line-height: .9;
    width: 100%;
}

.feed-title-row .description, .feed-title-row .date {
    color: rgba(0,0,0,.6);
    font-size: 12px;
    line-height: .9;
    font-weight: 400;
    width: 100%;
    text-transform: capitalize;
    margin: 5px 0 0 0;
}

.feed-title-outer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}

    .feed-title-outer .right {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        /* padding: 5px 10px 0 0; */
    }

        .feed-title-outer .right .dropdown-menu {
            max-width: 264px;
            max-height: 548px;
            width: 90vw;
            left: auto;
            right: -10px;
            top: 30px;
            background-color: rgba(236,236,236,1);
            border: 0;
        }

        .feed-title-outer .right .dropdown button {
            letter-spacing: 1px;
            font-size: 20px;
            font-weight: 600;
            /* line-height: .8; */
            background-color: transparent;
            border: 0;
            box-shadow: none;
        }

            .feed-title-outer .right .dropdown button:focus {
                outline: none;
                border: 0;
            }

        .feed-title-outer .right ul:before {
            position: absolute;
            border: 0 solid transparent;
            content: "";
            height: 0;
            width: 0;
            left: calc( 100% - 24px );
            border-right-width: 15px;
            border-bottom: 15px solid rgba(236,236,236,1);
            border-left-width: 15px;
            top: -14px;
            margin-left: -10px;
        }

        .feed-title-outer .right ul li {
            display: inline-block;
            width: 100%;
            padding: 5px 15px 5px 10px;
        }

            .feed-title-outer .right ul li svg {
                width: 18px;
                height: 18px;
                margin-right: 5px;
            }

            .feed-title-outer .right ul li i {
                font-size: 16px;
            }

            .feed-title-outer .right ul li span {
                color: rgba(0,0,0,.75);
                font-size: 14px;
                text-transform: capitalize;
                margin-left: 5px;
                letter-spacing: .5px;
                font-weight: 600;
            }

.feed-title-row .feed-detail {
    padding: 0 15px 5px;
}

    .feed-title-row .feed-detail h2 {
        color: rgba( 0,0,0.6 );
        font-size: 20px;
        line-height: 2;
        font-weight: 700;
    }

    .feed-title-row .feed-detail p {
        color: rgba( 0,0,0.6 );
        font-size: 14px;
        line-height: 2;
        font-weight: 400;
        margin: 0 0 15px 0;
    }

.jumppl-feed-row .feed-thumbnail {
    margin: 10px 0 20px 0;
}

    .jumppl-feed-row .feed-thumbnail ul {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-column-gap: 5px;
        grid-row-gap: 5px;
        padding: 0;
        margin: 0 15px;
    }

        .jumppl-feed-row .feed-thumbnail ul li {
            display: inline-grid;
            justify-content: center;
            align-items: center;
            padding: 10px;
            border-radius: 10px
        }

        .jumppl-feed-row .feed-thumbnail ul li.more-img-section{
            background-color: whitesmoke;
        }
        .jumppl-feed-row .feed-thumbnail ul li.more-img-section a{
            display: flex;
            flex-direction: row-reverse;
            align-items: center;   
        }
        .jumppl-feed-row .feed-thumbnail ul li:hover {
            background-color: #eeeeee;
        }

    .jumppl-feed-row .feed-thumbnail img {
        width: 100px;
        object-fit: cover;
    }
    
    .jumppl-feed-row .feed-thumbnail .more-img {
        width: 40px;
        object-fit: cover;
        margin-right: 5px;
    }


.jumppl-feed-row .feed-comments-status ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 6px 8px;
}

    .jumppl-feed-row .feed-comments-status ul li {
        position: relative;
        display: flex;
        align-items: center;
        margin-right: 10px;
    }

        .jumppl-feed-row .feed-comments-status ul li:nth-child {
            padding: 0 10px;
        }

        .jumppl-feed-row .feed-comments-status ul li button {
            background-color: transparent;
            border: 0;
            outline: none;
            display: flex;
            align-items: center;
            transition: all ease .3s;
        }

            .jumppl-feed-row .feed-comments-status ul li button:hover {
                background-color: hsla(0,0%,81.2%,.25);
            }

        .jumppl-feed-row .feed-comments-status ul li img {
            width: 24px;
            height: 24px;
        }

.feed-title-outer .feed-comments-status {
    margin: 5px 10px 0 0;
}

.jumppl-feed-row .feed-comments-status ul li span {
    font-size: 14px;
    color: rgba( 0,0,0, .5 );
    line-height: .9;
    text-transform: capitalize;
    margin-left: 5px;
    display: inline-block;
    font-weight: 400;
}

.jumppl-feed-row .feed-comments-status ul li .feed-icons {
    width: 18px;
    height: 18px;
    color: #000;
}

.jumppl-feed-row .feed-comment-box {
    padding: 4px 16px 8px;
    display: flex;
    justify-content: unset;
    align-items: center;
}

.jumppl-feed-row .comment-thumb {
    display: flex;
    flex-shrink: 0;
    margin-right: 5px;
}

    .jumppl-feed-row .comment-thumb img {
        width: 30px;
        height: 30px;
        border-radius: 100%;
    }

.jumppl-feed-row .comment-desc {
    display: flex;
    flex-wrap: wrap;
    border-radius: 8px;
    border: 1px solid #cdcfd2 !important;
    max-width: 100%;
    flex: 1 1 auto;
    max-width: calc(100% - 55px);
    /*padding: 8px 15px;*/
}

    .jumppl-feed-row .comment-desc:focus {
        outline: none;
    }

    .jumppl-feed-row .comment-desc p {
        color: rgba(0,0,0,.75);
        font-size: 14px;
        line-height: 1.4;
        font-weight: 400;
        margin: 0;
    }

.feed-comment-box.feed-comment-posted .comment-desc {
    background-color: white;
    /* border: 1px solid #eff3f6; */
    border-radius: 6px;
    padding: 5px 8px 8px 8px;
    box-shadow: rgba(0, 0, 0, 0.26) 0px 1px 4px;
}

    .feed-comment-box.feed-comment-posted .comment-desc .title {
        color: rgba( 0, 0, 0, .75 );
        font-size: 15px;
        font-weight: 600;
        line-height: .9;
        margin: 5px 0;
        display: block;
        width: 100%;
        text-transform: capitalize;
    }

    .feed-comment-box.feed-comment-posted .comment-desc .designation {
        color: rgba( 0, 0, 0, .5 );
        font-size: 12px;
        line-height: .9;
        margin: 0 0 10px 0;
    }

.jumppl-feed-slider {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 2px 3px rgba(0,0,0,.3);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

    .jumppl-feed-slider.topFixed {
        position: fixed;
        right: 15px;
        transform: translatey(15px);
        transition: all 0.5s ease;
    }

    .jumppl-feed-slider img {
        width: 100%;
    }

.jumppl-feed-row-outer {
    display: flex;
    flex-wrap: wrap;
    /* align-items-flex-start; */
    margin-right: 15px;
}

@media ( min-width:1280px ) {
    .jumppl-feed-row-outer {
        width: 100%;
    }

    .jumppl-feed-slider {
        width: 460px;
    }
}


@media ( min-width:1450px ) {
    .jumppl-feed-row-outer {
        width: calc( 100% - 45px );
    }

    .jumppl-feed-slider {
        width: 530px;
    }
}

.jumppl-feed-slider .item {
    height: auto !important;
    margin: 0 !important;
}

    .jumppl-feed-slider .item img {
        border-radius: unset;
    }


.comment-desc .emojionearea-editor {
    min-height: 30px !important;
    width: 100%;
    padding: 9px 36px 5px 12px  !important;
    line-height: 1;
}

.feed-title > p {
    font-size: 18px !important;
    font-weight: bold !important;
}

.cp-top-outer, .feed-cp-title {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px;
    align-items: center
}

.comment-button{
    margin-left: 5px;
    padding: 6px;
    background-color: var(--main-business-color);
    color: white;
    border: none;
    border-radius: 6px;
    transition: all;
    transition-duration: 300ms;
}

.comment-button:hover{
    background-color: var(--light-main-business-color);
}
.create-post-button{
    margin-bottom: 10px;
    border: 2px solid var(--main-business-color);
    padding: 5px 10px;
    background: transparent;
    color: var(--main-business-color);
    font-weight: 500;
    border-radius: 5px;
    transition: all;
    transition-duration: 300ms;
}

.create-post-button:hover{
    background-color: var(--light-main-business-color);
    color:white;
    border: 2px solid var(--light-main-business-color);
}
/* Feed Styling New Ends Here  */

.client-dropdown {
    /* top: 8%; */
}

.open>.dropdown-menu-scale {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    pointer-events: auto;
    display: block !important;
}

.dropdown.suggest.open .dropdown-menu,
.task-detail-tags .open>.dropdown-menu {
    height: 40vh;
    overflow-x: hidden;
    overflow-y: scroll;
}

.nuitask-detail-togglerow-closed .nuitask-detailicon {
    padding-bottom: 5px;
    position: relative;
}

.nuitask-detail-togglerow-closed .nuitask-detailicon:before {
    content: '';
    position: absolute;
    left: -10px;
    top: 10px;
    width: 20px;
    height: 1px;
    background-color: #ccc;
}

.working-status {
    background-color: rgb(253, 171, 61);
    color: #fff;
    font-size: 12px;
    text-align: center;
    display: inline-block;
    width: 100%;
    position: relative;
    transition: all .3s ease-in-out;
}

.fold-wrap .dropdown-menu li.working-status {
    background-color: rgb(253, 171, 61);
}

.optionfield.working-status {
    background-color: rgb(253, 171, 61);
    color: #fff;
    font-size: 12px;
    text-align: center;
    display: inline-block;
    width: 300px;
    position: relative;
    transition: all .3s ease-in-out;
}

.fold-wrap.optionfield .dropdown-menu li.working-status {
    background-color: rgb(253, 171, 61);
    margin-bottom: 5px;
}

.working-status {
    background-color: rgb(253, 171, 61);
    color: #fff;
    font-size: 12px;
    text-align: center;
    display: inline-block;
    width: 100%;
    position: relative;
    transition: all .3s ease-in-out;
}

.fold-wrap .dropdown-menu li.working-status {
    background-color: rgb(253, 171, 61);
}

.multiselect_newlistview .selection {
    height: 40px !important;
}

.fold-wrap {
    cursor: pointer;
}

.fold-wrap span {
    width: 100%;
    display: inline-block;
}

.fold-wrap:after {
    position: absolute;
    content: '';
    right: 0;
    top: 0;
}

.fold-wrap:hover:after {
    transition-duration: .5s;
    border-bottom: 12px solid #de7f02;
    border-right: 12px solid #ddd;
}

.fold-wrap .dropdown-menu {
    padding: 12px;
    top: 94%;
}

.fold-wrap .dropdown-menu:before {
    content: '';
    width: 0;
    height: 0;
    border: 0 solid transparent;
    border-right-width: 10px;
    border-left-width: 10px;
    border-bottom: 10px solid #fff;
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.fold-wrap .dropdown-menu li {
    display: inline-block;
    width: 100%;
}

.fold-wrap .dropdown-menu li span {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 13px;
}

.fold-wrap .dropdown-menu li.working-status {
    background-color: rgb(253, 171, 61);
}

.fold-wrap .dropdown-menu li.stuck-status {
    background-color: rgb(162, 93, 220);
}

.fold-wrap .dropdown-menu li.done-status {
    background-color: rgb(0, 200, 117);
}

.fold-wrap .dropdown-menu li.archive-status {
    background-color: rgb(196, 196, 196);
    margin-bottom: 50px;
}

.fold-wrap .dropdown-menu .fold-wrap-edit {
    border-top: 1px solid #aaa;
    padding-top: 8px;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.fold-wrap .dropdown-menu .fold-wrap-edit a {
    color: #0085ff;
    margin: 0;
    padding: 0;
    font-size: 13px;
}

.fold-wrap.optionfield {
    cursor: pointer;
}

.fold-wrap.optionfield span {
    padding: 8px 0;
}

.fold-wrap.optionfield .dropdown-menu {
    width: 100%;
    padding: 12px;
    top: 94%;
    z-index: 999999;
}

.fold-wrap.optionfield:after {
    position: absolute;
    content: '';
    right: 0;
    top: 0;
    display: none;
}

.fold-wrap.optionfield .dropdown-menu:before {
    content: '';
    width: 0;
    height: 0;
    border: 0 solid transparent;
    border-right-width: 10px;
    border-left-width: 10px;
    border-bottom: 10px solid #fff;
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: none;
}

.fold-wrap.optionfield .dropdown-menu li {
    display: inline-block;
    width: 100%;
}

.fold-wrap.optionfield .dropdown-menu li.working-status {
    background-color: rgb(253, 171, 61);
    margin-bottom: 5px;
}

.fold-wrap.optionfield .dropdown-menu li.stuck-status {
    background-color: rgb(226, 68, 92);
}

.fold-wrap.optionfield .dropdown-menu li.done-status {
    background-color: rgb(0, 200, 117);
}

.fold-wrap {
    cursor: pointer;
}

.fold-wrap span {
    width: 100%;
    display: inline-block;
}

.fold-wrap:after {
    position: absolute;
    content: '';
    right: 0;
    top: 0;
}

.fold-wrap:hover:after {
    transition-duration: .5s;
    border-bottom: 12px solid #de7f02;
    border-right: 12px solid #ddd;
}

.fold-wrap .dropdown-menu {
    padding: 12px;
    top: 94%;
}

.fold-wrap .dropdown-menu:before {
    content: '';
    width: 0;
    height: 0;
    border: 0 solid transparent;
    border-right-width: 10px;
    border-left-width: 10px;
    border-bottom: 10px solid #fff;
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.fold-wrap .dropdown-menu li {
    display: inline-block;
    width: 100%;
}

.fold-wrap .dropdown-menu li span {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 13px;
}

.fold-wrap .dropdown-menu li.working-status {
    background-color: rgb(253, 171, 61);
}

.fold-wrap .dropdown-menu li.stuck-status {
    background-color: rgb(226, 68, 92);
}

.fold-wrap .dropdown-menu li.done-status {
    background-color: rgb(0, 200, 117);
    margin-bottom: 50px;
}

.fold-wrap .dropdown-menu .fold-wrap-edit {
    border-top: 1px solid #aaa;
    padding-top: 8px;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.fold-wrap .dropdown-menu .fold-wrap-edit a {
    color: #0085ff;
    margin: 0;
    padding: 0;
    font-size: 13px;
}

.new_list_adjusments {
    width: 160px !important;
}

.new_list_adjusments>span {
    padding: 0px !important;
}