@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");

/* card new design start*/
:root {
    /* INV Theme start */
    /* --inv-primary: 240, 116, 12; */
    /* --inv-primary: 240, 113, 9;
    --inv-secondary: 246, 171, 43; */
    /* INV Theme end */

    /* MM Theme start */
    /* --inv-primary: 244, 205, 31;
    --inv-secondary: 223, 182, 0; */
    /* MM Theme end */

    /* APEX Theme start */
    /* --inv-primary: 19, 215, 238;
    --inv-secondary: 132, 238, 105; */
    /* APEX Theme end */

    /* CD Theme start */
    /* --inv-primary: 0, 216, 130;
    --inv-secondary: 88, 255, 189; */
    /* CD Theme end */
    --inv-primary: 41, 161, 219;
    --inv-secondary: 99, 45, 145;
    /* opacity start */
    --opac-10: 0.1;
    --opac-25: 0.25;
    --opac-30: 0.3;
    --opac-40: 0.4;
    --opac-50: 0.5;
    --opac-60: 0.6;
    --opac-75: 0.75;
    --opac-80: 0.8;
    --opac-90: 0.9;
    --opac-100: 1;
    /* opacity start */

    --white: #fff;
    --black: #181818;
    --gradient-fr: linear-gradient(90deg, #2A9CD8 -17%, #433092 44%, #622E92 100%);
    --gradient-vertical-fr: linear-gradient(180deg, #632D91 0%, #29A1DB 100%);
    --gradient-lt-vertical-fr: linear-gradient(180deg, rgba(99, 45, 145, 0.1) 0%, rgba(52, 49, 146, 0.1) 45%, rgba(41, 161, 219, 0.1) 100%);
    --feedreed-color: #622E92;
    --gradient: linear-gradient(172.01deg,
            rgba(var(--inv-secondary), var(--opac-75)) -2.57%,
            rgba(var(--inv-primary), var(--opac-75)) 102.94%);
    --gradient-header: linear-gradient(172.01deg,
            rgba(var(--inv-secondary), var(--opac-75)) -2.57%,
            rgba(var(--inv-primary), var(--opac-50)) 102.94%);
    --gradient-red: linear-gradient(180deg, #fb0024 0%, #950015 100%);
    --gradient-v-box: linear-gradient(360deg, #632D91 0%, #343192 50%, #29A1DB 99.99%);
    --theme-bg-header: rgba(var(--inv-header), var(--opac-100));


    /* background color */
    --theme-bg-primary: rgba(var(--inv-primary), var(--opac-100));
    --theme-bg-secondary: rgba(var(--inv-secondary), var(--opac-100));
    --theme-bg-white: var(--white);
    --breadcrumb-bg: #343434;
    --theme-bg-lt-red: #feeceb;
    --theme-bg-black: var(--black);
    --theme-bg-lt-primary: var(--gradient-lt-vertical-fr);
    --theme-bg-green: #3bb91b;
    --theme-bg-lt-green: #E8FFF4;
    --theme-bg-gray: #E8E8E8;

    /* btn color */
    --btn-bg-primary: rgba(var(--inv-primary), var(--opac-100));
    --btn-bg-secondary: rgba(var(--inv-primary), var(--opac-25));
    --btn-bg-black: var(--black);
    --btn-bg-gray: #f2f2f2;
    --btn-bg-white: var(--white);
    --btn-bg-red: #c80808;
    --btn-bg-gradient-primary: var(--gradient-fr);
    --btn-bg-info: #AFAFAF;
    --btn-bg-gradient-red: var(--btn-bg-white);
    --header-background: #D0D0D033;

    /* text color */
    --text-Dgry: #484848;
    --text-black: var(--black);
    --text-white: var(--white);
    --text-green: #3bb91b;
    --text-gray: #6c6c6c;
    --text-gray-fr: #34343480;
    --text-red: #b12f30;
    --text-red-delete: #c80808;
    --text-primary: rgba(var(--inv-primary), var(--opac-100));

    /* border color */
    --border-red: #c80808;
    --border-button-gray-fr: #34343480;
    --border-gray: #C0C0C0;
    --border-gray-fr: #EFEFEF;
    --border-white: var(--white);
    --border-primary: rgba(var(--inv-primary), var(--opac-100));
    --border-black: var(--black);
    --border-lt-green: #8FE7BE;
    --table-border-orange: rgba(var(--inv-primary), var(--opac-100));

    /* icons color */
    --arrow-down: #c80808;
    --arrow-up: #3bb91b;
    --icon-gray: #848484;
    --icon-white: var(--white);
    --icon-black: var(--black);
    --icon-primary: var(--theme-bg-primary);
    --icon-secondary: var(--theme-bg-secondary);

    /* box-shadow */
    --shadow-gray: rgba(193, 193, 64, 0.2);
    --card-shadow-gray: 0px 4px 10px 0px rgba(206, 206, 206, 0.25);
    --shadow-btn-orange: 0 0 0 0.25rem rgba(var(--inv-primary), var(--opac-25));
    --shadow-black: 0px 4px 20px 0px #d1d1d140;
    --shadow-btn-focus-red: 0 0 0 0.25rem rgba(200, 8, 8, 0.25);
    --shadow-global: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
        rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;

    /* fonts */
    --font-g: "Plus Jakarta Sans";

    /* checkbox */
    --checkBox-bg-gray: #d9d9d9;
    --checkBox-bg-primary: var(--btn-bg-primary);
    --checkBox-border: var(--white);

    /* scrollbar color */
    --scrollbar-color: var(--theme-bg-primary);

    /* dashboard card icon bg */
    --DCI-bg: rgba(var(--inv-secondary), var(--opac-40));
}

/* scroll bar style start */

/* global scrollbar start*/

body::-webkit-scrollbar {
    width: 8px;
}

body::-webkit-scrollbar-track {
    background: var(--checkBox-bg-gray);
}

body::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color);
}

body::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-color);
}

.c-width::-webkit-scrollbar {
    width: 4px;
}

.c-width::-webkit-scrollbar-track {
    background: var(--checkBox-bg-gray);
}

.c-width::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color);
}

.c-width::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-color);
}

/* width */
.scrollbarStyle::-webkit-scrollbar {
    width: 2px;
}

/* Track */
.scrollbarStyle::-webkit-scrollbar-track {
    background: var(--checkBox-bg-gray);
    border-radius: 10px;
}

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

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

/* global scrollbar end*/

/* width */
.header-notifications-list::-webkit-scrollbar {
    width: 2px;
}

/* Track */
.header-notifications-list::-webkit-scrollbar-track {
    background: var(--checkBox-bg-gray);
    border-radius: 10px;
}

/* Handle */
.header-notifications-list::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color);
    border-radius: 10px;
}

/* Handle on hover */
.header-notifications-list::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-color);
}

/* width */
.modal-body::-webkit-scrollbar {
    width: 2px;
}

/* Track */
.modal-body::-webkit-scrollbar-track {
    background: var(--checkBox-bg-gray);
    border-radius: 10px;
}

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

/* Handle on hover */
.modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-color);
}

/* width */
.FBK-words::-webkit-scrollbar {
    width: 2px;
}

/* Track */
.FBK-words::-webkit-scrollbar-track {
    background: var(--checkBox-bg-gray);
    border-radius: 10px;
}

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

/* Handle on hover */
.FBK-words::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-color);
}

/* width */
.chatSideBtns::-webkit-scrollbar {
    width: 2px;
}

/* Track */
.chatSideBtns::-webkit-scrollbar-track {
    background: var(--checkBox-bg-gray);
    border-radius: 10px;
}

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

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

/* width */
.chat-content::-webkit-scrollbar {
    width: 5px;
}

/* Track */
.chat-content::-webkit-scrollbar-track {
    background: var(--checkBox-bg-gray);
}

/* Handle */
.chat-content::-webkit-scrollbar-thumb {
    background: var(--btn-bg-primary);
}

/* Handle on hover */
.chat-content::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* scroll bar style end */

/* login start */
.body-bg {
    background-image: url(../images/background/login-bg.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100vh;

}

.top-circle {
    position: absolute;
    right: 0px;
}

.bottom-circle {
    position: absolute;
    bottom: 0px;
    left: 0px;
}

/* login end*/

/* modal new Css start */

.modal-content {
    border: 2px solid var(--border-primary) !important;
    border-radius: 10px !important;
}

.modal-header {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-bottom: 10px;
    padding: 0 !important;
    border: none !important;
}

.tezt {
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    margin: 0;
    border-radius: 0 0 30px 30px;
    padding: 10px;
    width: 80%;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.modal-title {
    font-family: var(--font-g);
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    border-radius: 0 0 10px 10px;
    padding: 10px 40px;
    width: fit-content;
    min-width: 40%;
    box-shadow: var(--shadow-black);
    text-align: center;
    color: var(--text-white);
    background: var(--theme-bg-black);
    text-transform: capitalize !important;
}

/* modal new Css end */

.dashboard-sCard {
    background-color: var(--theme-bg-primary);
    padding: 16px;
    border-radius: 15px;
    box-shadow: var(--shadow-global);
}

.card-FR {
    display: flex;
    justify-content: space-between;
}

.card-SR {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-heading {
    color: var(--text-white);
    font-size: 16px;
    font-weight: 400;
}


@media screen and (max-width: 1071px) {
    .card-heading {
        font-size: 16px;
    }
}

.card-icon-box {
    width: 30px;
    height: 30px;
    border: none;
    background: var(--DCI-bg);
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-icon-box img {
    width: 20px;
    height: 20px;
}

.card-icon-box i {
    font-size: 16px;
    color: var(--text-white);
}

.dataCount {
    font-family: var(--font-g) !important;
    font-weight: 700;
    font-size: 35px;
    color: var(--text-white);
    margin: 0;
    line-height: 0;
}

.card-data-text {
    text-align: end;
}

.arrUpIcone {
    font-size: 13px !important;
    color: var(--arrow-up) !important;
    -webkit-text-stroke: 1px;
}

.arrDownIcone {
    font-size: 20px !important;
    color: var(--arrow-down) !important;
    -webkit-text-stroke: 1px;
}

.userPer {
    margin: 0;
    font-family: var(--font-g) !important;
    font-weight: 500;
    font-size: 13px;
    color: var(--text-white);
}

.cardTime {
    font-family: var(--font-g);
    font-weight: 400;
    font-size: 13px;
    color: var(--text-white);
    margin: 0;
}

.issueHeading {
    font-size: 32px;
    font-weight: 600;
    color: var(--text-black);
    margin-bottom: 6px;
}

.RI-main {
    background: var(--theme-bg-white);
    border-radius: 30px;
    padding: 20px 20px;
    display: flex;
    align-items: center;
}

.small-graph {
    background: var(--theme-bg-white);
    border-radius: 10px;
    padding: 10px;
    height: 44%;
}

.graphSImg {
    width: 100%;
    display: flex;
    justify-content: center;
}

.graphSImg>img {
    width: 182px;
    height: 65px;
}

.issueText {
    font-size: 16px;
    font-weight: 300;
    color: var(--text-black);
    margin-bottom: 12px;
}

.RI-img-div {
    width: 200px;
    height: 200px;
    margin-left: 20px;
}

@media screen and (max-width: 1024px) {
    .RI-img-div {
        display: none;
    }
}

.assetsHeading {
    font-weight: 400;
    font-size: 16px;
    color: var(--text-black);
    margin: 0px;
}

.budgetText {
    font-weight: 500;
    font-size: 12px;
    color: var(--text-black);
    margin: 0px;
    text-align: center;
}

.assetsValue {
    font-weight: 600;
    font-size: 18px;
    color: var(--text-black);
    margin: 0px;
}

.assetsValueS {
    font-weight: 600;
    font-size: 18px;
    color: var(--text-black);
    margin: 0px;
}

.value-per {
    font-size: 12px;
    font-weight: 300;
    color: var(--text-gray);
    margin: 0px 0px 10px 0px;
}

.value-per>span {
    color: var(--text-green);
}

.assets-btn-div {
    width: 100%;
    display: flex;
    align-items: center;
}

.assets-main {
    background: var(--theme-bg-white);
    border-radius: 10px;
    padding: 10px 10px 0 10px;
    display: flex;
    flex-direction: column;
}

.assetsChartMain {
    display: flex;
    flex-direction: column;
    padding: 15px;
}

.dollars-one {
    box-shadow: rgba(100, 100, 111, 0.1) 0px 7px 29px 0px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    position: relative;
}

.d-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-black);
    margin: 0 0 5px 0;
}

.dv-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-black);
    margin: 0;
}

.d-per {
    background: var(--theme-bg-lt-red);
    border-radius: 5px;
    padding: 3px 5px;
    position: absolute;
    top: 35px;
    right: -21px;
}

.d-per>p {
    color: var(--text-red);
    margin: 0;
    font-size: 13px;
    font-weight: 500;
}

.barChat-main {
    background: var(--theme-bg-white);
    border-radius: 30px;
    padding: 10px 20px;
}

.mrrGrowth {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-black);
    margin: 0;
}

.gStatement {
    font-size: 18px;
    font-weight: 400;
    color: var(--text-black);
    margin: 0;
    text-align: center;
}

.duration {
    font-size: 12px;
    font-weight: 300;
    color: var(--text-black);
    margin: 0;
}

.gPera {
    font-size: 10px;
    font-weight: 300;
    color: var(--text-black);
    margin: 0;
}

.barChatRow {
    display: flex;
    flex-wrap: wrap;
}

.barChatFlexGrow {
    flex: 1;
}

.IBValue {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-black);
    text-align: end;
    margin: 0;
    margin-top: -20px;
}

.breadcrumbBox {
    display: flex;
    align-items: center;
    background: var(--theme-bg-white);
    border-radius: 20px;
    box-shadow: var(--shadow-global);
    padding: 0 0 0 18px;
}

.breadcrumb-title1 {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-black);
    font-family: var(--font-g);
    margin: 0 10px 0 0;
}

.breadcrumb-item {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-white);
    font-family: var(--font-g);
    margin: 0;
    border-radius: 20px;
    box-shadow: var(--shadow-global);
    padding: 8px 18px;
    background: var(--breadcrumb-bg);
}



.form-group input.form-control,
.form-group select.form-control {
    border: 1px solid var(--border-gray);
    border-radius: 10px;
    font-family: var(--font-g);
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    color: var(--text-black);
    box-shadow: var(--shadow-black);
    height: 44px;

}

.slectpanel {
    color: var(--text-white);
    border: none;
    border-radius: 30px;
    padding: 0.485rem 0.75rem;
    background: var(--theme-bg-black);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.closet {
    color: var(--text-white);
    font-size: 18px;
    font-weight: 400;
}

.closet>.bi {
    color: var(--text-white) !important;
}

.form-control {
    border: 1px solid var(--border-gray) !important;
    font-size: 12px;
    padding: 6px 16px;
    height: 44px !important;
    font-family: var(--font-g) !important;
    border-radius: 10px !important;
}

.form-control:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--inv-primary), var(--opac-25)) !important;
}

.form-control-focus-none {
    border: none !important;
}

.form-control-focus-none:focus {
    box-shadow: none !important;
}

.form-group select.form-control:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--inv-primary), var(--opac-25)) !important;
}

h4 strong {
    font-size: 18px;
    font-weight: 500;
}

.singleUser {
    font-size: 14px;
    font-weight: 500;
    margin: 5px 0;
    background: var(--theme-bg-primary);
    border-radius: 5px;
    padding: 2px;
    line-height: 17.5px;
    text-align: center;
    color: var(--text-white);
    display: block;
    text-transform: capitalize;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    cursor: pointer;
}

.user-setting {
    box-shadow: 0px 4px 4px 0px #dadada40;
    border-radius: 22px;
    border: 1px solid #e1e1e1;
}

.statuses p {
    font-size: 12px;
    font-family: var(--font-g);
    color: var(--text-black);
    font-weight: 500;
}

body {
    font-size: 14px;
    color: var(--text-black);
    font-family: var(--font-g) !important;
    background-color: var(--theme-bg-white);
    overflow-x: hidden;
}

.kanban-inner-header p {
    color: rgba(47, 47, 47, 1);
    font-size: 14px;
    font-family: var(--font-g);
    font-weight: 600;
    margin: 0 0 10px 0;
}

textarea.form-control {
    box-shadow: var(--shadow-black);
}

.msgHeader {
    display: flex;
    justify-content: space-between;
}

.msgHeaderP {
    padding: 10px;
}

.headerIcon {
    display: flex;
}

