/* @import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap"); */
@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: rgba(var(--inv-primary), var(--opac-10)); */
    --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: #F0740A; */
    --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-primary: linear-gradient(172.01deg,
            rgba(var(--inv-primary), var(--opac-100)) -2.57%,
            rgba(var(--inv-secondary), var(--opac-100)) 102.94%); */
    /* --btn-bg-gradient-red: linear-gradient(180deg, #c80808 0%, #ff4040 100%); */
    --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: #f2f2f2; */
    --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: rgba(0, 0, 0, 0.16) 0px 1px 4px; */
    --shadow-black: 0px 4px 20px 0px #d1d1d140;
    --shadow-btn-focus-red: 0 0 0 0.25rem rgba(200, 8, 8, 0.25);
    /* --shadow-global: 0px 4px 10px 0px rgba(193, 193, 193, .25); */
    --shadow-global: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
        rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    /* done by Agha*/

    /* 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 {
    /* box-shadow: inset 0 0 5px rgb(224, 224, 224); */
    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 {
    /* box-shadow: inset 0 0 5px rgb(224, 224, 224); */
    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 {
    /* box-shadow: inset 0 0 5px rgb(224, 224, 224); */
    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 {
    /* box-shadow: inset 0 0 5px rgb(224, 224, 224); */
    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 {
    /* box-shadow: inset 0 0 5px rgb(224, 224, 224); */
    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: #f1f1f1; */
    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.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100vh;
    /* background: var(--gradient); */
    /* background: linear-gradient(105.44deg,
            rgba(240, 113, 9, var(--opac-100)) 0.06%,
            rgba(246, 171, 43, var(--opac-100)) 123.42%); */
}

.top-circle {
    /* width: 700px;
    height: 700px; */
    position: absolute;
    right: 0px;
    /* border-radius: 50%; */
    /* background: linear-gradient(180deg, #29A1DB 0%, #F6AB2B 100%);
    top: -30%;
    display: flex;
    justify-content: center;
    align-items: center; */
}

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

/* .top-circle-child {
    width: 60%;
    height: 60%;
    border-radius: 50%;
    background: #16e15e;

} */

/* login end*/

/* modal new Css start */

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

.modal-header {
    /* padding: 15px;
    border-bottom: 1px solid #c8c8c8; */
    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;
    /* color: var(--text-white); */
    /* background: #000; */
    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);
    /* line-height: 22.5px; */
    /* color: var(--text-black); */
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    border-radius: 0 0 10px 10px;
    /* padding: 10px; */
    padding: 10px 40px;
    /* width: 40%; */
    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-header {
    margin: 0 30px;
    border-bottom: 1px solid #c8c8c8;
} */

/* 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 (min-width: 1024px) {
    .card-heading {
        font-size: 16px;
    }
  } */
@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;
    /* box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; */
}

.small-graph {
    background: var(--theme-bg-white);
    border-radius: 10px;
    padding: 10px;
    /* display: flex;
    flex-direction: column;
    align-items: center; */
    /* box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; */
    /* margin-right: 10px; */
    /* min-width: 160px;
    max-width: 200px; */
    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;
    /* margin-bottom: 10px; */
}

.assets-main {
    background: var(--theme-bg-white);
    border-radius: 10px;
    padding: 10px 10px 0 10px;
    display: flex;
    flex-direction: column;
    /* box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; */
    /* margin-right: 10px; */
    /* min-width: 180px;
    max-width: 200px; */
}

.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;
    /* justify-content: center; */
    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;
    /* display: flex;
    align-items: center */
    /* box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; */
}

.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;
    /* box-shadow: rgba(193, 193, 64, 0.2) 0px 2px 8px 0px; */
    /* box-shadow: 0 0 0 0.2rem #C1C1C140 !important; */
    /* padding: 8px 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);
}

/* tr {
    border-bottom: 1px solid #FF4107 !important;
} */

.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;
    /* border: 1px solid #c8c8c8; */
    /* line-height: 30px; */
    /* color: var(--text-black); */
}

.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;
    /* border: 1px solid #E3E3E3; */
    /* width: 100%; */
    /* line-height: 1.5; */
    /* position: relative; */
}

.closet {
    /* position: absolute; */
    /* right: 2.5%;
    top: 25.5%; */
    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;
    /* box-shadow: var(--shadow-black); */
    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-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;
    /* box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; */
    border-radius: 22px;
    /* padding: 4px; */
    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);
    /* letter-spacing: 0.5px; */
    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;
    /* box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; */
}

.chat-wrapper {
    /* display: flex; */
    padding: 10px;
    /* width: auto;
    height: calc(100vh - 100px); */
    border-radius: 30px;
    /* overflow: hidden; */
    /* position: relative; */
    background: #fcfcfc;
    border-radius: 30px;
    background-image: url("../../assets/images/msgBG.svg");
    /* height: 100vh; */
}

.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;
    /* height: 100%; */
    /* position: absolute; */
    /* left: 0;
    top: 0;
    bottom: 0; */
    /* z-index: 2; */
    /* overflow: hidden; */
    /* border-right: 1px solid rgba(0, 0, 0, 0.125);
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem; */
}

.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 {
    /* background-color: var(--theme-bg-white); */
    border: 1px solid var(--border-gray) !important;
    /* border-radius: 5px !important; */
    /* box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; */
    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;
    /* border-top-left-radius: 36px;
    border-top-right-radius: 32px; */
}

.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;
    /* width: 70%; */
    align-items: center;
}

.uImgC {
    width: 40px;
    height: 40px;
    margin-right: 10px;
}

.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: 40px;
    height: 40px;
    margin-right: 10px;
}

.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;
    /* margin-bottom: 5px; */
}

.mChat {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 5px;
    /* background: #29A1DB; */
    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 {
    /* width: 60%; */
    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;
    /* line-height: 40px; */
    font-size: 18px;
    color: #6c757d;
    /* text-align: center; */
    border-radius: 50%;
    margin-right: 10px;
    /* background-color: var(--theme-bg-white); */
    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-bottom: 0 !important; */
    border: #ffffff !important;
    border-bottom: 1px solid var(--table-border-orange) !important;
    font-size: 10px !important;

}

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

/* table.dataTable>thead>tr>th {
    padding: 10px 18px !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);
    /* font-size: 18px;
    font-weight: 500; */
    /* padding-right: 0.8rem;
    padding-left: 0.8rem; */
    display: flex;
    align-items: center;
    /* border: 2px solid #e1e1e4; */
    border-radius: 50px;
    /* box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; */
}

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

/* .searchbar .form-control:focus,
.dropdown-searchbar .form-control:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
} */

.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: var(--gradient); */
    background-clip: padding-box;
    transition: all 0.2s;
    z-index: 250;
    background-image: url(../images/background/sidebarBackground.png);
    /* background-color: var(--theme-bg-secondary); */
    /* border-radius: 0 30px 0 0; */
    /* opacity: 0.5; */
    border-right: solid 1px #cecece;
}

.simplebar-wrapper {
    /* background: var(--gradient); */
    border-radius: 0 30px 0 0;
    /* opacity: 0.5;
    z-index: -1; */
}

.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(--gradient-header); */
    /* background: var(--theme-bg-header); */
    background: var(--theme-bg-white);
    background-clip: padding-box;
    transition: all 0.2s;
    /* border-radius: 0 30px 0 0; */
    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;
}

/* background-color: rgba(240, 113, 9, 1); */
/* ul.mm-show.mm-collapse li:hover {
    background-color: rgba(240, 113, 9, 1);
} */

ul.mm-show.mm-collapse li.mm-active a {
    /* background-color: rgba(240, 113, 9, 1) !important; */
    /* background-color: var(--btn-bg-secondary) !important; */
    margin-left: 0px !important;
    color: #29A1DB !important;
    font-weight: 600 !important;
}

.sidebar-wrapper .metismenu .mm-collapse a:hover {
    /* background-color: rgba(240, 113, 9, 1) !important; */
    /* background-color: var(--btn-bg-secondary) !important; */
    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;
    /* background-color: rgba(240, 113, 9, 0.3); */
    /* background-color: var(--btn-bg-secondary); */
    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) invert(); */
    filter: brightness(0.2);
    /* filter: invert(100%) sepia(100%) hue-rotate(200deg) saturate(300%); */

}