.msgIconP {
    width: 46px;
    height: 46px;
    background: var(--theme-bg-lt-primary);
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.chat-wrapper {
    padding: 10px;
    border-radius: 30px;
    background: #fcfcfc;
    border-radius: 30px;
    background-image: url("../../assets/images/msgBG.svg");
}

.chat-sidebar {
    background: var(--theme-bg-white);
    box-shadow: var(--shadow-black);
    min-width: 350px;
    max-width: 350px;
    border-radius: 10px;
    padding: 10px;
    border: 1px solid #ededed;
}

.chatMainP {
    width: 100%;
    padding: 0 0 0 20px;
}

.msgChatTextMain {
    height: 100%;
    padding: 20px;
}

.dialFrom {
    color: var(--text-black);
    font-size: 12px !important;
    font-weight: 600 !important;
}

.focusNone {
    box-shadow: none !important;
    border: none !important;
}

.focusNone:focus {
    box-shadow: none !important;
    border: none !important;
}

.select2-container--default .select2-selection--single {
    border: 1px solid var(--border-gray) !important;
    height: 44px !important;
    border-radius: 10px !important;
}

.select2-selection__arrow {
    height: 100% !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
}

.FBK-words {
    border-radius: 10px;
    height: calc(100vh - 177px);
    overflow-x: hidden;
    overflow-y: auto;
    border: 0;
    box-shadow: var(--shadow-black);
    background: var(--theme-bg-white);
}

.FBK-numbers {
    border-radius: 10px;
    height: calc(100vh - 177px);
    overflow-x: hidden;
    overflow-y: auto;
    border: 0;
    box-shadow: var(--shadow-black);
    background: var(--theme-bg-white);
}

.topHeaderP {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.topHeaderBlack {
    background: var(--theme-bg-black);
    color: var(--text-white);
    display: flex;
    justify-content: center;
    width: 60%;
    border-radius: 0px 0px 30px 30px;
    padding: 10px;
    font-size: 16px;
    font-weight: 500;
}

.close-pop {
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 8px;
    background: var(--theme-bg-black);
    width: 24px;
    height: 24px;
    font-size: 12px;
    text-align: center;
    color: var(--text-white);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.trumbowyg-box {
    display: block !important;
    position: relative !important;
    border: 1px solid var(--border-gray) !important;
    width: 100% !important;
    min-height: 200px !important;
    border-radius: 10px !important;
}

.trumbowyg-button-pane {
    width: 100%;
    min-height: 36px;
    background: #ecf0f1;
    border-bottom: 1px solid #d7e0e2;
    margin: 0;
    padding: 0 5px;
    position: relative;
    list-style-type: none;
    line-height: 10px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 11;
    border-radius: 10px 10px 0 0;
}

.inputPasswordFields {
    padding: 7px !important;
}

.chatMainbtn {
    display: flex;
    justify-content: space-between;
    background: var(--theme-bg-white);
    border-radius: 5px;
    margin-bottom: 5px;
    padding: 12px 15px;
    box-shadow: var(--shadow-black);
    border: 1px solid #ededed;
    cursor: pointer;
}

.CBActive {
    background: var(--theme-bg-lt-primary) !important;
}

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

.userImgChat {
    display: flex;
    align-items: center;
}

.uImgC {
    width: 45px;
    height: 45px;
    margin-right: 10px;
    border-radius: 50%;
    overflow: hidden;
}

.uNameC {
    font-size: 11px;
    font-weight: bold;
    color: var(--text-black);
    margin: 0;
    width: 142px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize;
}

.uMsg {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-black);
    margin: 0;
    width: 142px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-group-icon {
    width: 50px;
    border: 1px solid var(--theme-bg-primary);
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}

.resetRoom .bi-x-lg {
    font-size: 13px;
    padding-right: 6px;
}

.loadMoreChats {
    position: relative;
    z-index: 9;
    cursor: pointer;
}

.searchChatRoom:not(:placeholder-shown)+.resetRoom {
    display: block !important;
}

.msgTime {
    font-size: 10px;
    font-weight: 400;
    margin: 0;
}

.unreadMsgCount {
    width: 16px;
    height: 16px;
    background: var(--theme-bg-primary);
    border-radius: 50px;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.URMCT {
    color: var(--text-white);
    font-size: 10px;
    font-weight: 400;
    margin: 0;
}

.URMCTCount {
    text-align: center;
    color: var(--text-white);
    font-size: 10px;
    font-weight: 400;
}

.msgDate {
    font-size: 10px;
    font-weight: 400;
    margin: 0;
}

.onlineDot {
    width: 13px;
    height: 13px;
    border-radius: 50px;
    background: var(--theme-bg-green);
    margin-right: 4px;
}

.chat-headerF {
    background: var(--theme-bg-white);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    margin-bottom: 10px;
}

.uImg {
    width: 50px;
    height: 50px;
    margin-right: 10px;
    border-radius: 50%;
    overflow: hidden;
}

.userNNI {
    display: flex;
    align-items: center;
}

.uName {
    font-size: 14px;
    font-weight: 500;
    color: #484848;
    margin: 0;
}

.msgCName {
    color: var(--text-black);
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    text-transform: capitalize;
}

.uNum {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: #29A1DB;
}

.activeStatusText {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-black);
}

.ourNumT {
    font-size: 14px;
    font-weight: 500;
    color: #484848;
    margin: 0;
}

.ourNum {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: #29A1DB;
}

.ourDetails {
    text-align: right;
}

.cChat {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    background: var(--theme-bg-white);
    padding: 10px;
    border-radius: 10px;
}

.mChat {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 5px;
    background: var(--theme-bg-primary);
}

.cChatText {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-black);
}

.mChatText {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-white);
}

.chatTextBox {
    max-width: 50%;
    margin-bottom: 10px;
}

.msgChatTextBox {
    width: 60%;
    margin-bottom: 20px;
    display: flex;
}

.chatTime {
    font-size: 10px;
    font-weight: 400;
    text-align: right;
    margin: 0;
    color: var(--text-black);
}

.chatRight {
    display: flex;
    flex-direction: row-reverse;
}

.chatLeft {
    display: flex;
    flex-direction: unset;
}

.chatWrapperFBK {
    padding: 10px;
    border-radius: 10px;
    background: #fcfcfc;
    background-image: url("../../assets/images/msgBG.svg");
    height: calc(100vh - 177px);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.link-icon {
    color: var(--icon-gray);
}

.CHMIcon {
    background: var(--theme-bg-lt-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    font-size: 18px;
    color: #6c757d;
    border-radius: 50%;
    margin-right: 10px;
    border: none;
}

.msgTextAreaMain {
    display: flex;
    box-shadow: var(--shadow-black);
    border-radius: 10px;
    padding: 5px 0;
    min-height: 50px;
    max-height: 75px;
    border: 1px solid #ededed;
}

trix-editor>div {
    max-height: 75px;
    overflow: auto;
}

.replyAttachment {
    margin: 0px !important;
    font-size: 20px !important;
}

/* card new design end*/

.dataTables_filter {
    margin-bottom: 10px !important;
}

@media (max-width: 420px) {
    div.dataTables_wrapper div.dataTables_filter input[type="search"] {
        width: 240px !important;
    }
}

table.dataTable thead .sorting {
    background: none !important;
}

table.dataTable thead .sorting_desc {
    background: none !important;
}

table.dataTable thead .sorting_asc {
    background: none !important;
}

table.dataTable thead:last-of-type .sorting_asc:after,
table.dataTable thead:last-of-type .sorting_asc:before {
    display: none;
}

.wrapper {
    width: auto;
    position: relative;
}

table.dataTable thead td {
    padding: 10px 18px;
    border-bottom: 0 !important;
}

table.dataTable thead th {
    border: #ffffff !important;
    border-bottom: 1px solid var(--table-border-orange) !important;
    font-size: 10px !important;

}

table.dataTable thead tr {
    height: 0 !important;
}



a {
    text-decoration: none !important;
    color: var(--text-primary) !important;
}

::placeholder {
    opacity: 0.4 !important;
}

/* Header */

.top-header .navbar {
    position: fixed;
    top: 0;
    left: 260px;
    right: 0;
    background-color: var(--theme-bg-white);
    background-clip: padding-box;
    height: 90px;
    z-index: 10;
    padding: 0 1.5rem 0 45px;
    transition: all 0.2s;
    border-bottom: 5px solid var(--theme-bg-secondary);
    border-top: 30px solid var(--theme-bg-secondary);
}

.navbar-expand .navbar-nav .nav-link {
    padding: 0 !important;
}

.top-header .navbar .top-navbar-right .nav-link {
    color: var(--text-black);
    display: flex;
    align-items: center;
    border-radius: 50px;
}

.notifications-border {
    border: none !important;
}

figure {
    margin: 0;
}

label.error {
    margin: 2px !important;
    font-size: 14px !important;
    color: red !important;
}

.top-header .navbar .mobile-toggle-icon,
.top-header .navbar .search-toggle-icon {
    color: #293445;
    font-size: 18px;
    font-weight: 500;
    display: none;
    cursor: pointer;
}

.top-header .navbar .messages,
.top-header .navbar .notifications {
    position: relative;
}

.top-header .navbar .searchbar {
    position: relative;
    width: 30%;
}

.top-header .navbar .searchbar .search-close-icon {
    right: 2rem;
    opacity: 0.5;
    cursor: pointer;
    display: none;
}

.searchbar .form-control {
    box-shadow: none;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    border: 1px solid #e2e3e4;
    height: 70px;
}

.dropdown-searchbar .form-control {
    border-radius: 30px;
    border: 1px solid rgb(206 212 218 / 0%);
    padding-left: 3rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}



.top-header .navbar .searchbar .search-icon,
.top-header .navbar .dropdown-searchbar .search-icon {
    opacity: 0.5;
}

.dropdown-toggle-nocaret:after {
    display: none !important;
}

.top-header .navbar .dropdown-menu {
    -webkit-animation: 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0s normal forwards 1 animdropdown;
    animation: 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0s normal forwards 1 animdropdown;
}

@-webkit-keyframes animdropdown {
    from {
        -webkit-transform: translate3d(0, 6px, 0);
        transform: translate3d(0, 6px, 0);
        opacity: 0;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes animdropdown {
    from {
        -webkit-transform: translate3d(0, 6px, 0);
        transform: translate3d(0, 6px, 0);
        opacity: 0;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

.top-header .navbar .dropdown-large,
.dropdown-user-setting .navbar .dropdown-large {
    position: relative;
}

.dropdown-large .dropdown-menu {
    width: 360px;
    border: 0;
    padding: 0.5rem;
    border-radius: 15px;
    box-shadow: var(--shadow-global);
}

.top-header .navbar .dropdown-large .dropdown-menu::after {
    content: "";
    width: 13px;
    height: 13px;
    background: var(--theme-bg-white);
    position: absolute;
    top: -6px;
    right: 16px;
    transform: rotate(45deg);
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
}

.top-header .navbar .dropdown-menu::after {
    content: "";
    width: 13px;
    height: 13px;
    background: var(--theme-bg-white);
    position: absolute;
    top: -6px;
    right: 16px;
    transform: rotate(45deg);
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
}

.dropdown-user-setting .dropdown-menu {
    width: 100%;
    border: 0;
    padding: 0.5rem;
    border-radius: 15px;
    box-shadow: var(--shadow-global);
}

.top-header .navbar .dropdown-user-setting .dropdown-menu::after {
    content: "";
    width: 13px;
    height: 13px;
    background: var(--theme-bg-white);
    position: absolute;
    top: -6px;
    right: 16px;
    transform: rotate(45deg);
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
}

.top-header .navbar .dropdown-menu::after {
    content: "";
    width: 13px;
    height: 13px;
    background: var(--theme-bg-white);
    position: absolute;
    top: -6px;
    right: 16px;
    transform: rotate(45deg);
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
}

.top-header .navbar .dropdown-item {
    padding: 0.5rem;
    overflow: hidden;
}

.top-header .navbar .dropdown-large .dropdown-item:hover,
.top-header .navbar .dropdown-user-setting .dropdown-item:hover {
    border-radius: 10px;
    color: var(--text-black);
    background-color: #f5f5f5;
}

.top-header .navbar .dropdown-item .setting-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 18px;
    background-color: #e1e6eb;
}

.top-header .navbar .dropdown-item .setting-text {
    font-size: 16px;
    font-weight: 500;
}

.top-header .navbar .user_profile-icon {
    width: 38px;
    height: 38px;
    padding: 0px;
    border-radius: 50%;
    margin: 0;
    overflow: hidden;
}

.top-header .navbar .user-name {
    font-size: 15px;
    color: #5e636b;
    font-weight: 500;
    padding-right: 10px;
}

.user-name {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: bold;
    font-family: "Plus Jakarta Sans";
}

.top-header .navbar .dropdown-menu .apps:hover {
    background-color: #f8f9fa;
    transition: all 0.2;
}

.edit-deadline-status {
    font-size: 11px;
    font-weight: bold;
    margin: 0;
}

.top-header .navbar .dropdown-menu .apps .apps-icon-box {
    color: #34383f;
    width: 50px;
    height: 50px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e9ecef;
    margin: auto;
    border-radius: 50%;
}

.top-header .navbar .dropdown-menu .apps .apps-name {
    color: #34383f;
    font-size: 15px;
}

.top-header .navbar .dropdown-menu .msg-time {
    font-size: 12px;
}

.top-header .navbar .dropdown-menu .dropdown-msg-user {
    font-size: 14px;
}

.top-header .navbar .dropdown-menu .dropdown-msg-text {
    font-size: 13px;
    text-wrap: wrap;
}

.header-message-list {
    position: relative;
    height: 400px;
}

.header-notifications-list {
    position: relative;
    height: 400px;
    overflow: auto;
}

.top-header .navbar .dropdown-menu .notification-box {
    width: 48px;
    height: 48px;
    font-size: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e1e6eb;
}

.top-header .navbar .nav-link .notify-badge {
    position: absolute;
    top: -14px;
    right: -8px;
    color: var(--text-white);
    font-size: 13px;
    font-weight: 600;
    height: 18px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ff0126;
    padding: 0px 5px;
}

/* Sidebar */

.sidebar-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100%;
    background-clip: padding-box;
    transition: all 0.2s;
    z-index: 250;
    background-image: url(../images/background/sidebarBackground.png);
    border-right: solid 1px #cecece;
}

.simplebar-wrapper {
    border-radius: 0 30px 0 0;
}

.sidebar-wrapper .sidebar-header {
    width: 280px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    position: fixed;
    top: 0;
    bottom: 0;
    padding: 0 15px;
    z-index: 5;
    background: var(--theme-bg-white);
    background-clip: padding-box;
    transition: all 0.2s;
    border-right: solid 1px #aeaeae
}

.sidebar-wrapper .sidebar-header .logo-text {
    font-size: 24px;
    margin-left: 10px;
    margin-bottom: 0;
    letter-spacing: 1px;
    color: #3461ff;
}

.toggle-icon {
    font-size: 26px;
    cursor: pointer;
    color: #474747;
}

.sidebar-wrapper ul {
    padding: 0;
    margin: 20px 0px;
    list-style: none;
    background: 0 0;
}

.sidebar-wrapper .metismenu {
    background: 0 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 20px 40px 40px 40px;
    margin-top: 100px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.sidebar-wrapper .metismenu>li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    margin-bottom: 5px;
}



ul.mm-show.mm-collapse li.mm-active a {
    margin-left: 0px !important;
    color: #29A1DB !important;
    font-weight: 600 !important;
}

.sidebar-wrapper .metismenu .mm-collapse a:hover {
    color: #29A1DB !important;
    font-weight: 600 !important;
    margin-left: 0px !important;
}

ul.mm-show.mm-collapse li a {
    background: transparent !important;
}

.sidebar-wrapper .metismenu a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: left;
    padding: 10px 15px;
    font-size: 15px;
    color: var(--text-white);
    outline-width: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    letter-spacing: 0.5px;
    transition: all 0.2s ease-out;
    border-radius: 10px;
}

.sidebar-wrapper .metismenu a .parent-icon {
    font-size: 18px;
    line-height: 1;
    width: 30px;
    height: 30px;
    padding: 5px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-wrapper .metismenu a .parent-icon img {
    width: 100%;
    filter: brightness(0.2);
}

.sidebar-wrapper .metismenu a:hover .parent-icon img {
    filter: brightness(1);
}

.sidebar-wrapper .metismenu a .menu-title {
    margin-left: 10px;
    font-size: 13px;
    color: var(--text-black);
    font-weight: 500;
    line-height: 20px;
}

.sidebar-wrapper .metismenu ul a {
    padding: 6px 15px 6px 30px;
    font-size: 12px;
    font-weight: 300;
    border: 0;
    color: var(--text-black) !important;
}

.sidebar-wrapper .metismenu ul a i {
    margin-right: 10px;
    font-size: 10px;
}

.sidebar-wrapper .metismenu ul a img {
    filter: brightness(0);
    margin-right: 5px;
    width: 18px;
}

.sidebar-wrapper .metismenu ul {
    background: rgb(255 255 255 / 0%);
}

.sidebar-wrapper .metismenu ul ul a {
    padding: 8px 15px 8px 30px;
}

.sidebar-wrapper .metismenu ul ul ul a {
    padding: 8px 15px 8px 45px;
}

.sidebar-wrapper .metismenu a:active .menu-title,
.sidebar-wrapper .metismenu a:focus .menu-title,
.sidebar-wrapper .metismenu a:hover .menu-title,
.sidebar-wrapper .metismenu .mm-active>a>.parent-icon>img,
.sidebar-wrapper .metismenu .mm-active>a .menu-title {
    color: var(--text-white);
    filter: brightness(0) invert();
}


.sidebar-wrapper .metismenu .mm-active>a,
.sidebar-wrapper .metismenu a:active,
.sidebar-wrapper .metismenu a:focus,
.sidebar-wrapper .metismenu a:hover {
    text-decoration: none;
    background: var(--gradient-fr);
    border-radius: 10px;
}


.simplebar-content>ul>li:first-child>a {
    border-radius: 30px 0 0 0;
    overflow: hidden;
}

.menu-label {
    padding: 20px 15px 5px 5px;
    color: #b0afaf;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
}

.metismenu .has-arrow:after {
    position: absolute;
    content: "";
    width: 0.5em;
    height: 0.5em;
    border-style: solid;
    border-width: 1.2px 0 0 1.2px;
    border-color: initial;
    right: 15px;
    transform: rotate(-135deg) translateY(-50%);
    transform-origin: top;
    top: 50%;
    transition: all 0.3s ease-out;
    color: var(--icon-black) !important;
}

.metismenu .has-arrow:hover::after,
.metismenu .mm-active .has-arrow::after {
    color: var(--icon-white) !important;
}


.c-pad-start {
    padding-left: 35px !important;
}

.star-class {
    position: absolute;
    top: 50%;
    right: 10px;
    cursor: pointer
}

.from-email {
    white-space: nowrap;
    width: 88%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.MUName {
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mSubject {
    font-size: 14px;
    font-weight: 200;
    white-space: nowrap;
    width: 78%;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media screen and (min-width: 1025px) {
    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header .logo-text {
        display: none;
    }

    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper {
        width: 70px;
        background-color: #f4f4f4;
    }

    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu {
        border-top-right-radius: 0;
        margin-left: 5px;
        margin-right: 5px;
        padding-left: 0px;
    }

    .wrapper.toggled.sidebar-hovered .sidebar-wrapper {
        box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.12) !important;
    }

    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header {
        width: 70px;
        padding: 10px;
    }

    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header .toggle-icon {
        display: none;
    }

    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header {
        justify-content: center;
    }

    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header {
        width: 70px;
    }

    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu a {
        justify-content: center;
        border-left: 0px solid #3461ff;
    }

    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu .menu-title {
        display: none;
    }

    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu li ul {
        display: none;
    }

    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu li.menu-label {
        display: none;
    }

    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu .has-arrow:after {
        display: none;
    }

    .email-toggle-btn {
        display: none !important;
    }

    .chat-toggle-btn {
        display: none !important;
    }
}

.wrapper.toggled .top-header .navbar {
    left: 70px;
}

.wrapper.toggled .page-content {
    margin-left: 70px;
}

/* Page Content */

.page-content {
    margin-left: 290px;
    margin-top: 100px;
    margin-bottom: 10px;
    padding: 1.5rem;
    transition: all 0.2s;
    background: #fcfcfc;
    margin-right: 10px;
    border-radius: 30px;
}

/* Utilities */

.radius-10 {
    border-radius: 10px;
}

.radius-15 {
    border-radius: 15px;
}

.radius-30 {
    border-radius: 30px;
}

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

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

.font-20 {
    font-size: 20px;
}

.font-22 {
    font-size: 22px;
}

.font-24 {
    font-size: 24px;
}

.font-30 {
    font-size: 30px;
}

.font-35 {
    font-size: 35px;
}

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

table-striped>tbody>tr:nth-of-type(2n+1) {
    --bs-table-accent-bg: rgba(0, 0, 0, .02);
}

.table-responsive {
    white-space: nowrap;
}

.fm-menu .list-group a {
    font-size: 16px;
    color: #5f5f5f;
    display: flex;
    align-items: center;
}

.fm-menu .list-group a i {
    font-size: 23px;
}

.fm-menu .list-group a:hover {
    background-color: rgb(52 97 255 / 15%);
    color: #3461ff;
    transition: all 0.2s ease-out;
}

.add-post {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
}

.fm-icon-box {
    font-size: 32px;
    background: var(--theme-bg-white);
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-to-top {
    display: none;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 26px;
    color: var(--text-white);
    position: fixed;
    border-radius: 50%;
    bottom: 20px;
    right: 12px;
    background-color: var(--theme-bg-white);
    z-index: 5;
    border: 1px solid #666;
}

.back-to-top:hover {
    color: var(--text-white);
    background-color: #000;
    transition: all 0.5s;
}

.project-user-groups img {
    margin-right: -14px;
    border: 1px solid #e4e4e4;
    padding: 2px;
    cursor: pointer;
}

.project-user-plus {
    width: 33px;
    height: 33px;
    margin-right: 0px;
    line-height: 33px;
    background: var(--theme-bg-white);
    border-radius: 50%;
    text-align: center;
    font-size: 22px;
    cursor: pointer;
    border: 1px dotted #a9b2bb;
    color: #404142;
}

.user-groups img {
    margin-left: -14px;
    border: 1px solid #e4e4e4;
    padding: 2px;
    cursor: pointer;
}

.user-plus {
    width: 33px;
    height: 33px;
    margin-left: -14px;
    line-height: 33px;
    background: var(--theme-bg-white);
    border-radius: 50%;
    text-align: center;
    font-size: 22px;
    cursor: pointer;
    border: 1px dotted #a9b2bb;
    color: #404142;
}

.icon-box {
    width: 60px;
    height: 60px;
    background-color: var(--theme-bg-white);
    border-radius: 50%;
    border: 1px solid #c7c8cb;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.product-box {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    cursor: pointer;
    background-color: var(--theme-bg-white);
}

.best-product-item {
    background-color: var(--theme-bg-white);
    cursor: pointer;
    border-radius: 10px;
    padding: 0.5rem;
}

.best-product-item:hover {
    background-color: #f5f5f5;
}

.product-box img {
    width: 100%;
}

.best-product {
    position: relative;
    height: 420px;
}

.by-device-container {
    position: relative;
    height: 260px;
}

.piechart-legend {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.chart-container1 {
    position: relative;
    height: 340px;
}

.chartjs-container1 {
    position: relative;
    height: 260px;
}

.sepration {
    height: 100px;
}

.sepration-2 {
    height: 50px;
}

.gmaps,
.gmaps-panaroma {
    height: 400px;
    background: #eee;
    border-radius: 3px;
}

.theme-icons {
    background-color: var(--theme-bg-white);
    color: #434547;
}

.cursor-pointer {
    cursor: pointer;
}

.icon-badge {
    width: 45px;
    height: 45px;
    font-size: 1.2rem;
    background: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.product-img-2 {
    width: 45px;
    height: 45px;
    background-color: var(--theme-bg-white);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid #e6e6e6;
}

.error-social a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    color: var(--text-white);
    text-align: center;
    border-radius: 50%;
    margin: 5px;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.productlist .product-box {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    border: 1px solid #e2e3e4;
    background-color: var(--theme-bg-white);
}

.productlist .product-box img {
    width: 100%;
}

.productlist .product-title {
    color: rgb(25, 27, 34);
}

.orderlist .product-box {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    border: 1px solid #e2e3e4;
    background-color: var(--theme-bg-white);
}

.orderlist .product-box img {
    width: 100%;
}

.orderlist .product-title {
    color: rgb(25, 27, 34);
}

.select-lable {
    font-weight: 500;
    font-size: 16px;
    color: var(--text-black);
    font-family: var(--font-g);
}


.iconmenu .ps__rail-x {
    height: 0px;
}

.iconmenu .ps__rail-y {
    width: 0px;
}

.iconmenu .ps__rail-x.ps--clicking .ps__thumb-x,
.iconmenu .ps__rail-x:focus>.ps__thumb-x,
.iconmenu .ps__rail-x:hover>.ps__thumb-x {
    height: 5px;
}

.iconmenu .ps__rail-y.ps--clicking .ps__thumb-y,
.iconmenu .ps__rail-y:focus>.ps__thumb-y,
.iconmenu .ps__rail-y:hover>.ps__thumb-y {
    width: 5px;
}

.w_chart {
    position: relative;
    display: inline-block;
    width: 80px !important;
    height: 80px !important;
    text-align: center;
    font-size: 1.4em;
}

.w_percent {
    display: inline-block;
    line-height: 80px !important;
    z-index: 2;
    color: #0a0808;
}

.w_percent:after {
    content: "%";
    margin-left: 0.1em;
}

.w_chart canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px !important;
    height: 80px !important;
}

#geographic-map {
    width: 100%;
    height: 325px;
}

.new-customer-list {
    position: relative;
    height: 500px;
}

.new-customer-list .customer-list-item {
    padding: 0.5rem;
    border-radius: 10px;
}

.new-customer-list .customer-list-item:hover {
    background-color: #f0f0f0;
}

.top-sellers-list {
    position: relative;
    height: 460px;
}

.top-sellers-list .sellers-list-item {
    padding: 0.5rem;
    border-radius: 10px;
}

.top-sellers-list .sellers-list-item:hover {
    background-color: #f0f0f0;
}

.client-message {
    position: relative;
    height: 565px;
}

.client-message .client-messages-list {
    padding: 0.5rem;
}

.client-message .client-messages-list:hover {
    background-color: #f0f0f0;
}

/* Widgets */

.widget-icon {
    width: 48px;
    height: 48px;
    background-color: #fafafa;
    border-radius: 50%;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.widget-icon-large {
    width: 54px;
    height: 54px;
    background-color: #fafafa;
    border-radius: 10px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Chips */

.chip {
    display: inline-block;
    height: 32px;
    padding: 0 12px;
    margin-right: 1rem;
    margin-bottom: 1rem;
    font-size: 14px;
    font-weight: 500;
    line-height: 32px;
    color: rgba(0, 0, 0, 0.7);
    cursor: pointer;
    background-color: #f1f1f1;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 16px;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
    box-shadow: none;
}

.chip img {
    float: left;
    width: 32px;
    height: 32px;
    margin: 0 8px 0 -12px;
    border-radius: 50%;
}

.profile-cover {
    background-image: linear-gradient(to bottom right,
            rgb(26 30 33 / 50%),
            rgb(0 0 0 / 50%)),
        url(../images/gallery/33.png);
    background-size: cover;
    height: 24rem;
    background-position: center;
    margin: -4rem -1.5rem -5.5rem -1.5rem;
    padding: 1.5rem 1.5rem 6.5rem 1.5rem;
}

/* Email */
.mhBtn {
    box-shadow: var(--shadow-black);
    border-radius: 14px !important;
    background: var(--btn-bg-white);
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
}

.mhBtn img {
    width: 15px;
    height: 15px;
}

.iconR {
    width: 12px !important;
    height: auto !important;
}

.mailMain {
    width: 100%;
}

.iconColor {
    color: var(--icon-gray);
    margin: 0px !important;
}

.MOBtnUl {
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
}

.pos-relative {
    position: relative;
}

.my-email {
    text-decoration: none !important;
    border: none;
}



.unread_span {
    background: var(--theme-bg-primary);
    border-radius: 50px;
    font-size: 12px;
    padding: 0 4px;
    min-width: 18px;
    height: 18px;
    text-align: center;
    position: absolute;
    right: 0;
    color: var(--text-white);
    top: -10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mailBoxTab {
    margin-right: 10px;
}

.folderNameText {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    margin: 0 10px 0 0;
    color: var(--text-black) !important;
}

.keypadbtnF {
    display: flex !important;
    padding: 10px;
    align-items: center !important;
}

.email-wrapper {
    padding: 10px;
}

.email-sidebar {
    border-radius: 30px;
    background: var(--theme-bg-white);
    box-shadow: var(--shadow-black);
    margin-right: 10px;
    height: calc(100vh - 90px);
    padding: 10px;

}


.email-navigation {
    position: relative;
    padding: 0;
}

.email-header {
    background: transparent;
    padding: 15px;
    z-index: 1;
}

.email-content {
    padding: 0;
    background: var(--theme-bg-white);
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}

.email-navigation a.list-group-item {
    color: #404142;
    padding: 0.35rem 1.25rem;
    background-color: var(--theme-bg-white);
    border-bottom: 1px solid rgb(0 0 0 / 0%);
    transition: all 0.3s ease-out;
}

.email-navigation a.list-group-item:hover {
    background-color: rgb(13 110 253 / 0.12);
}

.email-navigation a.list-group-item.active {
    color: #0b5ed7;
    font-weight: 600;
    background-color: rgb(13 110 253 / 0.12);
}

.email-meeting a.list-group-item {
    color: #404142;
    padding: 0.35rem 1.25rem;
    background-color: var(--theme-bg-white);
    border-bottom: 1px solid rgb(0 0 0 / 0%);
}

.email-meeting a.list-group-item:hover {
    background-color: rgb(0 123 255 / 15%);
    transition: all 0.3s ease-out;
}

.email-hangout .chat-user-online:before {
    content: "";
    position: absolute;
    bottom: 8px;
    left: 45px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;
    background: #16e15e;
}

.email-toggle-btn {
    width: auto;
    height: auto;
    margin-right: 10px;
    text-align: center;
    font-size: 24px;
    color: #404142;
    border-radius: 0;
    cursor: pointer;
    background-color: var(--theme-bg-white);
    border: 0 solid rgb(0 0 0 / 15%);
}

.email-time {
    font-size: 13px;
    color: #6c757d;
}

/* .email-list div */
.email-message {
    background: var(--theme-bg-white);
    color: #383a3c;
    border-radius: 20px;
    box-shadow: var(--shadow-black);
    margin-bottom: 5px;
    padding: 12px;
}

/* .email-list div */
.email-message:hover {
    transition: all 0.2s ease-out;
    background-color: #eceef1;
}

.email-list {
    position: relative;
    height: calc(100vh - 165px);
    padding: 0 5px;
}

.email-star {
    color: #6c757d;
}


.composeBtnParent {
    padding: 0 5px;
}

.compose-mail-popup {
    width: 42%;
    position: fixed;
    bottom: -30px;
    right: 30px;
    z-index: 15;
    display: none;
}

.compose-mail-toggled {
    display: block;
}

.compose-mail-title {
    font-size: 16px;
}

.compose-mail-close {
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 14px;
    border-radius: 2px;
    background-color: rgb(255 255 255 / 0%);
}

.compose-mail-close:hover {
    background-color: rgb(255 255 255 / 20%);
}

/* chat box */

.chat-sidebar-header {
    width: auto;
    height: auto;
    position: relative;
    padding: 15px;
    box-shadow: rgb(0 0 0 / 10%) 0px 4px 12px;
}

.chat-sidebar-content {
    padding: 5px;
    background: #f4f4f4;
    height: 55%;
    border-radius: 0 0 30px 30px;
}

.chat-user-online {
    position: relative;
}

.chat-sidebar-header .chat-user-online:before {
    content: "";
    position: absolute;
    bottom: 7px;
    left: 40px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;
    background: #16e15e;
}

.chat-list .chat-user-online:before {
    content: "";
    position: absolute;
    bottom: 7px;
    left: 36px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;
    background: #16e15e;
}



.chat-header {
    padding: 15px;
    background: #f5f6fb;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    border-top-right-radius: 0.25rem;
    z-index: 1;
    box-shadow: rgb(0 0 0 / 10%) 0px 4px 12px;
}

.chat-headerMsg {
    background: var(--theme-bg-white);
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 0px 0px;
    margin-bottom: 10px;
    border: 1px solid #ededed;
}

.chat-footer {
    padding: 0 15px;
}

.chat-tab-menu li a.nav-link {
    padding: 0.3rem 0.2rem;
    line-height: 1.2;
    color: #4a4b4c;
}

.chat-tab-menu .nav-pills .nav-link.active,
.chat-tab-menu .nav-pills .show>.nav-link {
    color: #ff4107;
    background-color: rgb(0 123 255 / 0%);
}

.chat-title {
    font-size: 15px;
    color: #272b2f;
    font-weight: 700;
}

.chat-msg {
    font-size: 13px;
    color: #6c757d;
}

.chat-time1 {
    font-size: 11px;
    color: #000;
}

.chat-time {
    font-size: 11px;
    color: #000;
}

.chat-list {
    position: relative;
    overflow-y: auto;
}

.search-heading {
    position: sticky;
    width: 100%;
    background: var(--theme-bg-white);
    top: 0;
    padding: 0;
    margin: 0;
    margin-top: 0 !important;
    z-index: 11;
    padding: 10px 0;
}

/* width */
.chat-list::-webkit-scrollbar {
    width: 5px;
}

/* Track */
.chat-list::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
.chat-list::-webkit-scrollbar-thumb {
    background: var(--btn-bg-primary);
}

/* Handle on hover */
.chat-list::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.chat-list .list-group-item {
    border: 1px solid rgb(0 0 0 / 9%);
    background-color: transparent;
}

.chat-list .list-group-item:hover {
    border: 1px solid rgb(0 0 0 / 0%);
    background-color: rgb(13 110 253 / 0.12);
}

.chat-list .list-group-item.active {
    background-color: rgb(13 110 253 / 0.12);
}

.chart-online {
    color: #16e15e;
}

.chat-top-header-menu {
    display: flex;
}



/* chat style new start*/
.magReadMark {
    width: 15px;
    height: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.chatSideBtns {
    height: calc(100vh - 347px);
    overflow: auto;
    padding: 5px;
}

/* chat style new end*/
.chat-content {
    position: relative;
    width: auto;
    height: calc(100vh - 226px);
    overflow-y: auto;
}

.chat-content-leftside .chat-left-msg {
    width: fit-content;
    padding: 0.8rem;
    max-width: 480px;
    text-align: left;
}

.chat-content-rightside .chat-right-msg {
    width: fit-content;
    padding: 0.8rem;
    float: right;
    max-width: 480px;
    text-align: left;
    position: relative;
}

.messageBox {
    position: relative;
}

.loadingGif {
    position: absolute;
    left: -30px;
    bottom: 10px;
}

.chat-toggle-btn {
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin-right: 15px;
    text-align: center;
    font-size: 24px;
    color: #6c757d;
    border-radius: 50%;
    cursor: pointer;
    background-color: var(--theme-bg-white);
    border: 1px solid rgb(0 0 0 / 15%);
}

/* Authentication */

.authentication-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: auto;
    max-width: 80rem;
    height: 100vh;
}

.login-separater span {
    position: relative;
    top: 26px;
    margin-top: -10px;
    background: var(--theme-bg-white);
    padding: 5px;
    font-size: 12px;
    color: #cbcbcb;
    z-index: 1;
}

/* swicther */

.btn-switcher {
    position: fixed;
    right: 0px;
    top: 40%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.header-colors-indigators .indigator {
    width: 50px;
    height: 50px;
    background-color: #f7f8fa;
    border-radius: 10px;
    cursor: pointer;
}

.modal {
    display: none;
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    background: #00000063;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
    pointer-events: none;
}

.modal-backdrop.fadeCustom {
    opacity: 0;
    filter: alpha(opacity=0);
}

.modal-backdrop.in {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.modal-open {
    overflow: hidden;
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}

.modal-dialog {
    position: relative;
    /* margin: 10px; */
    max-width: 550px !important;
    min-width: 550px !important;
}

.modal.fadeCustom .modal-dialog {
    -webkit-transform: translate(0, -25%);
    -ms-transform: translate(0, -25%);
    -o-transform: translate(0, -25%);
    transform: translate(0, -25%);
    -webkit-transition: -webkit-transform 0.3s ease-out;
    -moz-transition: -moz-transform 0.3s ease-out;
    -o-transition: -o-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
}

.modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    transition-delay: 0.2s;
}

.modal-body p {
    line-height: 28px;
}

.modal-footer {
    padding: 10px 30px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-top: 0 !important;
}


.closeCustom {
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: 0.2;
    position: absolute;
    filter: alpha(opacity=20);
}

button.closeCustom {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    font-family: var(--font-g);
}

.closeCustom:hover,
.closeCustom:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.modal-header .closeCustom {
    margin-top: -2px;
    margin-left: 10px;
}

.modal-body {
    font-family: var(--font-g);
    padding: 15px 30px !important;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
}

.fadeCustom {
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    -o-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
}

.fadeCustom.in {
    opacity: 1;
}

/* Responsive */

@media (min-width: 768px) {

    .modal-content {
        -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }
}

@media screen and (max-width: 1280px) {
    .email-header {
        height: auto;
    }
}

@media screen and (max-width: 1024px) {
    .sidebar-wrapper {
        left: -300px;
    }

    .page-content {
        margin-left: 0px;
    }

    .top-header .navbar {
        left: 0px;
    }

    /* Toggeled */

    .wrapper.toggled .sidebar-wrapper {
        left: 0px;
    }

    .wrapper.toggled .page-content {
        margin-left: 0px;
    }

    .wrapper.toggled .top-header .navbar {
        left: 0px;
    }

    .wrapper.toggled .overlay {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #000;
        opacity: 0.6;
        z-index: 12;
        display: block;
        cursor: move;
        transition: all 0.2s ease-out;
    }

    .top-header .navbar .searchbar {
        position: relative;
        width: 30%;
        display: none;
    }

    .top-header .navbar .full-searchbar {
        position: absolute;
        top: 0%;
        left: 0;
        right: 0%;
        width: 100%;
        height: 60px;
        background-color: var(--theme-bg-white);
        border-bottom: 1px solid rgb(0 0 0 / 0%);
        background-clip: padding-box;
        display: flex !important;
        z-index: 1;
        align-items: center;
        justify-content: start;
        padding: 0 1rem;
        -webkit-animation: 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0s normal forwards 1 animdropdown;
        animation: 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0s normal forwards 1 animdropdown;
    }

    .email-sidebar {
        left: -280px;
    }

    .email-content {
        margin-left: 0;
    }

    .email-header {
        left: 0;
    }

    .email-toggled .email-sidebar {
        left: 0;
    }

    .email-toggled .overlay {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 250px;
        background: #000;
        opacity: 0.5;
        z-index: 9;
        display: block;
        cursor: move;
        transition: all 0.3s ease-out;
    }

    .compose-mail-popup {
        width: auto;
        position: fixed;
        bottom: -30px;
        right: 0;
        left: 0;
    }

    .chat-header {
        border-top-left-radius: 0.25rem;
    }

    .chat-footer {
        border-bottom-left-radius: 0.25rem;
    }

    .chat-sidebar {
        left: -370px;
    }

    .chat-content {
        margin-left: 0;
    }

    .chat-header {
        left: 0;
    }

    .chat-footer {
        left: 0;
    }

    .chat-toggled .chat-sidebar {
        left: 0;
    }

    .chat-toggled .overlay {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 340px;
        background: #000;
        opacity: 0.5;
        z-index: 11;
        display: block;
        cursor: move;
        transition: all 0.3s ease-out;
    }



    .top-header .navbar .mobile-toggle-icon {
        display: block;
    }

    .top-header .navbar .top-navbar-right .nav-link {
        padding: 5px;
    }

    .dropdown_icon,
    .mobile_display_none {
        display: none;
    }

    .top-header .navbar .searchbar .search-close-icon {
        display: block;
    }
}

@media screen and (max-width: 767px) {
    .top-header .navbar .dropdown-menu::after {
        display: none;
    }

    .top-header .navbar .dropdown {
        position: static !important;
    }

    .top-header .navbar .dropdown-menu {
        width: 100% !important;
    }


}

@media screen and (max-width: 520px) {}

.home-dashboard {
    margin-top: 80px;
}

.chat-sidebar-header {
    border: 0;
    background-color: var(--theme-bg-white);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.input-group {
    height: 46px !important;
    border-radius: 10px !important;
    box-shadow: var(--border-black) !important;
    border: 1px solid var(--border-gray);
    display: flex !important;
    align-items: center !important;
}

.chat-sidebar-header .input-group {
    background: var(--theme-bg-white);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    border-radius: 4px;
}

.chat-sidebar-header .input-group:not(.has-validation)> :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
    border: 0;
}

.chat-sidebar-header .input-group> :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border: 0;
}

.right-12 {
    right: 12px;
    cursor: pointer;
}

.call-logs-header {
    padding: 10px;
    border-radius: 5px;
}

.breadcrumb-logs {
    background-color: transparent !important;
}

.log-table {
    box-shadow: rgb(0 0 0 / 20%) 0px 4px 12px;
    border-radius: 10px;
}



.log-table th {
    color: #3e4d81;
}

.log-table td {
    text-transform: capitalize;
}

.fixed-table {
    overflow-y: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    border-color: transparent !important;
    background: transparent !important;
}

.keywords-main .list-group-item.active {
    background-color: #3e4d81;
    border-color: #3e4d81;
}

.keywords-main .list-group {
    box-shadow: rgb(0 0 0 / 10%) 0px 4px 12px;
}

@keyframes glow {
    from {
        box-shadow: 0 0 10px -10px #a01220;
    }

    to {
        box-shadow: 0 0 10px 10px #a01220;
    }
}

.glowdv {
    animation: glow 1s infinite alternate;
}

mark {
    background: yellow;
    color: black;
}

.mail-main {
    height: calc(100vh - 90px);
    padding: 0 1.5rem;
}

.mail-main .nav-link.active {
    border-color: transparent !important;
    background-color: rgba(17, 25, 39, 0.12) !important;
    border-radius: 10px;
}

.mail-main .nav-tabs {
    border-bottom: none;
}

.mail-main .nav-tabs .nav-link {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mail-main .nav-tabs .nav-link i {
    font-size: 20px;
}

.compose {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.compose>img {
    margin-right: 10px;
}

.mail-main {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    outline: 0px;
    border: 0px;
    margin: 16px 0px 15px 0;
    cursor: pointer;
    user-select: none;
    appearance: none;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.75;
    min-width: 64px;
    color: rgb(255, 255, 255);
    background-color: #3461ff;
    box-shadow: rgb(0 0 0 / 8%) 0px 1px 5px;
    width: 100%;
    border-radius: 12px;
    text-transform: none;
    padding: 5px 20px;
}

.mail-main .mail-left {
    border-right: 1px solid rgb(208 208 208);
    padding-right: 10px;
    height: calc(100vh - 130px);
}

.mail-main .mail-header {
    border-bottom: 1px solid rgb(208 208 208);
    height: 70px;
    display: flex;
    justify-content: end;
    align-items: center;
    width: 100%;
}

.compose-popup {
    position: fixed;
    background: var(--theme-bg-white);
    z-index: 111;
    width: 800px;
    padding: 0 20px 20px 20px;
    bottom: 11px;
    right: 10px;
    box-shadow: var(--shadow-black);
    border-radius: 20px;
    display: none;
    border: 2px solid var(--border-primary);
}

.popup-body {
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.bg-fixed {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #0c0b0b87;
    top: 0;
    right: 0;
    padding: 10px;
    z-index: 999;
    display: none;
}

.mail-detail-box {
    position: absolute;
    width: calc(100% - 260px);
    height: 100%;
    background: var(--theme-bg-white);
    top: 80px;
    right: 0;
    padding: 10px;
    border-radius: 10px;
    display: none;
}

.mail-heading {
    font-size: 24px;
    font-weight: 600;
}

.user-email {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    padding: 0;
}

.email-to {
    margin: 0;
    padding: 0;
}

.main-mail {
    border: 1px solid #dadce0;
    height: calc(100vh - 220px);
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
}

.row-green {
    background: #3a9f3a !important;
}

.row-orange {
    background: #ffa500 !important;
}

.row-red {
    background: #e05454 !important;
}

.font-10 {
    font-size: 10px !important;
}

/* Zeeshan Styling Code start here */

.blink_me {
    background-color: var(--btn-bg-primary);
    height: 16px;
    width: 16px;
    animation: blinker 3s linear infinite;
    border-radius: 50%;
}

.blink_me_task {
    background-color: var(--btn-bg-primary);
    height: 3px;
    width: 3px;
    animation: blinker 3s linear infinite;
}


.blink-text {
    font-size: 14px;
    font-weight: 400;
}

.sidebar-wrapper .sidebar-header .logo-icon {
    width: 150px;
}

.sidebar-wrapper .sidebar-header .logo-icon img {
    width: 100%;
    filter: invert(100%);
}

.dropdown-user-name {
    font-size: 14px;
    font-weight: 400;
    line-height: 0px;
    margin-top: 10px;
    color: var(--text-black);
    line-height: 0.5;
}

.dropdown-user-designation {
    font-size: 10px;
    font-weight: 400;
    color: var(--text-black);
}

.dropdown-item {
    color: var(--text-black) !important;
    font-size: 12px !important;
}

.dropdown_icon {
    width: 22px;
    height: 100%;
    padding: 5px;
    margin-bottom: 0;
}

.dropdown_icon img {
    width: 100%;
}

.toggle_icon {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    width: 37px;
    padding: 5px;
}

.toggle_icon .line {
    width: 100%;
    height: 2px;
    background-color: #474747;
    border-radius: 5px;
    transition: 0.4s;
}

.toggle-icon:hover .line.l2 {
    width: 70%;
}

.toggle-icon:hover .line.l3 {
    width: 50%;
}

.table {
    border-collapse: collapse;
    overflow: hidden;
}

.table .table_head th {
    font-family: var(--font-g);
    font-size: 1em;
    font-weight: 600;
    vertical-align: middle;
}

.butonss {
    padding: 3px 5px 5px 5px !important;
}

.table td {
    padding: 8px 20px;
    border: 1px solid #c8c8c8;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    color: var(--text-black);
}

.table tbody {
    vertical-align: middle;
    /* border: 2px solid #c8c8c8; */
}

.table-bordered> :not(caption)>*>* {
    border-width: 0;
}

table.table-bordered.dataTable th,
table.table-bordered.dataTable td {
    border-width: 1px 0 !important;
}

.table a.btn,
.table input.btn {
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
}

.table_pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.table_pagination span {
    font-size: 14px;
    font-weight: 400;
    color: #242424;
}

.pagination {
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
}

.page-link {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #242424 !important;
    border: 0 !important;
    padding: 0 !important;
}

.page-item.active .page-link {
    z-index: 3;
    color: #ff4107 !important;
    background-color: transparent !important;
    border-color: unset !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

li.nav-item.dropdown.dropdown-user-setting .dropdown-toggle::after {
    display: none;
}

.form-group {
    margin: 10px 0 20px 0;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    color: var(--text-black);
    font-family: var(--font-g);
}

.form-group strong,
.hd_wrp strong {
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 25px;
    color: var(--text-black);
}

.hd_wrp {
    margin: 15px 0 0 0;
}

.form-group label {
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    color: var(--text-black);
}

.form-group strong {
    display: block;
    margin: 0 0 5px 0;
}

.form-group ul {
    padding: 0;
    list-style: none;
    margin: 0;
}

.form-group ul li {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-black);
    margin: 0 0 5px 0;
}

.creat_user_wrap .form-group input {
    width: 100%;
}

.role_wrap {
    display: flex;
    justify-content: start;
    align-items: baseline;
    text-align: left;
    margin: 0 0 10px 0;
}

.role_wrap input {
    margin: 0 15px 0 20px;
}

.form-group .role_wrap:nth-child(2) {
    margin: 20px 0 10px 0;
}

.creat_user_wrap button.btn-primary {
    background: #ff4107;
    border-radius: 10px;
    border: none;
    margin: 30px 0 0 0;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    color: var(--text-white);
}

.er_row {
    display: grid;
    grid-template-columns: auto auto auto auto;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
}

.er_row-show {
    display: grid;
    grid-template-columns: auto auto auto auto;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    justify-content: flex-start;
}

@media (max-width: 1024px) {
    .er_row {
        grid-template-columns: auto auto auto;
    }
}

@media (max-width: 768px) {
    .er_row {
        grid-template-columns: auto auto;
    }
}

@media (max-width: 425px) {
    .er_row {
        grid-template-columns: auto;
    }
}

#editCampaign[type="checkbox"]:checked,
.role_wrap input[type="checkbox"]:checked,
.creat_user_wrap .form-group input[type="checkbox"]:checked,
.name[type="checkbox"],
.radio[type="radio"]:checked {
    background-color: var(--checkBox-bg-primary);
    cursor: pointer;
}

#editCampaign[type="checkbox"],
.role_wrap input[type="checkbox"],
.creat_user_wrap .form-group input[type="checkbox"],
.name[type="checkbox"],
.radio[type="radio"] {
    background-color: var(--checkBox-bg-gray);
    outline: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50px;
    cursor: pointer;
    margin-right: 10px;
}

.check-box-lable {
    display: flex;
    align-items: center;
    font-size: 13px !important;
    color: var(--text-black);
    font-weight: 500;
    font: var(--font-g);
}

ol.breadcrumb {
    background: transparent;
}

table.table {
    width: 100% !important;
    margin: 0 auto !important;
}

table.table-bordered.dataTable tbody td {
    vertical-align: middle;
    padding: 4px 16px;
    font-family: var(--font-g) !important;
    font-weight: 500;
    font-size: 11px !important;
}

.table-bordered {
    border: 0 !important;
}

.web_internet_indicator {
    display: flex;
}

.mob_internet_indicator {
    display: none;
}

.horizontal_scroll {
    overflow-x: scroll;
}

@media (max-width: 425px) {
    .top-header .navbar {
        padding: 10px 1.5rem;
        flex-wrap: wrap;
        height: auto;
        gap: 10px !important;
    }

    .blink-text {
        font-size: 12px;
    }

    .web_internet_indicator {
        display: none !important;
    }

    .mob_internet_indicator {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        width: 100%;
    }

    .page-content {
        margin-top: 130px;
    }

    .top-header .navbar .dropdown-menu {
        width: 96% !important;
        margin: 0 auto;
        left: 0;
    }
}

.modal-header .close {
    display: none;
}

.select2-container--default .select2-selection--multiple {
    border-radius: 10px !important;
    height: 44px;
    border: 1px solid var(--border-gray) !important;
    display: flex;
    align-items: center;
    padding-bottom: 0px !important;
    overflow: auto;
}

.select2-container--default .select2-selection--multiple:focus {
    box-shadow: var(--shadow-btn-orange) !important;
}

p.singleNumber {
    font-size: 14px;
    font-weight: 500;
    margin: 5px 0;
    background: var(--theme-bg-primary);
    border-radius: 10px;
    padding: 6px;
    line-height: 17.5px;
    text-align: center;
    color: var(--text-white);
    font-family: var(--font-g);
}

.edit {
    background-color: #1fcb4f !important;
    border-color: transparent !important;
}


.deleteKeywordBtn {
    background-color: #c80808 !important;
    border-radius: 10px !important;
    color: var(--text-white) !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

.swal-icon:first-child {
    margin-top: 0px;
    margin-bottom: 0px;
}

.swal-modal {
    border-radius: 10px;
    padding: 25px;
}

div:where(.swal2-icon) {
    border: none !important;
    margin: 10px auto 10px !important;
}

.swal2-actions {
    width: 100% !important;
}

.swal2-styled.swal2-cancel {
    font-family: var(--font-g) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    background: var(--btn-bg-gradient-red) !important;
    border-radius: 10px !important;
    border: 1px solid var(--border-gray-fr) !important;
    box-shadow: none !important;
    color: var(--text-black) !important;
    text-shadow: none !important;
    opacity: unset !important;
    width: 40% !important;
}

.swal2-confirm.swal2-styled {
    font-family: var(--font-g) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    background: var(--btn-bg-gradient-primary) !important;
    border-radius: 10px !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--text-white) !important;
    width: 40% !important;
}


.editBtn {
    padding: 3px 5px 5px 5px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    padding-left: 12px !important;
    padding-right: 6px !important;
    font-size: 12px !important;
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    margin-bottom: 0 !important;
}

.select2-container .select2-selection--multiple::-webkit-scrollbar {
    display: none !important;
}

.select2-container .select2-search--inline .select2-search__field {
    margin-left: 15px !important;
    margin-top: 0 !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    display: flex !important;
    padding: 0 !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple::-webkit-scrollbar {
    display: none !important;
}

.number_edit_btn,
.swal2-styled.swal2-deny,
.submitEditFormBtnEmail,
.updatePayment {
    background-color: #528dff !important;
    border-radius: 10px !important;
    outline: none !important;
    box-shadow: none !important;
    background-image: none !important;
    border-color: #528dff !important;
    color: var(--text-white);
}

.assignBudgetBtn,
.viewBudgetBtn .add-email {
    background-color: #ff4107 !important;
    border-color: transparent !important;
    border-radius: 10px !important;
}

.swal2-styled.swal2-deny,
.submitEditFormBtnEmail,
.edit,
.assignBudgetBtn,
.viewBudgetBtn {
    font-size: 16px !important;
}

.number_edit_btn {
    padding: 3px 5px 5px 5px !important;
}

/* new datatable start */
div.dt-container div.dt-layout-row {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
}

div.dt-container div.dt-layout-full {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #c8c8c8;
}

.dt-scroll {
    border-radius: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid #c8c8c8;
}

div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-start {
    display: flex;
    justify-content: end;
    margin: 0;
}

div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-end {
    display: flex;
    justify-content: start;
    margin: 0;
}

div.dt-container .dt-search input {
    border-radius: 10px;
}

div.dt-container .dt-input {
    border-radius: 10px;
}

.dt-length>label,
.dt-search>label {
    display: none;
}

table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
    position: absolute;
}

/* new datatable start */

/* div#DataTables_Table_0_wrapper .row {
    display: flex;
    flex-direction: row-reverse;
}

div#test_wrapper .row {
    display: flex;
    flex-direction: row-reverse;
}


.dataTables_wrapper .row {
    display: flex;
    flex-direction: row-reverse;
} */

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    border-right: none !important;
    top: 0px !important;
}

div.dataTables_wrapper div.dataTables_filter {
    text-align: left;
    float: left;
}

div.dataTables_wrapper div.dataTables_filter input[type="search"] {
    width: 312px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid #c8c8c8;
}

.dataTables_wrapper .dataTables_length {
    float: right !important;
}


div.dataTables_wrapper div.dataTables_info {
    float: right;
}


div.dataTables_wrapper div.dataTables_paginate {
    float: left;
}

.dataTables_wrapper .dataTables_length {
    float: right !important;
    font-size: 12px;
}


div.dataTables_wrapper div.dataTables_info {
    padding-top: 0.85em;
    white-space: nowrap;
    font-size: 13px;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination a {
    font-size: 12px !important;
}

.swal2-title {
    font-family: var(--font-g) !important;
    color: var(--text-black) !important;
    font-size: 24px !important;
    padding: 0 !important;
}

.swal2-html-container {
    font-family: var(--font-g) !important;
    margin: 10px 0 0 !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: var(--text-black) !important;
}

.swal2-icon {
    margin: 1.5em auto 0.6em !important;
}

.swal2-popup {
    border-radius: 10px !important;
    padding: 20px !important;
}

div#numberEdit input {
    border-radius: 10px;
    height: 44px;
    border: 1px solid #c8c8c8;
}

div#numberEdit .modal-body {
    padding: 30px 30px 20px;
}


p.modal_email,
a.userLink {
    color: #ff4107;
    font-size: 14px;
    font-weight: 500;
}

.number_list_wrapper {
    display: grid;
    grid-template-columns: auto auto auto;
    border-radius: 10px;
    border: 1px solid #c8c8c8;
    overflow: hidden;
}

.number_list_wrapper .list-group-item:last-child,
.number_list_wrapper .list-group-item:first-child {
    border-radius: 0;
}

.number_list_wrapper .list-group-item {
    border: 1px solid #c8c8c8;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin: 0 0 0 5px;
    padding: 0 !important;
    border-radius: 5px !important;
    overflow: unset !important;
    border: none !important;
    background: #f2f2f2 !important;
}

@media (max-width: 1024px) {
    .number_list_wrapper {
        grid-template-columns: auto auto;
    }
}

@media (max-width: 768px) {
    .number_list_wrapper {
        grid-template-columns: auto;
    }
}

@media (max-width: 425px) {
    .number_list_wrapper {
        grid-template-columns: 270px;
    }
}

div#modalForAssign .modal-body {
    padding: 15px 30px;
    font-family: var(--font-g);
}

.swal2-icon.swal2-warning {
    color: #ff4107;
    border-color: #ff4107;
}

.keywords_input_row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}

.keywords_input_row input.keyword {
    width: 312px;
}

.list-group-item:first-child,
.list-group-item:last-child {
    border-radius: 0;
}

.list-group-item {
    font-family: var(--font-g) !important;
}

.keywords-main .list-group {
    border-radius: 10px;
    overflow-x: hidden;
    overflow-y: scroll;
    box-shadow: none;
}



div#incomingNumbers button,
.keywords-main .keywords_col button {
    border: 0;
    border-radius: 0;
}

/* width */
div#incomingNumbers::-webkit-scrollbar,
.keywords_col::-webkit-scrollbar {
    width: 2px;
}

/* Track */
div#incomingNumbers::-webkit-scrollbar-track,
.keywords_col::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgb(224, 224, 224);
    border-radius: 10px;
}

/* Handle */
div#incomingNumbers::-webkit-scrollbar-thumb,
.keywords_col::-webkit-scrollbar-thumb {
    background: #ff4107;
    border-radius: 10px;
}

/* Handle on hover */
div#incomingNumbers::-webkit-scrollbar-thumb:hover,
.keywords_col::-webkit-scrollbar-thumb:hover {
    background: var(--btn-bg-primary);
}

.keywords-main .list-group-item:hover,
.keywords-main .list-group-item.active {
    background-color: var(--theme-bg-white);
    color: #ff4107;
    border: 0;
}

.list-group-item.active {
    background: var(--theme-bg-primary) !important;
    border-color: var(--border-primary) !important;
}

.btn-info:focus {
    box-shadow: 0 0 0 0.25rem transparent;
}

.card__content {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    padding: 10px;
    cursor: pointer;
}

.card__content span {
    border-radius: 0;
    padding: 0;
    text-transform: uppercase;
    font-size: 0.6em;
    margin: 0;
}

.card__content .card__title {
    position: relative;
    font-weight: 400;
    width: 100%;
    font-size: 1.2em;
    padding-right: 1rem;
    z-index: 2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 5px 0;
}

.card__description {
    font-size: 1em;
    margin: 0 0 30px 0;
}

.card__people {
    padding-top: 5px;
    display: flex;
    gap: 5px;
}

.card__people img {
    width: 25px;
    height: 25px;
    border-radius: 50%;
}

div.dataTables_wrapper div.dataTables_processing {
    background: var(--theme-bg-primary) !important;
    border-color: var(--border-primary) !important;
    border-radius: 10px !important;
    color: var(--text-white) !important;
    height: auto !important;
    z-index: 100 !important;
}

/* f-changes start */
.view-icon {
    color: var(--text-black);
    font-size: x-large;
    margin-right: 10px;
}

.view-icon:hover {
    color: var(--btn-bg-primary);
}

.download-icon {
    color: var(--text-black);
    font-size: x-large;
}

.download-icon:hover {
    color: var(--btn-bg-primary);
}

.edit-icon {
    color: var(--text-black);
    font-size: x-large;
}

.edit-icon:hover {
    color: #528dff;
}

.dlt-icon {
    color: var(--text-black);
    font-size: x-large;
}

.dlt-icon:hover {
    color: #c80808;
}

/* f-changes end */

.task-name {
    font-family: var(--font-g);
    font-weight: 400;
    font-size: 28px;
    color: #242424;
}

.task-t-d-a {
    padding: 10px;
    border-radius: 10px;
    background: var(--theme-bg-white);
    margin-bottom: 10px;
}

.attachment-box-group {
    display: flex;
    align-items: center;
    background: var(--theme-bg-white);
    border-radius: 4px;
    padding: 10px;
    margin: 0 !important;
}

.attachment-box-group-child {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 10px 0 0 !important;
    font-family: var(--font-g) !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    color: #b6b6b6 !important;
    cursor: pointer !important;
}

.file-limit {
    font-family: var(--font-g) !important;
    font-size: 12px !important;
    color: #b6b6b6 !important;
}

.cmnt-dv {
    margin-bottom: 10px;
    max-height: 600px;
    min-height: 400px;
    overflow: auto;
}

.add-file-btn {
    padding: 0 !important;
    border-radius: 50px !important;
    width: 35px !important;
    height: 35px !important;
    background: var(--btn-bg-primary) !important;
}

/* status bar style */

.taskCompleted>td:first-of-type::after {
    content: " ";
    width: 7px;
    height: 100%;
    background-color: #ababab;
    position: absolute;
    left: 0px;
    top: 0;
    border-radius: 0 15px 15px 0;
}

.deadLineCross>td:first-of-type::after {
    content: " ";
    width: 7px;
    height: 100%;
    background-color: #c80808;
    position: absolute;
    left: 0px;
    top: 0;
    border-radius: 0 15px 15px 0;
}

.deadLineAlmost>td:first-of-type::after {
    content: " ";
    width: 7px;
    height: 100%;
    background-color: #1fcb4f;
    position: absolute;
    left: 0px;
    top: 0;
    border-radius: 0 15px 15px 0;
}

.qaTaskCompleted>td:first-of-type::after {
    content: " ";
    width: 7px;
    height: 100%;
    background-color: #5c6671;
    position: absolute;
    left: 0px;
    top: 0;
    border-radius: 0 15px 15px 0;
}

.qaTaskRejected>td:first-of-type::after {
    content: " ";
    width: 7px;
    height: 100%;
    background-color: #f82d2d;
    position: absolute;
    left: 0px;
    top: 0;
    border-radius: 0 15px 15px 0;
}

.haveTime>td:first-of-type::after {
    content: " ";
    width: 7px;
    height: 100%;
    background-color: #528dff;
    position: absolute;
    left: 0px;
    top: 0;
    border-radius: 0 15px 15px 0;
}

.dtr-control::before {
    left: 10px !important;
}

.dtr-control {
    padding-left: 45px !important;
    position: relative;
}

/* status bar style */

.task-name-main {
    background: var(--theme-bg-white);
    padding: 16px;
    border-radius: 10px;
}

.action-btns-main {
    margin-top: 16px;
}

.comment-main {
    background: var(--theme-bg-white);
    padding: 16px;
    border-radius: 10px;
    margin: 16px 0;
}

.trix-button-group {
    display: flex !important;
    margin: 10px 0 10px 0 !important;
    border: 0 !important;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
    border-radius: 3px !important;
}

.trix-button {
    border-bottom: 0 !important;
}

.trix-button:not(:first-child) {
    border-left: 2px solid #ccc !important;
}

.trix-button-row {
    background: #edf1f3 !important;
    border-radius: 5px 5px 0 0;
}

trix-editor {
    border-top: 0 !important;
    border-radius: 0 0 5px 5px !important;
    border-color: #edf1f3 !important;
}

.pace-activity {
    display: none !important;
}

.list-group-item.border-bottom.createdBy,
.list-group-item.border-bottom.resPerson,
.list-group-item.border-bottom.participants,
.list-group-item.border-bottom.observers {
    border-top-color: var(--text-white);
}

span.select2.select2-container.select2-container--default {
    width: 100% !important;
}

.badge-info {
    color: var(--text-white);
    background-color: var(--theme-bg-primary) !important;
}


.dropdown-toggle::after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0 !important;
    border-bottom: 0;
    border-left: 0 !important;
}

.date-piker-icon {
    position: absolute;
    right: 25px;
    top: 16px;
    font-size: 20px;
    cursor: pointer;
}

.date-piker-icon-edit {
    position: absolute;
    right: 32px;
    top: 88px;
    font-size: 20px;
    cursor: pointer;
}

div>table.dataTable {
    margin: 0 !important;
    /* border-radius: 10px 10px 0px 0px; */
}


.dataTables_scroll {
    border: 1px solid #c8c8c8;
    border-radius: 10px;
    overflow: hidden;
}

.dataTables_wrapper.no-footer .dataTables_scrollBody {
    border-bottom: 0px !important;
}

.sorting_1 {
    position: relative !important;
}



.project-created-at {
    font-size: 10px;
    font-weight: 300;
    margin: 0 !important;
}

.project-deadline {
    font-size: 10px;
    font-weight: 300;
    margin: 0 !important;
}

.project-dates {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.task-description {
    max-height: 200px;
    overflow: auto;
}

.eBookTask-description {
    height: 200px;
    border-radius: 10px;
    padding: 6px 12px;
    color: #495057;
    font-size: 16px;
    overflow: auto;
}

.eBookTask-description:focus {
    color: #495057;
    background-color: var(--theme-bg-white);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.add-scroll {
    min-height: 450px;
    max-height: 500px;
    overflow: auto;
}

.statuses {
    margin-top: 20px;
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.statuses span {
    width: 11px;
    height: 11px;
    display: block;
    border-radius: 2px;
}

.statuses .green {
    background: #1fcb4f;
}

.statuses .purp {
    background: #528dff;
}

.statuses .red {
    background: #c80808;
}

.statuses .grey {
    background: #ababab;
}

.statuses .darkGrey {
    background: #5c6671;
}

.statuses .lightRed {
    background: #f82d2d;
}

.kanban-row {
    overflow-x: scroll;
    display: -webkit-box;
    height: calc(100vh - 187px);
}

.kanban-row::-webkit-scrollbar {
    width: 8px;
    height: 15px;
}

.kanban-row::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(128, 128, 128, 0.219);
    border-radius: 5px;
}

.kanban-row::-webkit-scrollbar-thumb {
    background: #323b3665;
    border-radius: 5px;
}

.kanban-cards {
    width: 352px;
}

.task-header {
    background-color: #fff;
    padding: 15px 30px;
    border-radius: 30px 30px 0 0;
}

.kanban-main-card {
    background-color: var(--theme-bg-white);
    box-shadow: rgba(182, 182, 182, 0.25) 0px 7px 18px 0px;
    border-radius: 10px;
    max-height: calc(100vh - 280px);
    overflow: auto;
    position: relative;
    min-height: 150px;
    border: solid 1px #cecece;
}

.kanban-main-card::-webkit-scrollbar {
    width: 8px;
}

.kanban-main-card::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(128, 128, 128, 0.219);
    border-radius: 5px;
}

.kanban-main-card::-webkit-scrollbar-thumb {
    background: #323b3665;
    border-radius: 5px;
}

.kanban-inner-header {
    position: sticky;
    width: 100%;
    top: 0;
    background-color: var(--theme-bg-white);
    z-index: 8;
}

.kanban-inner-bottom {
    position: sticky;
    width: 100%;
    bottom: 0;
    background-color: #f3f4f6;
    cursor: pointer;
}

.kanban-main-card-inner {
    background-color: var(--theme-bg-white);
    box-shadow: rgba(185, 185, 185, 0.25) 0px 4px 4px 0px;
    box-shadow: var(--shadow-black);
    border-radius: 10px;
    margin: auto 16px;
    margin-bottom: auto;
    padding: 13px;
    padding-top: 13px;
    padding-top: 5px;
    border: solid 1px #f0e0e0;
}

.kanban-main-card-inner p {
    color: var(--text-white);
    font-weight: 500;
    font-size: 12px;
    cursor: pointer;
    text-transform: capitalize;
}

.openSubTaskMain>p {
    color: var(--text-black);
}

.add-card {
    color: var(--text-black);
    font-size: 14px;
    margin: 0;
}

.drop-main .dropdown-menu.show {
    left: -175px !important;
    width: 200px;
    height: 200px;
    overflow: auto;
}

.cat_type {
    padding: 5px;
    color: #000;
}

.active_type {
    background: #ff4107;
    color: var(--text-white) !important;
}

.brand-select .select2-selection--single {
    height: 44px !important;
    border: 1px solid var(--border-gray) !important;
    border-radius: 10px !important;
}

.brand-select .select2-selection--single:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--inv-primary), var(--opac-25)) !important;
}

.brand-select .select2-selection__rendered {
    line-height: 34px !important;
}

/* Outsource status classes Start*/
.os-cancelled {
    background: var(--text-red-delete);
    color: #000;
    padding: 4px 8px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
}

.os-in-review {
    background: #efeb25;
    color: #000;
    padding: 4px 8px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
}

.os-hold {
    background: #ff4107;
    color: var(--text-white);
    padding: 4px 8px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
}

.os-approved {
    background: #528dff;
    color: var(--text-white);
    padding: 4px 8px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
}

.os-paid {
    background: #63c263;
    color: var(--text-white);
    padding: 4px 8px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
}

/* Outsource status classes End*/

.close,
.closeBtn {
    font-family: var(--font-g) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    background: var(--btn-bg-gradient-red) !important;
    border-radius: 10px !important;
    border: 1px solid var(--border-gray) !important;
    box-shadow: none !important;
    color: var(--text-black) !important;
    padding: 10px 12px !important;
    text-shadow: none !important;
    opacity: unset !important;
}

.close:focus {
    box-shadow: unset !important;
}

.closeUser {
    font-family: var(--font-g) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    background: var(--btn-bg-gradient-red) !important;
    border-radius: 10px !important;
    border: 1px solid var(--border-gray) !important;
    box-shadow: none !important;
    color: var(--text-black) !important;
    padding: 10px 12px !important;
    text-shadow: none !important;
    opacity: unset !important;
}

.closeUser:focus {
    box-shadow: unset !important;
}

.closeLead {
    font-family: var(--font-g) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    background: var(--btn-bg-gradient-red) !important;
    border-radius: 10px !important;
    border: 1px solid var(--border-gray) !important;
    box-shadow: none !important;
    color: var(--text-black) !important;
    padding: 10px 12px !important;
    text-shadow: none !important;
    opacity: unset !important;
}

.closeLead:focus {
    box-shadow: unset !important;
}

.btn:focus {
    box-shadow: none !important;
}

.submitGlobalBtn,
.btnCustmNext,
.btnCustmPrev {
    font-family: var(--font-g) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    background: var(--btn-bg-gradient-primary) !important;
    border-radius: 10px !important;
    border: 1px solid var(--border-gray) !important;
    box-shadow: none !important;
    color: var(--text-white) !important;
    padding: 6px 12px !important;
    margin-right: 10px;
    min-width: 120px;
}

.btnCustmNext,
.btnCustmPrev {
    min-width: 1px !important;
    width: 100px !important;
}

.submitGlobalBtn:focus,
.btnCustmNext:focus,
.btnCustmPrev:focus {
    box-shadow: var(--shadow-btn-orange) !important;
}

.btn-width {
    width: 48%;
}

.globalBtnBlack {
    background: var(--btn-bg-black);
    border-radius: 10px;
    color: var(--text-white) !important;
    border: 1px solid var(--border-black);
    font-family: var(--font-g) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    margin-right: 10px;
}

.blackBtnSmall {
    background: var(--btn-bg-black);
    border-radius: 5px;
    padding: 4px 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-white);
    border-color: var(--border-black);
    font-family: var(--font-g) !important;
}

.grayBtnSmall {
    background: var(--btn-bg-gray);
    border-radius: 5px;
    padding: 4px 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-gray);
    border-color: var(--border-gray);
    font-family: var(--font-g) !important;
}

.globalBtnOrange {
    background: var(--breadcrumb-bg) !important;
    border: none !important;
    border-radius: 10px !important;
    color: var(--text-white) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    font-family: var(--font-g) !important;
    min-width: 120px;
    min-height: 44px;
    margin-left: 10px;
}

a.globalBtnOrange {
    display: flex;
    justify-content: center;
    align-items: center;
}

td div button {
    background: transparent !important;
}

.globalBtnOrange>.bi {
    color: var(--icon-white);
    font-size: 15px;
}

.table>thead {
    background: var(--breadcrumb-bg);
    color: var(--text-white);
}

.modalAlignment {
    justify-content: center;
    align-items: center;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: 0.275rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-black);
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef00 !important;
    border: none !important;
    border-radius: 5px 0 0 5px;
}

.consultant-dd {
    background: var(--gradient-fr) !important;
    border-radius: 10px !important;
    color: #fff !important;
    border-color: var(--border-primary) !important;
    padding: 4px 10px !important;
    font-size: 14px !important;
}

.consultant-dd>a {
    text-decoration: none !important;
    font-size: 14px !important;
    color: var(--text-white) !important;
}

.consultant-dd>a>.bi {
    font-size: 16px !important;
    margin-left: 10px !important;
}

.extension-internal-dd {
    background: var(--gradient-fr) !important;
    border-radius: 10px !important;
    color: #fff !important;
    border-color: var(--border-primary) !important;
    padding: 4px 10px !important;
    font-size: 14px !important;
}

.extension-internal-dd>a {
    text-decoration: none !important;
    font-size: 14px !important;
    color: var(--text-white) !important;
}

.extension-internal-dd>a>.bi {
    font-size: 16px !important;
    margin-left: 10px !important;
}

.ticket-dd {
    background: var(--feedreed-color) !important;
    border-radius: 0px 10px 10px 0px !important;
    color: #fff !important;
    border-color: var(--feedreed-color) !important;
    padding: 4px 10px !important;
}

.ticket-dd>a>.bi {
    font-size: 16px !important;
}

.createTicketBtn {
    background: var(--gradient-fr) !important;
    border-radius: 10px 0px 0px 10px !important;
    color: #fff !important;
    border-color: var(--border-primary) !important;
    padding: 4px 10px !important;
    font-size: 14px !important;
}

.ticketMain {
    display: flex;
}

.buttons-print {
    display: none;
}

.buttons-colvis {
    display: none;
}

.dt-buttons {
    display: none !important;
}

.c-width {
    border-radius: 10px !important;
}

.c-width[data-bs-popper] {
    min-width: 280px !important;
    height: 400px;
    overflow-y: auto;
}

.extension-custom-width {
    min-width: 500px !important;
    max-height: 400px;
    overflow: auto;
    border-radius: 20px !important;
    padding: 15px !important;
}

.consultant-custom-width {
    min-width: 500px !important;
    max-height: 400px;
    overflow: auto;
    border-radius: 20px !important;
    padding: 15px !important;
}

#consultantTable_filter,
#extensionTable_filter {
    margin: 0 !important;
}

#consultantTable_filter>label>input,
#extensionTable_filter>label>input {
    margin: 0 !important;
    border-radius: 20px !important;
    width: 100%;
}

.ticket-history-tab {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cr-download-btn {
    margin-bottom: 18px;
    background: var(--text-primary);
    width: 35px;
    height: 35px;
    border-radius: 50px;
    color: var(--text-white);
    display: flex;
    justify-content: center;
    align-items: center;
}

.cr-download-btn:hover {
    color: var(--text-white);
}

.custom-descripton {
    height: 200px;
    border-radius: 10px;
    padding: 6px 12px;
    color: #495057;
    font-size: 16px;
    overflow: auto;
    box-shadow: var(--shadow-black);
}

.custom-descripton:focus {
    color: #495057;
    background-color: var(--theme-bg-white);
    outline: 0;
    box-shadow: var(--shadow-btn-orange);
}

table tbody tr td {
    border-bottom: none !important;
}

.add-file-btn-project {
    width: 30px;
    height: 30px;
    border: 1px solid var(--btn-bg-primary);
    border-radius: 50px;
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    background: var(--btn-bg-primary);
    margin: 0px !important;
}

.noti-box {
    margin-right: -3px;
    border: none;
    border-radius: 50px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 999;
    top: 0;
    right: 0;
    background-color: var(--theme-bg-white);
    overflow-x: hidden;
    overflow-y: auto;
    padding-top: 10px;
    transition: 0.5s;
    border-left: solid 1px #ccc;
}

/* The navigation menu links */
.sidenav a {
    text-decoration: none;
    font-size: 14px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
    color: #000;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    font-size: 36px;
}

.logout-icon-p {
    width: 30px;
    height: 30px;
    border-radius: 50px;
    background: var(--theme-bg-lt-primary);
    display: flex;
    justify-content: center;
    align-items: center;
}

.bx {
    color: var(--icon-primary) !important;
}

.bi {
    font-size: 20px;
    color: #622e92;
}

.upload_dropZone {
    color: var(--text-primary);
    background-color: var(--colorPrimaryPale, --theme-bg-lt-primary);
    outline: 2px dashed var(--border-primary, --border-primary);
    outline-offset: -12px;
    transition: outline-offset 0.2s ease-out, outline-color 0.3s ease-in-out,
        background-color 0.2s ease-out;
    border-radius: 30px;
}

.form-check-input:checked {
    background-color: var(--theme-bg-primary);
    border-color: var(--theme-bg-primary);
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--inv-primary), var(--opac-25));
}