.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:hover>.parent-icon>img {
    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;
    /* margin-bottom: 5px; */
    /* background-color: var(--btn-bg-secondary); */
    /* margin-left: -40px; */
    /* border-left: 10px solid var(--theme-bg-primary); */
    /* background-color: rgba(240, 113, 9, 1); */
    /* border-left: 10px solid #FF4107; */
}

/* .sidebar-wrapper .metismenu .mm-active>a,
.sidebar-wrapper .metismenu a:hover {
    border-radius: 0 !important;
} */

.sidebar-wrapper .metismenu .mm-active>a .parent-icon,
.sidebar-wrapper .metismenu a:hover .parent-icon {
    /* background: var(--btn-bg-primary);
    border-radius: 50px;
    border: 1px solid var(--btn-bg-primary);
    padding: 5px; */
}

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

/*
.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;
    /* transform: translate(0px, -50%); */
    cursor: pointer
}

.from-email {
    /* position: relative;
    top: -5px; */
    white-space: nowrap;
    width: 88%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.MUName {
    /* line-height: 1.5; */
    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);
}

/* .page-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    display: inline-block;
    padding-right: 0.5rem;
    color: #6c757d;
    font-family: LineIcons;
    content: "\ea5c";
    display: none;
} */

/* .page-breadcrumb .breadcrumb li.breadcrumb-item {
    font-size: 28px;
    font-weight: 400;
    color: #242424;
    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 {
    /* display: flex;
    justify-content: space-between; */
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
}

.pos-relative {
    position: relative;
}

.my-email {
    text-decoration: none !important;
    /*border-radius: 10px;*/
    /*box-shadow: var(--shadow-black);*/
    /*margin-bottom: 10px;*/
    border: none;
}

/* .email-list {
    padding-right: 10px;
} */

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

/* .mailIconsBox img {
    background: var(--theme-bg-white);
    width: 43px;
    border-radius: 57px;
    box-shadow: 2px 3px 13px #666;
    padding: 12px;
} */

/* .mailIconsBox {
    position: relative;
    width: 43px;
    height: 43px;
    box-shadow: var(--shadow-black);
    background: var(--theme-bg-lt-primary);
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
} */
.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;
    /* flex-direction: column !important; */
}

.email-wrapper {
    /* width: auto; */
    /* height: 600px; */
    /* overflow: hidden; */
    /* border-radius: 0.25rem; */
    /* position: relative; */
    /* background: #fcfcfc; */
    /* height: calc(100vh - 112px); */
    padding: 10px;
    /*display: flex;*/
}

.email-sidebar {
    border-radius: 30px;
    background: var(--theme-bg-white);
    box-shadow: var(--shadow-black);
    margin-right: 10px;
    height: calc(100vh - 90px);
    padding: 10px;
    /*width: 400px;*/
    /*min-width: 400px;*/
    /* z-index: 2; */
    /* position: absolute; */
    /* left: 0;
    top: 0;
    bottom: 0; */
    /* overflow: hidden; */
    /* margin-left: 10px; */
}

/* .email-sidebar-header { */
/* width: auto;
    height: auto; */
/* position: relative; */
/* background: var(--theme-bg-white); */
/* border-bottom: 1px solid rgba(0, 0, 0, .125); */
/* border-right: 0 solid rgba(0, 0, 0, 0.125);
    border-top-left-radius: 0.25rem; */
/* padding: 15px; */
/* } */

.email-navigation {
    position: relative;
    padding: 0;
    /* height: 345px; */
}

.email-header {
    /* border-radius: 30px 30px 0px 0px; */
    background: transparent;
    /* margin-left: 260px; */
    /* height: 70px;
    left: 250px;
    right: 0;
    top: 0; */
    padding: 15px;
    z-index: 1;
}