.svg-class svg {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.svg-class path {
    fill: var(--icon-primary);
}

.svg-class path:nth-child(2) {
    fill: var(--icon-secondary);
}

.svg-class-stroke svg {
    width: 20px;
    height: 20px;
}

.svg-class-stroke path {
    stroke: var(--icon-primary);
}


.buttons-print {
    display: none !important;
}

.buttons-colvis {
    display: none !important;
}

.rightClose {
    position: absolute;
    right: 12px;
}

.hold-call-btn i {
    font-size: 42px;
    color: #dc4d4d;
}

.unhold-call-btn i {
    font-size: 42px;
    color: #4984de;
}

.mute-call-btn i {
    font-size: 42px;
    color: #dc4d4d;
}

.unmute-call-btn i {
    font-size: 42px;
    color: #4984de;
}

.minmize-call-btn {
    font-size: 40px;
    position: absolute;
    right: 10px;
    top: 10px;
}

.maximize-call-btn {
    font-size: 40px;
    position: absolute;
    right: 10px;
    top: 10px;
}

#draggable-call {
    z-index: 999999;
    background: #f5f6fb;
    width: 250px;
    height: 200px;
    position: absolute;
    right: 10px;
    top: 20px;
    border-radius: 20px;
    padding: 20px;
    box-shadow: rgb(0 0 0 / 10%) 0px 4px 12px;
}

.avatar-call {
    width: 30%;
    margin: 0 auto;
}

.caller-no {
    margin-top: 10px;
    font-size: 18px;
}



.notification-header {
    background: var(--theme-bg-white);
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 15px 15px 0 0;
}

.view-all {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #dee2e6 !important;
}

.notification-text {
    font-family: var(--font-g);
    font-weight: 500;
    font-size: 16px;
    color: #181818;
}

.mark-as-read {
    font-family: var(--font-g);
    font-weight: 500;
    font-size: 12px;
    color: var(--text-black);
    cursor: pointer;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.read-more-text {
    word-wrap: break-word;
    height: 150px;
    overflow-y: auto;
}

.readMore {
    color: #ff4107;
}



.nav-user-img {
    width: 37px;
    height: 37px;
}

.BMSide:hover {
    text-decoration: none;
    color: #818181 !important;
}

.BMSide {
    background: #f5f5f5;
    margin-bottom: 4px;
    border-radius: 10px;
}

.BMItems {
    width: 90%;
}

.searchClose .close-btn {
    position: relative;
    left: -6px;
    top: -8px;
}

.dropdown-menu[data-bs-popper] {
    top: 120% !important;
}

.text-blink {
    color: #006fff;
}

.wire-fields {
    display: none;
}

.payment_account-main {
    display: none;
}

.payment_account-main .select2-container {
    width: 100% !important;
}

.modalTaskClose {
    font-weight: 400 !important;
    background: var(--btn-bg-primary) !important;
    border-radius: 50px 0 0 50px !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--text-white) !important;
    padding: 10px 12px !important;
    text-shadow: none !important;
    opacity: unset !important;
    position: absolute;
    left: -36px;
    top: 25px;
}