.email-content {
    /* position: absolute;
    left: 0;
    right: 0;
    top: 70px; */
    /* width: auto;
    height: auto;
    margin-left: 270px; */
    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-actions {
    width: 230px;
} */

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

/* .email-list div */
.email-message {
    background: var(--theme-bg-white);
    /* border-bottom: 1px solid rgb(0 0 0 / 8%); */
    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;
}

/* .email-read-box {
    position: relative;
    height: 530px;
} */
/* .email-read-box {
    position: relative;
    height: calc(100vh - 168px);
    overflow-y: auto;
} */
.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-content {
    margin-left: 340px;
    padding: 85px 15px 15px 15px;
} */

.chat-header {
    /* position: absolute; */
    /* height: 70px;
    left: 340px;
    right: 0;
    top: 0; */
    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;
    /* position: absolute; */
    /* height: 70px; */
    /* left: 340px;
    right: 0;
    bottom: 0; */
    /* margin-bottom: 10px; */
    /* background: #f8f9fa; */
    /* border-top: 1px solid rgba(0, 0, 0, 0.125);
    border-bottom-right-radius: 0.25rem; */
}

.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;
    /* height: calc(100vh - 450px); */
}

.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-top-header-menu a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    color: #6c757d;
    text-align: center;
    border-radius: 50%;
    margin: 3px;
    background-color: var(--theme-bg-white);
    border: 1px solid #0d6efd;
}

.chat-top-header-menu a i {
    color: #0d6efd;
} */

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

.chatSideBtns {
    /* background: red; */
    height: calc(100vh - 347px);
    /* height: calc(100vh - 305px); */
    overflow: auto;
    padding: 5px;
}

/* chat style new end*/
.chat-content {
    position: relative;
    width: auto;
    /* height: calc(100vh - 170px); */
    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;
    /* align-items: center; */
    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;
    /* width: auto; */
    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 {
    /* display: -ms-flexbox; */
    /* -ms-flex-align: center; */
    /* -ms-flex-pack: end; */
    padding: 10px 30px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-top: 0 !important;
}

/* .modal-header:before,
.modal-header:after{
    content: " ";
    display: table;
}

.modal-header:after{
    clear: both;
} */

.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 {
    /* position: relative; */
    font-family: var(--font-g);
    padding: 15px 30px !important;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* .modal-footer {
    padding: 0 15px 15px !important;
    text-align: center;
    border: 0 !important;
    justify-content: center !important;
} */

/* .modal .btn {
    font-family: inherit;
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 16px;
    line-height: 1.42857143;
    border-radius: 10px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
} */

/* .modal .btn-default {
    color: #333;
    background-color: var(--theme-bg-white);
    border-color: #ccc;
}

.modal .btn-default:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
    text-decoration: none;
}

.modal .btn-default:focus {
    color: #333;
    background-color: #e6e6e6;
    border-color: #8c8c8c;
}

.modal .btn:active,
.modal .btn.active {
    outline: 0;
    background-image: none;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.modal .btn-default:active,
.modal .btn-default.active,
.modal .open>.dropdown-toggle.btn-default {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

.modal .btn-default:active,
.modal .btn-default.active,
.modal .open>.dropdown-toggle.btn-default {
    background-image: none;
} */

.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-dialog {
        width: 600px;
        margin: 130px auto !important;
    } */

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

    /* .authentication-card {
        padding: 1.5rem 0;
        height: auto;
    } */

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

    /* .by-device-container {
		height: 210px;
	} */
}

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

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

/* .select2-container--default .select2-selection--single */
.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 tbody tr {
    box-shadow: rgb(0 0 0 / 20%) 0px 4px 12px;
} */

.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);
    /* height: 80dvh; */
    /* overflow: auto; */
}

/* .formP{

} */

/* .compose-popup {
    position: fixed !important;
    background: var(--theme-bg-white);
    z-index: 120 !important;
    width: 380px !important;
    padding: 20px !important;
    bottom: 60px !important;
    right: 33px !important;
    box-shadow: rgb(104 105 103 / 25%) 7px 7px 12px 6px !important;
    border-radius: 20px !important;
} */
.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_me {
    animation: blinker 3s linear infinite;
    height: 14px;
    width: 14px;
    background: #909090;
    border-radius: 50%
} */

.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-left: 10px; */
    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);
    /* padding: 20px 20px; */
    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;
    /* margin: 3px; */
}