.modalTaskClose>i {
    color: var(--icon-white);
    font-size: 16px !important;
}

.refresh-btn {
    position: absolute;
    left: -37px;
    top: 66px;
    background: var(--btn-bg-primary);
    padding: 0px 3px;
    border-radius: 50px 0 0 50px !important;
    color: var(--text-white) !important;
    opacity: 1.5 !important;
    pointer-events: visible;
    width: 40px;
    height: 35px;
    border: none;
    cursor: pointer;
}

.refresh-btn>i {
    font-size: 20px !important;
    color: var(--icon-white);
}

.bigFile {
    position: absolute;
    left: -37px;
    top: 106px !important;
    background: var(--btn-bg-primary);
    padding: 0px 3px;
    border-radius: 50px 0 0 50px !important;
    color: #fff !important;
    font-size: 19px !important;
    opacity: 1.5 !important;
    pointer-events: visible;
    width: 40px;
    height: 35px;
    border-color: transparent;
    cursor: pointer;
}

.bigFile>i {
    font-size: 18px !important;
    color: var(--icon-white);
}

div.dataTables_wrapper div.dataTables_length select {
    height: 33px !important;
}

.keep-open {
    border-radius: 15px !important;
}

.dt-buttons {
    display: none;
}

.btn-transparent {
    border: none;
    padding: 0;
    background: none;
}

.btn-transparent:hover {
    color: var(--text-black);
}

.positionFixed {
    position: fixed !important;
}

.claimLead {
    font-size: 14px !important;
    font-weight: 500 !important;
    margin: 5px 0;
    background: var(--btn-bg-primary);
    border-radius: 10px !important;
    padding: 5px !important;
    text-align: center;
    color: var(--text-black) !important;
    width: 100%;
}



.kanban-refresh {
    background: var(--theme-bg-lt-primary);
    border-radius: 4px;
    cursor: pointer;
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}


.globalBtnOrange>.bi {
    color: var(--text-white);
}

.fireIconP {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

/* css for chat aplication widget code starts */
/*--------------------
Mixins
--------------------*/

@mixin center {
    position: relative;
}

@mixin ball {
    @include center;
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #888;
    z-index: 2;
    margin-top: 4px;
    animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
}

/*--------------------
  Body
  --------------------*/

/*--------------------
  Chat
  --------------------*/

.chat {
    width: 100%;
    height: calc(100% - 15px);
    z-index: 10;
    overflow: hidden;
    background: transparent;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

/*--------------------
  Chat Title
  --------------------*/

.chat-title {
    flex: 0 1 45px;
    position: relative;
    z-index: 2;
    width: 100%;
    border-bottom: 1px solid #ccc;
    color: #777;
    padding-bottom: 5px;
    background-color: #fff;
    text-transform: uppercase;
    text-align: center;
}



/*--------------------
  Messages
  --------------------*/
.messages-content {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 10px;
}

.message {
    clear: both;
    float: left;
    padding: 6px 10px 7px;
    -webkit-border-radius: 20px 20px 20px 0;
    -moz-border-radius: 20px 20px 20px 0;
    border-radius: 20px 20px 20px 0;
    background: #eee;
    margin: 8px 0;
    font-size: 14px;
    line-height: 1.4;
    border: 1px solid #ccc;
}

.messages {
    flex: 1 1 auto;
    overflow: hidden;
    width: 100%;
}

.timestamp {
    position: absolute;
    bottom: -15px;
    font-size: 10px;
    color: #555;
    right: 30px;
}

.checkmark-sent-delivered {
    position: absolute;
    bottom: -15px;
    right: 10px;
    font-size: 12px;
    color: #999;
}

.checkmark-read {
    color: blue;
    position: absolute;
    bottom: -15px;
    right: 16px;
    font-size: 12px;
}



.message-personal {
    width: auto;
    max-width: 100%;
    word-wrap: break-word;
    float: right;
    text-align: right;
    background: #fff;
    border: 1px solid #ccc;
    -webkit-border-radius: 20px 20px 0 20px;
    -moz-border-radius: 20px 20px 0 20px;
    border-radius: 20px 20px 0 20px;
}



/*--------------------
  Message Box
  --------------------*/

.message-input {
    background: none;
    border: none;
    outline: none !important;
    resize: none;
    font-size: 15px;
    margin: 0;
    padding-right: 20px;
    color: var(--text-black);
    width: 100%;
    height: 34px;
}

.message-box {
    width: 96%;
    background: #fff;
    margin: 2px auto;
    padding: 10px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

textarea:focus:-webkit-placeholder {
    color: transparent;
}

.message-submit {
    color: #4a90e2;
    border: none;
    background: #fff;
    font-size: 12px;
    text-transform: uppercase;
    border-radius: 5px;
    outline: none !important;
    transition: 0.2s ease;
    cursor: pointer;
}

/*--------------------
  Custom Srollbar
  --------------------*/

.mCSB_scrollTools {
    margin: 1px -3px 1px 0;
    opacity: 0;
}

.mCSB_inside>.mCSB_container {
    margin-right: 0px;
    padding: 0 10px;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/*--------------------
  Bounce
  --------------------*/

@keyframes bounce {
    0% {
        transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    4.7% {
        transform: matrix3d(0.45,
                0,
                0,
                0,
                0,
                0.45,
                0,
                0,
                0,
                0,
                1,
                0,
                0,
                0,
                0,
                1);
    }

    9.41% {
        transform: matrix3d(0.883,
                0,
                0,
                0,
                0,
                0.883,
                0,
                0,
                0,
                0,
                1,
                0,
                0,
                0,
                0,
                1);
    }

    14.11% {
        transform: matrix3d(1.141,
                0,
                0,
                0,
                0,
                1.141,
                0,
                0,
                0,
                0,
                1,
                0,
                0,
                0,
                0,
                1);
    }

    18.72% {
        transform: matrix3d(1.212,
                0,
                0,
                0,
                0,
                1.212,
                0,
                0,
                0,
                0,
                1,
                0,
                0,
                0,
                0,
                1);
    }

    24.32% {
        transform: matrix3d(1.151,
                0,
                0,
                0,
                0,
                1.151,
                0,
                0,
                0,
                0,
                1,
                0,
                0,
                0,
                0,
                1);
    }

    29.93% {
        transform: matrix3d(1.048,
                0,
                0,
                0,
                0,
                1.048,
                0,
                0,
                0,
                0,
                1,
                0,
                0,
                0,
                0,
                1);
    }

    35.54% {
        transform: matrix3d(0.979,
                0,
                0,
                0,
                0,
                0.979,
                0,
                0,
                0,
                0,
                1,
                0,
                0,
                0,
                0,
                1);
    }

    41.04% {
        transform: matrix3d(0.961,
                0,
                0,
                0,
                0,
                0.961,
                0,
                0,
                0,
                0,
                1,
                0,
                0,
                0,
                0,
                1);
    }

    52.15% {
        transform: matrix3d(0.991,
                0,
                0,
                0,
                0,
                0.991,
                0,
                0,
                0,
                0,
                1,
                0,
                0,
                0,
                0,
                1);
    }

    63.26% {
        transform: matrix3d(1.007,
                0,
                0,
                0,
                0,
                1.007,
                0,
                0,
                0,
                0,
                1,
                0,
                0,
                0,
                0,
                1);
    }

    85.49% {
        transform: matrix3d(0.999,
                0,
                0,
                0,
                0,
                0.999,
                0,
                0,
                0,
                0,
                1,
                0,
                0,
                0,
                0,
                1);
    }

    100% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
}

@keyframes ball {
    from {
        transform: translateY(0) scaleY(0.8);
    }

    to {
        transform: translateY(-10px);
    }
}

.avenue-messenger {
    opacity: 1;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    height: calc(100% - 60px) !important;
    max-height: 660px !important;
    min-height: 220px !important;
    width: 460px;
    background: rgba(255, 255, 255, 0.9);
    position: fixed;
    right: 20px;
    bottom: 20px;
    margin: auto;
    z-index: 10;
    -webkit-transition: 0.3s all ease-out 0.1s, transform 0.2s ease-in;
    -moz-transition: 0.3s all ease-out 0.1s, transform 0.2s ease-in;
    border: 2px solid var(--border-primary);
}

.avenue-messenger div.agent-face {
    position: absolute;
    left: 0;
    top: -50px;
    right: 0;
    margin: auto;
    width: 101px;
    height: 50px;
    background: transparent;
    z-index: 12;
}



.circle {
    display: block;
    width: 80px;
    height: 80px;
    margin: 1em auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-border-radius: 99em;
    -moz-border-radius: 99em;
    border-radius: 99em;
    border: 2px solid #fff;

}

.contact-icon .circle:hover {
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    transition: 0.2s all ease-out 0.2s;
    -webkit-transition: 0.2s all ease-out 0.2s;
    -moz-transition: 0.2s all ease-out 0.2s;
}

.arrow_box:after {
    border-color: rgba(255, 255, 255, 0);
    border-left-color: #fff;
    border-width: 5px;
    margin-top: -5px;
}

.arrow_box {
    position: relative;
    background: #fff;
    border: 1px solid #4a90e2;
}

.arrow_box:after,
.arrow_box:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}



.menu .items span {
    color: #111;
    z-index: 12;
    font-size: 14px;
    text-align: center;
    position: absolute;
    right: 0;
    top: 40px;
    height: 86px;
    line-height: 40px;
    background: #fff;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    width: 48px;
    opacity: 0;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    transition: 0.3s all ease-in-out;
    -webkit-transition: 0.3s all ease-in-out;
    -moz-transition: 0.3s all ease-in-out;
}

.menu .button {
    font-size: 30px;

    z-index: 12;
    text-align: right;
    color: #333;
    content: "...";
    display: block;
    width: 48px;
    line-height: 25px;
    height: 40px;
    border-top-right-radius: 20px;
    position: absolute;
    right: 0;
    padding-right: 10px;
    cursor: pointer;
    transition: 0.3s all ease-in-out;
    -webkit-transition: 0.3s all ease-in-out;
    -moz-transition: 0.3s all ease-in-out;
}

.menu .button.active {
    background: #ccc;
}



.menu .items span.active {
    opacity: 1;

}

.menu .items a {
    color: #111;
    text-decoration: none;
}

.menu .items a:hover {
    color: #777;
}

@media only screen and (max-device-width: 667px),
screen and (max-width: 450px) {
    .avenue-messenger {
        z-index: 2147483001 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        -webkit-border-radius: 0 !important;
        -moz-border-radius: 0 !important;
        border-radius: 0 !important;
        background: #fff;
    }

    .avenue-messenger div.agent-face {
        top: -10px !important;
    }

    .chat {
        -webkit-border-radius: 0 !important;
        -moz-border-radius: 0 !important;
        border-radius: 0 !important;
        max-height: initial !important;
    }

    .chat-title {
        padding: 20px 20px 15px 10px !important;
        text-align: left;
    }

    .circle {
        width: 80px;
        height: 80px;
        border: 1px solid #fff;
    }

    .menu .button {
        border-top-right-radius: 0;
    }
}

@media only screen and (min-device-width: 667px) {
    div.half {
        margin: auto;
        width: 80px;
        height: 40px;
        background-color: #fff;
        border-top-left-radius: 60px;
        border-top-right-radius: 60px;

        border-bottom: 0;
        box-shadow: 1px 4px 20px rgba(22, 20, 19, 0.6);
        -webkit-box-shadow: 1px 4px 20px rgba(22, 20, 19, 0.6);
        -moz-box-shadow: 1px 4px 20px rgba(22, 20, 19, 0.6);
    }
}

/* css for chat aplication widget code ends */

.searchClose {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 0 10px;
}

.user-listing {
    padding: 8px;
    max-height: 90%;
    overflow: auto;
    margin-bottom: 10px;
    height: calc(100vh - 140px) !important;
}

#chatLoader {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

/* Group Chat CSS Start */
.deteteGroupBtn {
    color: var(--text-red-delete) !important;
    font-size: 14px;
    font-weight: 500;
}

.removeMemberBtn {
    color: var(--text-red-delete) !important;
    font-size: 14px;
    font-weight: 500;
}

.groupMemberLabel {
    color: var(--text-black) !important;
    font-size: 16px;
    font-weight: 500;
}

.addNewMemberBtn {
    color: var(--text-primary) !important;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.addNewMemberMain {
    border-radius: 10px;
    border: 1px solid var(--border-gray);
    padding: 10px;
    box-shadow: var(--shadow-black);
}

.memberName {
    color: var(--text-black) !important;
    font-size: 16px;
    font-weight: 500;
}

.seletedMembersTab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.memberDetails {
    display: flex;
    align-items: center;
}

.memberImg {
    width: 40px;
    height: 40px;
    margin-right: 10px;
}



.selectedMemberBox {
    height: 200px;
    padding: 5px;
    overflow: auto;
}

.memberNameBox {
    margin-bottom: 5px;
    display: flex;
}

.memberNameText {
    color: var(--text-primary) !important;
    font-size: 14px;
    font-weight: 500;
    background: var(--theme-bg-white);
    border: 1px solid var(--border-gray);
    border-radius: 10px;
    padding: 2px 10px;
}

/* avatar overlaping start */
.avatarOverlaping {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.avatar-li {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--border-primary);
    display: inline-block;
    position: relative;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
    -webkit-transition: 0.2s ease;
    transition: 0.2s ease;
    overflow: hidden;
}

.seeGroupText {
    color: var(--text-gray) !important;
    font-size: 12px;
    font-weight: 500;
}

.avatar-li:nth-child(n + 2) {
    margin-left: -20px;
}

/* avatar overlaping end */
/* Group Chat CSS End */
.ajaxLoader {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(211, 211, 211, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    z-index: 1;
    top: 0;
    left: 0;
}

.chatInfoDropDownBtn {
    margin: 0 5px;
}

.msgStatus {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-black);
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.msgStatus>.bi {
    font-size: 16px;
}

.dropDownInfoCard {
    padding: 10px;
    box-shadow: var(--shadow-black);
    background: var(--theme-bg-white);
    border-radius: 15px;
    border: none;
    top: 4px !important;
    min-width: 350px;
}

.seenCard {
    box-shadow: var(--shadow-black);
    border-radius: 5px;
    margin-bottom: 10px;
    padding: 8px;
}

.infoMembersTab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.userDetails {
    display: flex;
    align-items: center;
}

.infoMemberImg {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.infoUserName {
    color: var(--text-black) !important;
    font-size: 12px;
    font-weight: 500;
}

.dateTime {
    color: var(--text-black) !important;
    font-size: 10px;
    font-weight: 500;
}

.markImgDiv {
    width: 15px;
    height: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 6px;
}

.chatActionDropDownBtn {
    margin: 0 5px;
}

.dropDownActionCard {
    padding: 10px;
    box-shadow: var(--shadow-black);
    background: var(--theme-bg-white);
    border-radius: 15px;
    border: none;
}

.actionTitle {
    color: var(--text-black) !important;
    font-size: 14px;
    font-weight: 500;
}

.actionIconDiv {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.actionMain {
    display: flex;
    align-items: center;
    box-shadow: var(--shadow-black);
    border-radius: 5px;
    margin-bottom: 5px;
    padding: 8px;
    cursor: pointer;
}

.replyBox {
    border-radius: 10px;
    margin-bottom: 5px;
    background: var(--theme-bg-white);
    padding: 10px;
}

.replayNameText {
    color: var(--text-primary) !important;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 5px;
}

.replyChatText {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-black);
}

.replayNameTextLeft {
    color: var(--text-white) !important;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 5px;
}

.replyChatTextLeft {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-white);
}

/* .deletedContent { */
.deletedContent {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    background: var(--theme-bg-white);
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 5px;
}

.deletedContentText {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-gray);
    font-style: italic;
}

.form-group div strong {
    font-weight: bold;
}

.form-group ul {
    list-style: disc;
    margin-left: 10px;
}

/* Small chat window start */
.smallChatTextBox {
    max-width: 70%;
    margin-bottom: 20px;
}

.smallChatRight {
    display: flex;
    flex-direction: row-reverse;
}

.smallMChat {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 5px;
    background: var(--theme-bg-primary);
}

.smallReplyBox {
    border-radius: 10px;
    margin-bottom: 10px;
    background: var(--theme-bg-white);
    padding: 10px;
}

.smallReplayNameText {
    color: var(--text-primary) !important;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 5px;
}

.smallReplyChatText {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-black);
}

.smallMChatText {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-white);
}

.close-pop>.bi {
    font-size: 14px;
    color: var(--text-white);
}

/* Small chat window end */
/* disable trix tool bar start*/
.chat-text-area #trix-toolbar-1,
.chat-text-area #trix-toolbar-2 {
    display: none;
}

/* disable trix tool bar end */

/* Email Sidebar start*/
.email-side-options {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: var(--shadow-black) !important;
    border-radius: 10px !important;
    background: var(--theme-bg-white) !important;
    padding: 10px !important;
    width: 100% !important;
}

.email-side-options:hover {
    color: var(--text-black);
}

.selectBorderNone {
    border: none !important;
}

.selectBorderNone:focus {
    border: none !important;
    box-shadow: none !important;
}

.emailUnreadCount,
.emailUnreadCounts {
    background: var(--theme-bg-lt-primary);
    border-radius: 10px;
    margin-right: 10px;
}

.emailUnreadCountText {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    padding: 2px 8px;
}

.userEmail {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-black);
    width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: start;
}

.emailCollapseMain {
    border: none;
}

.cardCustom {
    padding: 15px 10px 0px 10px !important;
    border-radius: 0 0 10px 10px !important;
    border: none !important;
    box-shadow: var(--shadow-black) !important;
}

.newItems {
    margin-bottom: 10px !important;
}

.cardCustomMain {
    border: none !important;
    margin-bottom: 10px !important;
    border-radius: 10px !important;
}

.cardHeaderCustom {
    border-bottom: none !important;
    border-radius: 10px !important;
}

.folderCustomMain {
    border: none !important;
    margin-bottom: 10px !important;
    border-radius: 0px !important;
    box-shadow: none !important;
}

.folder-side-options {
    display: flex !important;
    align-items: center !important;
    box-shadow: none !important;
    border-radius: 0px !important;
    background: var(--theme-bg-white) !important;
    padding: 10px !important;
    width: 100% !important;
}

.folder-side-options:hover {
    color: var(--text-black);
}


.CC-BCC-main {
    display: flex !important;
    border: 1px solid var(--border-gray);
    border-radius: 10px;
    background: var(--theme-bg-white);
    padding: 0 !important;
}



.btn-cc {
    text-decoration: underline;
    cursor: pointer;
    background: var(--btn-bg-white);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
}

.btn-bcc {
    text-decoration: underline;
    cursor: pointer;
    background: var(--btn-bg-white);
    border-radius: 10px;
    margin-right: 10px;
    font-size: 12px;
    font-weight: 500;
}


.CC-BCC-main .select2-container--default .select2-selection--multiple {
    border: none !important;
    box-shadow: none !important;
}

.CC-BCC-main .select2-container .select2-search--inline .select2-search__field {
    margin: 0 !important;
}


.message-content {
    border: 2px solid var(--border-gray);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
}

.custom-accordion {
    height: calc(100% - 105px);
    overflow: auto;
    padding: 0 5px;
}

.statusBadge {
    background: var(--theme-bg-primary);
    border-radius: 5px;
    padding: 3px 6px;
    font-size: 12px;
    color: var(--text-white);
    position: absolute;
    right: 10px;
    z-index: 1;
    top: 68%;
}

.statusBadgeSuccess {
    background: var(--theme-bg-green);
    border-radius: 5px;
    padding: 3px 6px;
    font-size: 12px;
    color: var(--text-white);
    position: absolute;
    right: 10px;
    z-index: 1;
    top: 68%;

}

.statusBadgeFailed {
    background: indianred;
    border-radius: 5px;
    padding: 3px 6px;
    font-size: 12px;
    color: var(--text-white);
    position: absolute;
    right: 10px;
    z-index: 1;
    top: 68%;
    cursor: pointer;
}


.statusBadgeFailedRetry {
    background: lightblue;
    border-radius: 5px;
    padding: 3px 6px;
    font-size: 12px;
    color: var(--text-white);
}

/* email invite start */
.emailInviteMain {
    width: 697px;
    height: 691px;
    background-image: url(../images/emailTampBG.png);
    background-repeat: no-repeat;
    box-shadow: var(--shadow-black);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.downloadTextHeading {
    font-size: 38px;
    font-family: var(--font-g);
    font-weight: 800;
    color: var(--text-white);
    line-height: 47.88px;
    margin-bottom: 20px;
    width: 466px;
}

.downloadText {
    font-size: 14px;
    font-family: var(--font-g);
    font-weight: 600;
    color: var(--text-white);
    line-height: 17.64px;
    width: 332px;
    margin: 0;
}

.featuresMain {
    padding: 30px;
}

.featuresHeading {
    font-size: 34px;
    font-family: var(--font-g);
    font-weight: 500;
    color: var(--text-black);
    line-height: 42.84px;
    margin: 0;
}

.listBox {
    display: flex;
    align-items: center;
}

.listIconDiv {
    width: 15px;
    height: 15px;
    margin-right: 10px;
    display: flex;
}

.listIconDiv>img {
    width: 100%;
    height: 100%;
}

.featuresText {
    font-size: 12px;
    font-family: var(--font-g);
    font-weight: 400;
    color: var(--text-black);
    line-height: 36px;
    margin: 0;
}

.downloadHeading {
    font-size: 16px;
    font-family: var(--font-g);
    font-weight: 800;
    color: var(--text-black);
    line-height: 20.16px;
    margin: 0;
    margin-bottom: 10px;
}

.appPlayStoreMain {
    display: flex;
}

.downloadMain {
    margin-top: 35px;
}

.playStore {
    width: 135px;
    height: 44px;
}

.playStore>img {
    width: 100%;
}

.appStore {
    width: 135px;
    height: 44px;
    margin-right: 10px;
}

.appStore>img {
    width: 100%;
}


/* email invite end */

.closeOSModal {
    font-family: var(--font-g) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    background: var(--btn-bg-gradient-red) !important;
    border-radius: 10px !important;
    border: 1px solid var(--border-gray) !important;
    box-shadow: none !important;
    color: var(--text-black) !important;
    text-shadow: none !important;
    opacity: unset !important;
}

.timeLineHeading {
    font-family: var(--font-g);
    font-size: 22px;
    font-weight: 500;
    color: var(--text-black);
}

.timeLineMonths {
    font-family: var(--font-g);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-gray);
    margin-bottom: 0;
}

.timeLineListMain {
    border: 1px solid var(--border-gray);
    padding: 20px;
    border-radius: 10px;
    background: var(--theme-bg-white);
}

.timeLineItem {
    display: flex;
    align-items: center;
}

.timeLineDate {
    font-family: var(--font-g);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-gray);
    margin-bottom: 0;
    margin-right: 30px;
    min-width: 50px;
}