.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-right: 35px !important;
}

.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);
    /* border: 1px solid var(--checkBox-border); */
    /* outline: 1px solid #c8c8c8; */
    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;
    /* height: 34px; */
    border: 1px solid var(--border-gray) !important;
    /* box-shadow: var(--shadow-black); */
    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;
}

/* .submitUe {
    background-color: #ff4107 !important;
    border: 0;
    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;
    /* height: auto !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;
    /* border: none !important; */
    box-shadow: none !important;
    color: var(--text-black) !important;
    /* padding: 10px 12px !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: 1px solid var(--border-primary) !important; */
    border: none !important;
    box-shadow: none !important;
    color: var(--text-white) !important;
    /* padding: 10px 12px !important; */
    /* margin-right: 10px; */
    width: 40% !important;
}

/* .submitUe {
    background-color: #ff4107 !important;
    border-radius: 10px !important;
    color: var(--text-white) !important;
    text-shadow: none !important;
    opacity: 1 !important;
    font-family: var(--font-g) !important;
    font-weight: 500 !important;
    font-size: 16px !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;
}

/* overflow-x: auto; */
/* .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{
    display: flex !important;
    margin-bottom: 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-confirm, */
.swal2-styled.swal2-deny,
.submitEditFormBtnEmail,
/* .submitEditFormBtn, */
.updatePayment

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

/* .close, */
/* .swal2-styled.swal2-confirm, */
.swal2-styled.swal2-deny,
/* .swal2-styled.swal2-cancel, */
/* .modal-footer , */
.submitEditFormBtnEmail,
.edit,
.assignBudgetBtn,
.viewBudgetBtn {
    /* font-family: var(--font-g) !important; */
    font-size: 16px !important;
}

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

/* .submitEditFormBtn {
    font-family: var(--font-g) !important;
    font-size: 16px !important;
    background-color: #528dff !important;
    border-radius: 10px !important;
    border: 1px solid #528dff !important;
    box-shadow: none !important;
    background-image: none !important;
    color: var(--text-white);
} */

/* .orderSubmitBtn {
    font-family: var(--font-g) !important;
    font-size: 16px !important;
    background-color: #528dff !important;
    border-radius: 10px !important;
    border: 1px solid #528dff !important;
    box-shadow: none !important;
    background-image: none !important;
    color: var(--text-white);
} */

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

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

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

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    /* border-right: 0px solid #aaa !important;
    top: 4px !important; */
    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;
    /* box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; */
}

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

/* div#numberEdit .modal-footer {
    padding-bottom: 30px;
} */

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 {
    /* border-radius: 10px !important;
    padding: 5px !important; */
    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;
}

/* .keywords-main .keywords_col {
    border-radius: 10px;
    height: 700px;
    overflow-x: hidden;
    overflow-y: scroll;
    border: 1px solid #c8c8c8;
    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;
}

/* .updateBtn {
    font-family: var(--font-g) !important;
    font-size: 16px !important;
    background-color: #528dff !important;
    border-radius: 10px !important;
    border: 1px solid #528dff !important;
    box-shadow: none !important;
    background-image: none !important;
    color: var(--text-white) !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;
}

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

/* .submitEditFormBtn:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
} */

/* .submitEditFormBtn:hover {
    background-color: #4a7fe4 !important;
    border: 1px solid #4a7fe4 !important;
} */

/* .close:hover {
    background-color: #dc3907 !important;
    border: 1px solid #dc3907 !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;
    /* box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; */
}

.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*/

/* .globalCloseModal {
    background-color: #ff4107 !important;
    border: 1px solid #ff4107 !important;
    border-radius: 10px !important;
    color: var(--text-white) !important;
    text-shadow: none !important;
    opacity: 1 !important;
    font-family: var(--font-g) !important;
    font-weight: 500 !important;
    font-size: 16px !important;
} */

/* .globalCloseModal:hover {
    background-color: #dc3907 !important;
    border: 1px solid #dc3907 !important;
} */
.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-red) !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;
    /* background-image: none !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-red) !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;
    /* background-image: none !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-red) !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;
    /* background-image: none !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-primary) !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(--btn-bg-primary) !important; */
    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;
}

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