.timeLineTitleText {
    font-family: var(--font-g);
    font-size: 18px;
    font-weight: 500;
    color: var(--text-black);
    margin: 0;
}

.timeLineIcons {
    margin-right: 20px;
}

.timeLineIcons>svg {
    width: 22px;
    height: 22px;
}

.squareShape {
    background: none;
    border: 2px solid var(--border-primary);
    border-radius: 50px;
    width: 15px;
    height: 15px;
}

.timeLineTitleTextDiv {
    padding: 20px 0;
    border-bottom: 1px solid var(--border-gray);
    display: flex;
    align-items: center;
    width: 90%;
}

.line {
    width: 2px;
    background: var(--theme-bg-primary);
    height: 33px;
    border-radius: 1px;
    position: absolute;
    top: 25px;
}

.steperMain {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 30px;
    position: relative;
}

.timeLineListMain .timeLineItem:last-child .line {
    display: none;
}

.timeLineListMain .timeLineItem:last-child .timeLineTitleTextDiv {
    border-bottom: none;
}

.timeLineListMain .timeLineItem:first-child .squareShape {
    background: var(--theme-bg-primary);
    width: 15px;
    height: 15px;
    transform: rotate(45deg);
    border-radius: 0;
}


.row-white {
    background-color: #ffffff !important;
}

.row-grey {
    background-color: #FAFAFA !important;
}

.table.dataTable tbody tr {
    height: 1.5rem !important;
}

.chatRight .mChat {
    background-color: #3a6ec7;
}

.chatLeft .mChat {
    background-color: #274881;
}

.msgCName a {
    color: black !important;
}

.msgHeaderP h3 {
    font-size: 20px !important;
}

@keyframes scroll-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-200%);
    }
}

.notification-main {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    position: absolute;
    top: -26px;
    padding-left: 100%;
    animation: scroll-left 20s linear infinite;
}

.tiker {
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
}

.notification-tags {
    font-size: 12px;
    color: #fff;
    margin: 0 20px 0 0;
}

.cards {
    border: 1px solid var(--border-gray-fr);
    border-radius: 20px;
    box-shadow: var(--card-shadow-gray);
    padding: 20px;
    background: var(--theme-bg-white);
}

.info-button {
    background: var(--btn-bg-info);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-button>.bi {
    color: var(--icon-white);
    font-size: 16px;
}

.card-title {
    font-size: 18px;
    font-weight: 400;
    color: var(--text-black);
    margin: 0 10px 0 0 !important;
}

.card-icon-fr {
    margin-right: 10px;
}

.more-button {
    background: var(--btn-bg-white);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border-button-gray-fr);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.more-button>.bi {
    color: var(--icon-gray);
    font-size: 16px;
}

.gradient-bar {
    background: var(--gradient-vertical-fr);
    height: 16px;
    width: 6px;
    border-radius: 10px;
    margin-right: 10px;
}

.status-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-black);
    margin: 0;
}

.count {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-black);
    margin: 0 10px 0 0;
}

.count-text {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-gray-fr);
    margin: 0;
}

.modal-dialog-custom-fr {
    max-width: 1000px !important;
}

.modal-content-custom-fr {
    border: none !important;
    box-shadow: var(--shadow-gray) !important;
    border-radius: 20px !important;
}

.modal-title-custom-fr {
    font-size: 20px;
    font-weight: 400;
    font-family: var(--font-g) !important;
    border-radius: 0 !important;
    padding: 0 !important;
    width: unset !important;
    min-width: unset !important;
    box-shadow: none !important;
    text-align: unset !important;
    color: var(--text-black) !important;
    background: none !important;
    text-transform: capitalize !important;
}

.modal-header-custom-fr {
    background: var(--header-background);
    padding: 20px !important;
    border-radius: 20px 20px 0 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 0 !important;
}

.close-custom-fr {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50px !important;
    background: transparent !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    color: var(--text-gray) !important;
    padding: 0px !important;
    text-shadow: none !important;
    opacity: unset !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
}

.close-custom-fr>.bi {
    color: var(--text-gray);
}

.table_head-custon-fr {
    background: var(--gradient-fr) !important;
}

.table-tbody-custom {
    border: none !important;
}

/* .custom-table {
    border-radius: 10px 10px 0px 0px;
} */

.consultant-custom-table {
    border-radius: 10px 10px 0px 0px;
}

.extension-custom-table {
    border-radius: 10px 10px 0px 0px;
}

#consultantTable {
    border-radius: 20px;
}

#extensionTable {
    border-radius: 20px;
}

.modal-body-custom-fr {
    padding: 30px !important;
}

.table-bordered> :not(caption)>* {
    border-color: #CFCFCF !important;
}

.see-more {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
}

.unseenChatMainbtn {
    display: flex;
    justify-content: space-between;
    background: var(--theme-bg-white);
    border-radius: 5px;
    margin-bottom: 5px;
    padding: 6px 15px;
    box-shadow: var(--shadow-black);
    cursor: pointer;
}

.unseenChat-icon {
    width: 43px;
    height: 43px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    overflow: hidden;
}

.unseenMsgCount {
    width: 16px;
    height: 16px;
    background: var(--theme-bg-secondary);
    border-radius: 50px;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.unseenUNameC {
    font-size: 15px;
    font-weight: 400;
    color: var(--text-black);
    margin: 0;
    width: 142px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize;
}

.unseenUMsg {
    font-size: 15px;
    font-weight: 300;
    color: var(--text-black);
    margin: 0;
    width: 142px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.email-img-box {
    width: 85px;
    height: 85px;
}

.email-count-fr {
    font-size: 72px;
    font-weight: 600;
    background: linear-gradient(102.75deg, #632D91 -7.11%, #343192 46.53%, #29A1DB 98.06%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    line-height: 1;
    margin: 0 !important;
}

.email-text {
    font-size: 19px;
    font-weight: 500;
    color: var(--text-black);
    margin: 0 !important;
}

.email-tab-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-black);
    margin: 0 !important;
}

.email-tab-count {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-black);
    margin: 0 !important;
    line-height: 1;
}

.gradient-box-50 {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    overflow: hidden;
    background: var(--gradient-v-box);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 15px;
}

.bg-img {
    width: 280px;
    height: 280px;
    position: absolute;
    right: 0;
    top: 0;
}

.bg-img-lead {
    width: 160px;
    height: 140px;
    position: absolute;
    right: 30px;
    top: 50px;
}

.result-text {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-gray);
    margin: 0 !important;
}

.vs-text {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-black);
    margin: 0 !important;
}

.per-box {
    border: 1px solid var(--arrow-up);
    background: var(--theme-bg-lt-green);
    border-radius: 50px;
    padding: 0 5px;
    margin: 0 8px;
    display: flex;
    align-items: center;
    height: 24px;
}

.per-box>.bi-arrow-up-short {
    color: var(--arrow-up);
    font-size: 20px;
}

.per-box>p {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-green);
}

.today-leads-bg {
    background: var(--theme-bg-primary) !important;
}

.monthly-leads-bg {
    background: var(--theme-bg-secondary) !important;
}

.per-box-sub {
    border: 1px solid var(--arrow-down);
    background: var(--theme-bg-lt-red);
    border-radius: 50px;
    padding: 0 5px;
    margin: 0 8px;
    display: flex;
    align-items: center;
    height: 24px;
}

.per-box-sub>p {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-red);
}

.per-box-sub>.bi-arrow-down-short {
    color: var(--arrow-down);
}

.lead-tab-text {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-black);
    margin: 0 !important;
}

.lead-tab-count {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 !important;
    line-height: 1;
}

.btn-group-main {
    border: 1px solid var(--border-button-gray-fr);
    border-radius: 20px;
    padding: 2px;
    max-height: 30px;
}

.btn-group-custom {
    background: transparent !important;
    border: 1px solid var(--white) !important;
    border-radius: 20px !important;
    color: var(--text-black) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    font-family: var(--font-g) !important;
    min-width: 60px;
    padding: 0 4px !important;
}

.selected {
    border: 1px solid var(--border-gray) !important;
    color: var(--text-white) !important;
    background: var(--gradient-fr) !important;
}