.input-group-text {
    display: flex;
    align-items: center;
    padding: 0.275rem 0.75rem;
    font-size: 1.5rem;
    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;
    /* align-items: center; */
}

.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;
    /* background: var(--theme-bg-lt-primary); */

}

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

/* .noti-icons {
    width: 20px;
    height: 20px;
} */
.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;
}

/* .blink_me {
    animation: blinker 3s linear infinite;
    height: 14px;
    width: 14px;
    background: #909090;
    border-radius: 50%
} */

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

/* .btn-primary {
    background: #FF4107 !important;
    border-radius: 10px !important;
    color: #fff !important;
    border-color: #FF4107 !important;
} */

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

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

.BMSide {
    /* background: rgba(240, 113, 26, .1); */
    background: #f5f5f5;
    margin-bottom: 4px;
    border-radius: 10px;
}

.BMItems {
    width: 90%;
}

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

/* table.dataTables>tbody>tr>td>a {
    color: var(--text-primary) !important;
} */
.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;
    /* font-weight: bold; */
    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;
    /*top: auto !important;*/
    /*left: auto !important;*/
    /*!* left: 92% !important; *!*/
    /*transform: translate(-92%, -50%) !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%;
}

/* #loadHistory>.bi {
    color: var(--icon-white);
} */

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

/* .kanban-filter {
    background: var(--theme-bg-lt-primary);
    border-radius: 4px;
    cursor: pointer;
    width: 25px;
    height: 25px;
    font-size: unset;
    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;
    /*  top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);*/
}

@mixin ball {
    @include center;
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    /*  background: rgba(255, 255, 255, .5);*/
    background: #888;
    z-index: 2;
    margin-top: 4px;
    animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
}

/*--------------------
  Body
  --------------------*/

/*--------------------
  Chat
  --------------------*/

.chat {
    /* @include center; */
    width: 100%;
    height: calc(100% - 15px);
    /* max-height: 500px; */
    z-index: 10;
    overflow: hidden;
    /*box-shadow: 0 5px 30px rgba(0, 0, 0, .2);*/
    /* background: rgba(0, 0, 0, .5);*/
    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-top: 50px; */
    padding-bottom: 5px;
    background-color: #fff;
    text-transform: uppercase;
    text-align: center;
}

/* h1,
    h2 {
        font-weight: normal;
        font-size: 14px;
        margin: 0;
        padding: 0;

    } */

/* color: rgba(255, 255, 255, .8);*/
/* h2 {
        font-size: 11px;
        letter-spacing: 1px;
    } */

/* .avatar {
        position: absolute;
        z-index: 1;
        top: 8px;
        left: 9px;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px;
        width: 60px;
        height: 60px;
        overflow: hidden;
        margin: 0;
        padding: 0;
        border: 1px solid #fff;

        img {
            width: 100%;
            height: auto;
        }
    } */

/*--------------------
  Messages
  --------------------*/
.messages-content {
    /* position: absolute; */
    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;
    /*rgba(0, 0, 0, 0.1);*/
    margin: 8px 0;
    font-size: 14px;
    line-height: 1.4;
    /* margin-left: 35px; */
    /* position: relative; */
    border: 1px solid #ccc;
}

.messages {
    flex: 1 1 auto;
    /*  color: rgba(255, 255, 255, .5);
    color: #fff;*/
    overflow: hidden;
    /* position: relative; */
    width: 100%;
}

/*text-shadow: 0 1px 1px rgba(0, 0, 0, .2);*/
.timestamp {
    position: absolute;
    bottom: -15px;
    font-size: 10px;
    color: #555;
    right: 30px;
    /* color: rgba(255, 255, 255, .7);*/
}

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

/* &::before { */
/*  content: '';
        position: absolute;
        bottom: -6px;
        border-top: 6px solid rgba(0, 0, 0, 0.1);
        left: 0;
        border-right: 7px solid transparent;*/
/* } */