.assignment-lead-count-fr {
    font-size: 52px;
    font-weight: 600;
    background: linear-gradient(102.75deg, #632D91 -7.11%, #343192 46.53%, #29A1DB 98.06%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    line-height: 1;
    margin: 0 !important;
}

.assignment-lead-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-black);
    margin: 0 !important;
}

.user-tab-card {
    overflow: hidden;
    padding: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    box-shadow: var(--card-shadow-gray);
}

.user-name-card {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-black);
    margin: 0 !important;
}

.user-assign-lead-count {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-black);
    margin: 0 !important;
}

.left-border {
    background: var(--gradient-vertical-fr);
    width: 10px;
    height: 100%;
}

.custom-row {
    margin: 0 !important;
    display: grid;
    grid-template: 40px / auto auto;
}

.upS-text {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-black);
    margin: 0 !important;
}

.upS-count-fr {
    font-size: 38px;
    font-weight: 700;
    background: linear-gradient(102.75deg, #632D91 -7.11%, #343192 46.53%, #29A1DB 98.06%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    line-height: 1;
    margin: 0 !important;
}



/* sami css  */

#salesByFrontSallerChart {
    max-height: 295px;
    opacity: 0.9;
    overflow: hidden;
}


#brandSalesChart {
    width: 500px;
    height: 350px;
}


#frontTeamSalesChart,
#upsellerTeamsSalesChart {
    width: 500px;
    height: 295px;
}

.card_number.d-flex.flex-wrap.justify-content-between.align-items-center.text-center .first_col {
    flex: 0 0 100%;
}

.card_number.d-flex.flex-wrap.justify-content-between.align-items-center.text-center .second_col {
    flex: 0 0 100%;
}

.second_col .main_input.d-flex.gap-2 {
    border: 1px solid #632D91;
    max-width: 333px;
    width: 100%;
    padding: 8px;
    border-radius: 30px;
}

.first_col h2.main_number_count {
    font-size: 72px;
    font-weight: 700;
    background: linear-gradient(102.75deg, #632D91 -7.11%, #343192 46.53%, #29A1DB 98.06%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    line-height: 1;
    margin: 0 !important;
}

.first_col p.main_number_text {
    font-size: 19px;
    font-weight: 500;
}

.second_col .main_input.d-flex.gap-2 .search_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 10%;
}

.second_col .main_input.d-flex.gap-2 .input_search input,
.second_col .main_input.d-flex.gap-2 .input_search input:focus,
.second_col .main_input.d-flex.gap-2 .input_search input:focus-visible {
    border: 0;
    width: 100%;
    outline: none;
}

.second_col .main_input.d-flex.gap-2 .input_search {
    flex: 0 0 85%;
}




.col-md-12.bg-colorrs.d-flex.align-items-center .icon.budg img {
    width: 48px;
    height: 50px;
    border: 3px solid #29A1DB;
    border-radius: 50%;
    object-fit: cover;
}

.col-md-12.bg-colorrs.d-flex.align-items-center {
    background: #29A1DB14;
    padding: 9px;
    box-shadow: 0px 4px 10px 0 #CECECE40;
}

.budget_card_text p {
    font-size: 12px;
    margin: 0;
    width: 100px;
    text-align: start;
}

.converted_leads.d-flex.flex-column.flex-start p {
    font-size: 12px;
    color: #343434;
    font-weight: 500;
    margin: 0 0 8px 0;
}

.converted_leads.d-flex.flex-column.flex-start h4 {
    font-size: 26px;
    font-weight: 700;
    background: linear-gradient(102.75deg, #632D91 -7.11%, #343192 46.53%, #29A1DB 98.06%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    line-height: 1;
    margin: 0 !important;
}


.col-md-12.bg-colorrs.d-flex.align-items-center:last-child {
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}

.row.cards.unique_card {
    border-radius: 20px 20px 0 0;
}

.unseenChatMainbtn.customer_questionair.postition-relative {
    background: #29A1DB14;
    padding: 10px;
    border-radius: 10px;
    margin: 0 0 20px 0;
    position: relative;
}

.unseenChatMainbtn.customer_questionair.postition-relative .uMsgCont p.unseenUNameC {
    color: #29A1DB;
    font-size: 14px;
}

.unseenChatMainbtn.customer_questionair.postition-relative .uMsgCont p.unseenUMsg.mb-0 {
    width: unset;
    overflow: auto;
    text-overflow: unset;
    font-size: 12px;
    white-space: unset;
}

.bg-img.question_markk {
    width: 60px;
    height: 60px;
    top: -20px;
    right: 5px;
}

.question_textareas.w-100 textarea {
    height: 154.89px;
    resize: none;
    width: 100%;
    border-radius: 10px;
    border: 0;
    padding: 10px;
}

.main_message_block {
    height: calc(100% - 65px);
    padding: 0 !important;
    overflow: auto;
}

.bg-img.call_log_bg {
    width: 171px;
    height: 171px;
    top: 20px;
    right: 30px;
}

p.email-tab-count.fail_call {
    color: #F41B1B;
}

.first_half.d-flex.gap-3 .icon_img img {
    width: 20px;
    height: 20px;
    border-radius: 50px;
}


.leader_board-box.d-flex.align-items-center.bg-colorrr.justify-content-between {
    background: linear-gradient(102.75deg, #632D91 -7.11%, #343192 46.53%, #29A1DB 98.06%);
    padding: 10px 20px 10px 20px;
    border-radius: 30px;
    margin: 0 0 10px 0;
}


.leader_text p {
    font-size: 16px;
    color: white;
    margin: 0;
}

.last_half h4.leader_monthPrice {
    font-size: 16px;
    color: white;
    font-weight: 500;
    margin: 0;
}

.mt-3.bordered-new {
    box-shadow: 0 4px 10px #CECECE40;
    padding: 10px;
    border-radius: 20px;
}

.fronted_sales_cardd.d-flex.flex-column.align-items-center {
    background: linear-gradient(180deg, #29A1DB 0%, #343192 48.5%, #632D91 100%);
    border-radius: 10px;
    margin: 6px;
}

.fronted_sales_cardd.d-flex.flex-column.align-items-center .frontedd_sales_name {
    width: 100%;
    padding: 10px 0 10px 12px;
}

.fronted_sales_cardd.d-flex.flex-column.align-items-center .frontedd_sales_name h4 {
    color: white;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.fronted_sales_cardd.d-flex.flex-column.align-items-center .frontedd_sales_img img {
    width: 100%;
    height: auto;
}

.fronted_sales_cardd.d-flex.flex-column.align-items-center .fronted_sales_descriptionss {
    padding: 20px 10px 10px 10px;
    width: 100%;
    color: white;
}

.fronted_sales_cardd.d-flex.flex-column.align-items-center .fronted_sales_descriptionss .main_sales_achieved h2 {
    font-size: 38px;
    font-weight: 700;
    margin: 0;
}

.fronted_sales_cardd.d-flex.flex-column.align-items-center .fronted_sales_descriptionss .main_sales_achieved p {
    font-size: 12px;
    font-weight: 500;
}

.fronted_sales_cardd.d-flex.flex-column.align-items-center .fronted_sales_descriptionss .main_sales_achieved {
    margin: 0 0 10px 0;
}


.fronted_sales_cardd.d-flex.flex-column.align-items-center .fronted_sales_descriptionss .progessed_bar_sec .progress {
    height: 6px;
}

.fronted_sales_cardd.d-flex.flex-column.align-items-center .fronted_sales_descriptionss .progessed_bar_sec .progress .progress-bar.w-25.bg_coloredd {
    background: #52C7FF;
}

.fronted_sales_cardd.d-flex.flex-column.align-items-center .fronted_sales_descriptionss .progessed_bar_sec p {
    font-size: 7px;
    padding: 5px 0 0 0;
    font-weight: 400;
}



#devopsModules>div {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gradient-bar.simple_blue {
    background: #29A1DB;
}

.gradient-bar.simple_purple {
    background: #343192;
}

.gradient-bar.simple_purple_mixed {
    background: #632D91;
}

.gradient-bar.simple_red {
    background: #F41B1B;
}

p.count.red_colored {
    color: #F41B1B;
}

.main_last_disclaimerr.d-flex.justify-content-between.p-3.bgcolored {
    background: #F41B1B1A;
    align-items: center;
    border-radius: 10px;
    box-shadow: 0px 4px 10px 0px #CECECE40;
}

.main_last_disclaimerr.d-flex.justify-content-between.p-3.bgcolored p {
    margin: 0;
    font-size: 14px;
}

.main_last_disclaimerr.d-flex.justify-content-between.p-3.bgcolored p b {
    color: #F41B1B;
    font-weight: 700;
    font-size: 21px;
}

.main_expiring.d-flex.align-items-center .text h3 {
    font-size: 16px;
    font-weight: 700;
    color: #F41B1B;
    margin: 0;
}



/* new implentjnskdf  */


.msger-chat {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}


.msg {
    display: flex;
    align-items: flex-end;
    margin-bottom: 10px;
}

.msg:last-of-type {
    margin: 0;
}

.msg-img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
    background: #ddd;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 50%;
}

.msg-bubble {
    max-width: 450px;
    padding: 15px;
    border-radius: 15px;
}

.msg-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.msg-info-name {
    margin-right: 10px;
    font-weight: bold;
}

.msg-info-time {
    font-size: 0.85em;
}

.left-msg .msg-bubble {
    border-bottom-left-radius: 0;
}

.right-msg {
    flex-direction: row-reverse;
}

.right-msg .msg-bubble {
    background: var(--right-msg-bg);
    color: #fff;
    border-bottom-right-radius: 0;
}

.right-msg .msg-img {
    margin: 0 0 0 10px;
}

.msger-chat {
    background-color: #fcfcfe;
}


main.msger-chat {
    flex-wrap: wrap;
    overflow-y: hidden;
    flex: 0 0 100%;
    background: #29A1DB14;
    border-radius: 10px;
}

main.msger-chat .msg-img {
    width: 48px;
    height: 48px;
    border-radius: 50px;
    overflow: hidden;
}

main.msger-chat .msg.left-msg {
    align-items: start;
    padding: 4px;
}

main.msger-chat .msg-bubble {
    padding: 0;
}

main.msger-chat .msg-bubble .msg-info {
    margin: 0 0 3px 0;
}

main.msger-chat .msg-bubble .msg-info .msg-info-name {
    font-size: 14px;
    font-weight: 400;
    color: #29A1DB;
    margin: 0;
}

main.msger-chat .msg-bubble .msg-text {
    padding: 5px 16px;
    background: white;
    font-size: 12px;
    border-radius: 10px;
    font-weight: 400;
}


main.msger-chat .msg.right-msg .msg-info {
    justify-content: end;
}


main.msger-chat .msg.right-msg .msg-bubble .msg-text {
    background: linear-gradient(90deg, #29A1DB 0%, #343192 50%, #632D91 100%);
}


main.msger-chat form.msger-inputarea {
    flex: 0 0 100%;
    background: white;
    padding: 4px 6px 4px 6px;
    margin: 3px 0 0px 0;
    display: flex;
    border-radius: 10px;
}

main.msger-chat form.msger-inputarea input.msger-input {
    border: 0;
    flex: 1 0 85%;
}

main.msger-chat form.msger-inputarea button.msger-send-btn {
    background: transparent;
    border: 0;
}

.unseenChatMainbtn.opened_chat {
    background: transparent;
    padding: 0;
    margin-bottom: 10px;
}

/* sami end */
.refund-tab-text {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-black);
    margin: 0 !important;
}

.refund-tab-count {
    font-size: 28px;
    font-weight: 700;
    color: #F41B1B;
    margin: 0 !important;
    line-height: 1;
}

.qa-sales-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.wrapper-item {
    text-align: center;
}

.leader_head {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-black);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
}

.grid-item {
    padding: 0 1rem;
}

.col-span-1 {
    grid-column: span 1;
}

.col-span-2 {
    grid-column: span 2;
}

.col-span-3 {
    grid-column: span 3;
}

.col-span-4 {
    grid-column: span 4;
}

.col-span-5 {
    grid-column: span 5;
}

.col-span-6 {
    grid-column: span 6;
}

.col-span-7 {
    grid-column: span 7;
}

.col-span-8 {
    grid-column: span 8;
}

.col-span-9 {
    grid-column: span 9;
}

.col-span-10 {
    grid-column: span 10;
}

.col-span-11 {
    grid-column: span 11;
}

.col-span-12 {
    grid-column: span 12;
}



/* qa card css  */

.highcharts-figure,
.highcharts-data-table table {
    min-width: 320px;
    max-width: 660px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

.highcharts-description {
    margin: 0.3rem 10px;
}

.highcharts-credits {
    display: none
}

.highcharts-title {
    display: none
}

.highcharts-a11y-proxy-element {
    display: none !important
}

.highcharts-exporting-group {
    display: none
}

#timeline-chart .apexcharts-toolbar {
    opacity: 1;
    border: 0;
}

#qa-chart-value {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 42px;
    width: 100%;
}

#qa-chart-value .qa-label-1 {
    font-size: 12px;
    font-weight: 500;
    color: #343434;
}

#qa-chart-value .qa-value {
    font-size: 30px;
    background: linear-gradient(102.75deg, #632D91 -7.11%, #343192 46.53%, #29A1DB 98.06%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
    line-height: 1;
}

#qa-chart-value1 {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 42px;
    width: 100%;
}

#qa-chart-value1 .qa-label-2 {
    font-size: 12px;
    font-weight: 500;
    color: #343434;
}


#qa-chart-value1 .qa-value1 {
    font-size: 30px;
    background: linear-gradient(102.75deg, #632D91 -7.11%, #343192 46.53%, #29A1DB 98.06%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
    line-height: 1;
}

/* end qa card css  */

/* user chart css start */
#user-chart {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#user-chart-value {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 92px;
    width: 100%;
}

#user-chart-value .user-label-1 {
    font-size: 10px;
    font-weight: 500;
    color: #343434;
}


#user-chart-value .user-value {
    font-size: 30px;
    background: linear-gradient(102.75deg, #632D91 -7.11%, #343192 46.53%, #29A1DB 98.06%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
    line-height: 1;
}

/* user chart css end */
/* customer-chart css start */
#customer-chart {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#customer-chart-value {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 95px;
    width: 100%;
}

#customer-chart-value .customer-label-1 {
    font-size: 12px;
    font-weight: 500;
    color: #343434;
}


#customer-chart-value .customer-value {
    font-size: 40px;
    background: linear-gradient(102.75deg, #632D91 -7.11%, #343192 46.53%, #29A1DB 98.06%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
    line-height: 1;
}

/* user chart css end */


@media only screen and (max-width: 2560px) {
    .dashboard-grid {
        grid-template-columns: repeat(12, 1fr);
    }

}

@media only screen and (max-width:2000px) {
    .vs-text {
        font-size: 13px;
    }

    .email-count-fr {
        font-size: 57px;
    }

    .upS-count-fr {
        font-size: 39px;
    }

    .count {
        font-size: 24px;
    }

    .refund-tab-count {
        font-size: 24px;
    }

    .per-box {
        margin: 0 3px;
        padding: 0 3px;
        height: 22px;
    }

    .status-text {
        font-size: 13px;
    }

    .gradient-bar {
        margin: 0 3px 0 3px;
    }
}

@media only screen and (max-width: 1440px) {
    .dashboard-grid {
        grid-template-columns: repeat(12, 1fr);
    }

    .col-span-1,
    .col-span-2,
    .col-span-3,
    .col-span-4,
    .col-span-5,
    .col-span-6,
    .col-span-7,
    .col-span-8,
    .col-span-9,
    .col-span-10,
    .col-span-11 {
        grid-column: span 6;
    }

    .col-span-12 {
        grid-column: span 12;
    }

}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .col-span-3 {
        grid-column: span 12;
    }

    .col-span-4 {
        grid-column: span 12;
    }

    .col-span-5 {
        grid-column: span 12;
    }

    .col-span-7 {
        grid-column: span 12;
    }

    .col-span-12 {
        grid-column: span 12;
    }

}

.custom-mb {
    margin-bottom: 10px !important;
}

div#liveChatContent {
    padding: 0;
    margin: 0;
}

main.msger-chat form.msger-inputarea input.msger-input:focus-visible {
    outline: none;
}

.row.unique_card {
    padding: 20px;
    margin: 0;
    width: 100%;
}

div#budgetCard {
    padding: 10px 0 20px 0;
    max-height: 250px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    min-height: 190px;
    text-align: center;
}

.small-card-gray {
    background: var(--theme-bg-gray);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 74px;
    height: 64px;
}

.small-card-gradient {
    background: linear-gradient(125.23deg, #29A1DB 0%, #343192 48.25%, #632D91 96.5%);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 74px;
    height: 64px;
}

.colon {
    font-size: 32px;
    font-weight: 400;
    color: var(--text-black);
    line-height: 1;
    margin: 0;
}

.small-card-gry-text {
    font-size: 32px;
    font-weight: 400;
    color: var(--text-black);
    line-height: 1;
    margin: 0;
}

.card-gradient-text-large {
    font-size: 32px;
    font-weight: 600;
    color: var(--text-white);
    line-height: 1;
    margin: 0;
}

.card-gradient-text-small {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-white);
    line-height: 1;
    margin: 0;
}

.small-card-white {
    background: var(--theme-bg-white);
    border-radius: 20px;
    box-shadow: var(--card-shadow-gray);
    padding: 5px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 400px;
}

.country-name {
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    margin: 0;
}

.country-flag {
    width: 24px;
    height: 24px;
    border-radius: 50px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}

.applylabelstyle {
    padding: 2px 5px;
    border-radius: 5px;
    display: inline-block;
    margin-left: 2px;
    margin-top: 2px;
    width: 10ch;
    /* Limit width to 10 characters */
    overflow: hidden;
    /* Hide any overflowing content */
    text-overflow: ellipsis;
    /* Add ellipsis (...) for overflow */
    white-space: nowrap;
    /* Prevent text wrapping */
    position: relative;

}


h1 {
    text-transform: capitalize !important;
}


#consultantTable_wrapper>.row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
}

#extensionTable_wrapper>.row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
}

.top-button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}


.chatTextMain {
    height: calc(100vh - 300px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0px 5px;
}

.table> :not(caption)>*>* {
    background-color: inherit;
}


table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before {
    top: 50% !important;
    transform: translate(0%, -50%) !important;
}

.dd-custom {
    border-radius: 0 10px 10px 0 !important;
    background: var(--btn-bg-white);
}

a.btn.btn-success {
    color: var(--text-white) !important
}