/* .avatar {
            position: absolute;
            z-index: 1;
            bottom: -15px;
            left: -35px;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            width: 30px;
            height: 30px;
            overflow: hidden;
            margin: 0;
            padding: 0;
            border: 2px solid rgba(255, 255, 255, 0.5);

            img {
                width: 100%;
                height: auto;
            }
        } */

.message-personal {
    width: auto;
    max-width: 100%;
    word-wrap: break-word;
    float: right;
    text-align: right;
    /*      background: linear-gradient(120deg, #ddd, #eee);*/
    background: #fff;
    border: 1px solid #ccc
        /*#4A90E2*/
    ;
    -webkit-border-radius: 20px 20px 0 20px;
    -moz-border-radius: 20px 20px 0 20px;
    border-radius: 20px 20px 0 20px;
}

/* &::before { */
/*
            content:"";
        border-color:#4A90E2 transparent;
          width:0;
          border-style:solid;*/
/*
          left: auto;
          right: 0;
          border-right: none;
         border-left: 8px solid transparent;
          border-top: 9px solid #fff;

          bottom: -8px;*/
/* } */

/* &:last-child {
            margin-bottom: 30px;
        }

        &.new {
            transform: scale(0);
            transform-origin: 0 0;
            animation: bounce 500ms linear both;
        } */

/* &.loading {
            &::before {
                @include ball;
                border: none;
                animation-delay: 0.15s;
            }

            & span {
                display: block;
                font-size: 0;
                width: 20px;
                height: 10px;
                position: relative;

                &::before {
                    @include ball;
                    margin-left: -7px;
                }

                &::after {
                    @include ball;
                    margin-left: 7px;
                    animation-delay: 0.3s;
                }
            }
        } */
/* }
} */

/*--------------------
  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: #c29d5f;*/
    background: #fff;
    font-size: 12px;
    text-transform: uppercase;
    border-radius: 5px;
    outline: none !important;
    transition: background 0.2s ease;
    cursor: pointer;

    /* &:hover {
            background: #fff;
            color: #333;
        } */
}

/*--------------------
  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;
    /* box-shadow: 2px 10px 40px rgba(22, 20, 19, 0.4); */
    /*  transform: translateY(0);
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
    */
    /*  transform: translateX(300px);*/
    -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;
}

/* .avenue-messenger div {
    font-size: 14px;
    color: #232323;
} */

/* .close {
    display: block;
    width: 100px;
    height: 100px;
    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;
    opacity: 0.5;
}

.close:hover {
    opacity: 0.9;
} */

.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;
    /*#4A90E2;*/
    /* -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
  box-shadow: 0px 0px 10px rgba(0,0,0,.8);*/
}

.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 div.items {
     height: 140px;
    width: 180px;
    overflow: hidden;
    position: absolute;
    left: -130px;
    z-index: 2;
    top: 20px;
} */

.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;
    /*  border-top-left-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 .button:hover .menu .items span {
    display: block;
    left: -2px;
    opacity: 1;
  }*/

.menu .items span.active {
    opacity: 1;
    /*border-radius:10px;
    height: 180px;
    width: 400px;
    transform:translateY(0);
    -webkit-transform:translateY(0);
    -moz-transform:translateY(0);*/
}

.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;
        /* left:initial !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;
}

/* .memberImgAvatar{
    width: 40px;
    height: 40px;
    margin-right: 10px;
} */

.selectedMemberBox {
    height: 200px;
    padding: 5px;
    overflow: auto;
}

.memberNameBox {
    /* background: var(--theme-bg-white);
    border: 1px solid var(--border-gray);
    border-radius: 10px;
    padding: 4px;
    width: fit-content;*/
    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;
    /* width: fit-content; */
    /* margin-bottom: 5px; */
}

/* 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 {
    /* width: 60%; */
    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: #29A1DB; */
    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;
    /* margin-bottom: 10px; */
    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;
    /* margin-bottom: 10px; */
}

.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;
    /* justify-content: space-between !important; */
    box-shadow: none !important;
    border-radius: 0px !important;
    background: var(--theme-bg-white) !important;
    /* margin-bottom: 10px; */
    padding: 10px !important;
    width: 100% !important;
}

.folder-side-options:hover {
    color: var(--text-black);
}

/* Email Sidebar end*/
/* #NewSearchToCompose> .select2-selection--multiple {
    border: none !important;
} */
.CC-BCC-main {
    display: flex !important;
    border: 1px solid var(--border-gray);
    border-radius: 10px;
    background: var(--theme-bg-white);
    padding: 0 !important;
}

/* .select-border-style {
    border: 1px solid var(--border-gray);
    border-radius: 10px;
    background: var(--theme-bg-white);
} */

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

/* .select-border-none{
    border: 0px !important;
} */
.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;
}

/* .CC-BCC-Box{
    display: flex;
} */
.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: var(--theme-bg-primary); */
    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;
    /* display: '-webkit-box';
    -webkit-box-orient: 'vertical';
    overflow: 'hidden';
    text-overflow: 'ellipsis';
    -webkit-line-clamp: 3;
    line-clamp: 3; */
}

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

/* @media (max-width:600px) {
    .downloadText {
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
} */

/* 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;
    /* border: none !important; */
    box-shadow: none !important;
    color: var(--text-black) !important;
    /* padding: 6px 12px !important; */
    text-shadow: none !important;
    opacity: unset !important;
    /* background-image: none !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;
}

/* .metismenu-main {
    background: red;
} */
.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;
    /* margin-top: -83px;
    margin-left: -50px; */
    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);
    /* height: 100%; */
}

.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;
    /* border-radius: 0px 0px 10px 10px; */
}

#extensionTable {
    border-radius: 20px;
    /* border-radius: 10px 0px 10px 10px; */
}

.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);
    /* border: 1px solid #ededed; */
    cursor: pointer;
}

.unseenChat-icon {
    width: 43px;
    /* border: 1px solid var(--theme-bg-primary); */
    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: var(--gradient-fr) !important; */
    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;
    /* min-height: 24px; */
    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);
    /* margin: 0 4px 4px 0; */
}

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

/* #salesByUpsallerChart {
    max-width: 100%;
    max-height: 180px;
    opacity: 0.9;
  } */

/* sami css  */

#salesByFrontSallerChart {
    /* max-width: 700px; */
    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: 280px; */
    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 {
    max-width: 200px;
    max-height: 200px;
    opacity: 0.9;
} */
#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;
}

/* .unseenChatMainbtn {
    flex-wrap: wrap;
} */

main.msger-chat {
    flex-wrap: wrap;
    overflow-y: hidden;
    flex: 0 0 100%;
    /* max-height: 190px; */
    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;
    /* width: 100%; */
    /* display: flex;
    align-items: end;
    flex-direction: column; */
}

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;
    /* width: 70%; */
}


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);
    /* Creates two equal-width columns */
    gap: 10px;
    /* Optional: Adds space between the columns */
}

.wrapper-item {
    /* background-color: lightgray;  */
    /* padding: 20px; */
    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);
    /* 12-column grid */
    gap: 1rem;
    /* Spacing between items */
}

.grid-item {
    padding: 0 1rem;
    /* background-color: #f9f9f9;  */
    /* border: 1px solid #ddd;  */
    /* border-radius: 8px;  */
}

.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;
    /* max-width: 256px; */
    top: 42px;
    /* left: 86px; */
    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;
    /* max-width: 256px; */
    top: 42px;
    /* left: 86px; */
    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;
    /* max-width: 256px; */
    top: 92px;
    /* left: 97px; */
    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;
    /* max-width: 256px; */
    top: 95px;
    /* left: 115px; */
    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;
}


/*.assignment-lead-count-fr{*/
/*    top: 50%;*/
/*}*/
/*.assignment-lead-text{*/
/*    top: 70%;*/
/*}*/
/*.assignment-lead-count-fr,*/
/*.assignment-lead-text {*/
/*    position: absolute;*/

/*    left: 50%;*/
/*    transform: translate(-50%, -50%);*/
/*}*/
#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;
}

/* .top-button .btn-primary {
    background-color: var(--theme-bg-primary);
    font-size: 12px;
    padding: 6px 15px 6px 15px;
} */

.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: 22px !important; */
    top: 50% !important;
    /* left: 50% !important; */
    transform: translate(0%, -50%) !important;
}