@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');

body {
    font-family: system-ui !important;
    background-color: #F8F8F8;
}

.customScroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.customScroll::-webkit-scrollbar {
    background-color: #CAE9FC;
}

.customScroll {
    scrollbar-color: #42A4DF #CAE9FC;
}

.customScroll::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: #42A4DF;
}

.main-header .nav-link:hover {
    background:none !important;
    border:none !important;
}

.main-header .nav-link:focus-visible {
    outline: none;
    border:none !important;
}

/* ----font size-------- */
.fs-10{
    font-size: 10px;
    margin-bottom: 0px;
}

.fs-11 {
    font-size: 11px;
    margin-bottom: 0px;
}

.fs-12 {
    font-size: 12px;
    margin-bottom: 0px;
}

.fs-13 {
    font-size: 13px;
    margin-bottom: 0px;
}

.fs-14 {
    font-size: 14px;
    margin-bottom: 0px;
}

.fs-15 {
    font-size: 15px !important;
    margin-bottom: 0px;
}

.fs-16 {
    font-size: 16px !important;
    margin-bottom: 0px;
}

.fs-17 {
    font-size: 17px !important;
    margin-bottom: 0px;
}

.fs-18 {
    font-size: 18px !important;
    margin-bottom: 0px;
}

.fs-19 {
    font-size: 19px !important;
    margin-bottom: 0px;
} 

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

.fs-21 {
    font-size: 21px;
    margin-bottom: 0px;
}

.fs-22 {
    font-size: 22px;
    margin-bottom: 0px;
}

.fs-23 {
    font-size: 23px;
    margin-bottom: 0px;
}

.fs-24 {
    font-size: 24px !important;
    margin-bottom: 0px;
}

.fs-28 {
    font-size: 28px;
    margin-bottom: 0px;
}

.fs-40 {
    font-size: 40px;
    margin-bottom: 0px;
}

/* ----end font size-------- */

/* ----font weight-------- */
.fw-400 {
    font-weight: 400 !important;
}

.fw-500 {
    font-weight: 500;
}

.fw-550 {
    font-weight: 550;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}

/* ----end font weight-------- */

/* ----font color-------- */
.black {
    color: #171B1E;
}

.blue {
    color: #2072CB !important;
}

.bgblue {
    background: #F4F6F9;
}

.lightgray {
    color: #727272;
}

.skyblue {
    color: #21A9E1;
}

.dark {
    color: #0D2D3A;
}

.hoverTr:hover {
    background: #EEF4FE;
}

.br-0 {
    border-radius: 0px !important;
}

.gap-1 {
    gap: 10px;
}

.gap-2 {
    gap: 20px;
}

.gap-3 {
    gap: 30px;
}

.gap-4 {
    gap: 40px;
}

/* ----end font color-------- */
.pointer {
    cursor: pointer;
}

#pauseButton,
#stopButton {
    filter: invert(1);
}

.wrapper {
    /*background: aliceblue;*/
}

/* .nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    height: 47px !important;
    display: flex !important;
    align-items: center !important;
    background: rgba(33, 169, 225, 0.1);
    border-radius: 5px;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    color: #0D2D3A;
} */

.nav-pills .nav-item {
    width: 200px;
}

.info p {
    font-size: 20px !important;
    font-weight: 400 !important;
}

.cursor {
    cursor: pointer;
}

.quickActionText {
    font-size: 15px !important;
    font-weight: 700 !important;
    margin-bottom: 0 !important;
    color: white !important;
}

.quickAction {
    display: flex !important;
    justify-content: center !important;
    height: 47.2px;
    background: #21A9E1;
    border-radius: 5px;

}

.nav-pills .nav-link {
    color: #6c757d;
}

.nav-link:hover {
    color: #6c757d !important;
}

.nav-link.active:hover {
    /*height: 47px !important;*/
    display: flex !important;
    align-items: center !important;
    background: rgba(33, 169, 225, 0.1) !important;
    border-radius: 5px;
    font-style: normal;
    /*font-weight: 700;*/
    /*font-size: 18px;*/
    /*line-height: 22px;*/
    color: #0D2D3A !important;
}


.chart-card-header {
    color: white !important;
    background: linear-gradient(90deg, #5FB855 0%, #5FB855 0.1%, #4CACF0 100%) !important;
}

.statsView {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 0;
    color: #171B1E;
}

.fa-bars {
    font-size: 20px;
    color: #171B1E;
}

.topMiniCardBlue {
    height: 67px;
    display: flex;
    align-items: center;
    padding-left: 20px;
    /* justify-content: center; */
    background: rgba(33, 169, 225, 0.1);
    box-shadow: 0px 7px 15px rgba(0, 0, 0, 0.1);
    border-radius: 50px;
}

.topMiniCardRed {
    height: 67px;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    padding-left: 20px;
    background: rgba(255, 91, 91, 0.1);
    box-shadow: 0px 7px 15px rgba(0, 0, 0, 0.1);
    border-radius: 50px;
}

.topMiniCardGreen {
    box-shadow: 0px 4px 4px #2EA94B;
    height: 67px;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    padding-left: 20px;
    background: rgba(46, 169, 75, 0.1);
    box-shadow: 0px 7px 15px rgba(0, 0, 0, 0.1);
    border-radius: 50px;
}

.miniCardImgWrapBlue {
    height: 52px;
    width: 52px;
    border-radius: 50%;
    background-color: #2B98D6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.miniCardImgWrapRed {
    height: 52px;
    width: 52px;
    border-radius: 50%;
    background-color: #FF5B5B;
    display: flex;
    align-items: center;
    justify-content: center;
}

.miniCardImgWrapGreen {
    height: 52px;
    width: 52px;
    border-radius: 50%;
    background-color: #2EA94B;
    display: flex;
    align-items: center;
    justify-content: center;
}

.miniCardCountBlue {
    font-size: 24px;
    font-weight: 500;
    color: #2B98D6;
    height: 25px;
}

.miniCardCountRed {
    font-size: 24px;
    font-weight: 500;
    color: #FF5B5B;
    height: 25px;
}

.miniCardCountGreen {
    font-size: 24px;
    font-weight: 500;
    color: #2EA94B;
    height: 25px;
}

.miniCardText {
    font-size: 20px;
    font-weight: 500;
    color: #0F0F0F;
    margin-bottom: 0;
}

.cursor {
    cursor: pointer !important;
}

.topSearchBar {
    background: #E0E0E0;
    height: 45px;
    border: 0;
    border-radius: 30px;
    padding: 0px 15px;
}

.topSearchBarIcon {
    height: 42px;
    width: 42px;
    border-radius: 10px;
    background-color: #3978C8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.searchSuggestionsDiv {
    max-height: 300px;
    overflow: auto;
    position: absolute;
    width: 100%;
    top: 50px;
    background-color: white;
    box-shadow: 0px 0px 11px -6px rgb(0 0 0 / 75%);
    border: 1px solid #eee;
    border-radius: 5px;
    padding: 5px 15px;
}

.customCol3 {
    flex: 0 0 22%;
    max-width: 22%;
}

@media (min-width: 320px) {
    .customCol3 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 768px) {
    .customCol3 {
        flex: 0 0 30%;
        max-width: 30%;
    }
}

.topBigCardBlue {
    background-color: #1A96EE;
    height: 138px;
    border-radius: 15px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
}

.topBigCardRed {
    background-color: #FF5B5B;
    height: 138px;
    border-radius: 15px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
}

.topBigCardGreen {
    background-color: #2EA94B;
    height: 138px;
    border-radius: 15px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
}

.topBigCardYellow {
    background-color: #D9A016;
    height: 138px;
    border-radius: 15px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
}

.topBigCardHeading {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 0;
    color: white;
    position: absolute;
    top: 10px;
    left: 20px;
}

.topBigCardCount {
    font-size: 43px;
    font-weight: 700;
    margin-bottom: 0;
    color: white;
    line-height: initial;
}

.topBigCardPeriod {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 0;
    color: #F2F3F6;
}

.topCardPosition {
    position: absolute;
    top: 35px;
    left: 20px;
}

.topCard {
    background: #FFFFFF;
    box-shadow: 0px 7px 15px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    height: 100px;
    border-radius: 15px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
}

.topCard span,
.topCard .topBigCardCount,
.topCard .topBigCardPeriod {
    color: #0D2D3A !important;
}

.imgbg {
    background: rgba(33, 169, 225, 0.05);
    border-radius: 13px;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.todayLogsPoint {
    font-style: normal;
    font-weight: 700;
    font-size: 15px;
    line-height: 25px;
    color: #4DA944;
    margin-bottom: 0;
}

.topBigCardDetail {
    font-size: 21px;
    font-weight: 400;
    margin-bottom: 0;
    color: white;
    position: absolute;
    top: 95px;
    left: 20px;
}

.selectSms {
    color: white;
    width: 85px;
    background-color: #2EA94B;
    height: 23px;
    border: 1px solid #74D46C;
    font-size: 12px;
    font-weight: 500;
}

.cardSide {
    background-color: #EEF4FE;
}

.graphTags {
    height: 53px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    background-color: #1A96EE;
    gap: 10px;
}

.pinkTag {
    background: #FF5B5B;
}

.lightbrownTag {
    background: #D9A016;
}

.greenTag {
    background: #2EA94B;
}

.graphTabsText {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 0;
    color: white;
}

.modalBlock {
    background: #EEF4FE;
    height: 117px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.doneModalHeader {
    background: #E8F2FA;
    border: 2px solid rgba(33, 169, 225, 0.4);
    box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.15);
    border-radius: 20px 20px 0px 0px;
}

.modal-backdrop {
    background-color: white;
}

.modal-open .modal {
    background-color: #ffffffbd;
}

.modalToggleBlock {
    padding-left: 10px;
    /* height: 33px; */
    width: 100%;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    background-color: #F4F6F9;
}

.modalTextBlock {
    margin-left: 10px;
    border-left: 5px solid white;
    padding: 10px;
    /* width: 100%;
    border: 1px solid #DCDFE2;
    display: flex;
    align-items: center;
    background-color: #F4F6F9; */
}

.modalSecondDivBox {
    background-color: #EEF4FE;
    padding: 10px 30px 10px 15px;
    margin-left: -13px;
    gap: 10px;
    display: grid;
}

/* Slider Button */

.switch {
    position: relative;
    display: inline-block;
    min-width: 36px;
    height: 18px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ABAFB3;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

input:checked+.slider {
    background-color: #2A53AD;
}

input:focus+.slider {
    box-shadow: 0 0 1px #2A53AD;
}

input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
    left: -6px;
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* Slider Button end*/

.blue-card-header {
    background: linear-gradient(90deg, #275CB6 0%, #275CB6 0.1%, #4CACF0 100%);
}

.card-title {
    font-style: normal;
    font-weight: 400;
    font-size: 18.719px;
    line-height: 25px;
    color: #FFFFFF;
}

/* -----table---- */
.table thead th:first-child,
.table tbody td:first-child {
    text-align: center;
}

.table thead th:last-child,
.table tbody td:last-child {
    text-align: center;
}

.tablePermission tbody td {
    border: 1px solid #DCDFE2;
}

/* .table thead th:last-child {
    padding-right: 30px;
} */

.tablePermission thead th:first-child,
.tablePermission tbody td:first-child {
    padding-left: 30px;
    text-align: start;
}

.tablePermission thead th:first-child {
    border-radius: 0 0 0 15px;
}

.tablePermission thead th:last-child {
    border-radius: 0 15px 15px 0;
}

.tablePermission tbody td,
.tablePermission thead th {
    text-align: center;
    padding: 15px;
}

.tablePermission thead th:last-child {
    padding-right: 30px;
}

.dashboard-table thead th {
    font-style: normal;
    font-weight: 550;
    font-size: 15px;
    line-height: 22px;
    color: #02013D;
    text-align: center;
}

.dashboard-table tbody td {
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 19px;
    vertical-align: middle;
    color: #02013D;
    vertical-align: middle;
    background: #EEF4FE;
    height: 65px;
    text-align: center;
}

.agent-td {
    background: #41AC47;
    border-radius: 25px;
    height: 22px;
    justify-content: center;
    align-items: center;
    display: flex;
    color: white;
}

.close-td {
    background: #345BA8;
    border-radius: 25px;
    height: 22px;
    justify-content: center;
    align-items: center;
    display: flex;
    color: white;
    width: 68px;
}

/* -----------end table------------- */

/* ----------media query---------- */

/* -----lg screen ------ */
@media (min-width: 481px) and (max-width : 961px) {
    .graphTabsText {
        font-size: 16px;
    }
}

/* -----lg screen ------ */
@media (min-width: 992px) and (max-width : 1200px) {
    .graphTabsText {
        font-size: 14px;
    }

    /* .signupbg-img {
        background-size: 517px 993px !important;
    } */

    .signup-text-position {
        right: 41px !important;
        top: 200px !important;
    }
}

/* -----1750 to 2150 ------ */

@media (min-width: 1750px) and (max-width : 2150px) {
    /* .signupbg-img {
        background-size: 840px 993px !important;
    } */

    .signup-img-subHeading {
        font-size: 16px !important;
    }
}

/* -----2151 to 2660 ------ */

@media (min-width: 2151px) and (max-width : 2660px) {
    /* .signupbg-img {
        background-size: 1055px 993px !important;
    } */

    .signup-img-subHeading {
        font-size: 21px !important;
    }
}

/* ---------- end media query---------- */



/* ------SignUp and login css--------- */
.signUp-bg {
    background-color: #F8F8F8;
}

.signUp-component {
    background: #FFFFFF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.signUpLabel {
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    color: #2C2C2E;
}

.signUpLabel span {
    color: #FF5B5B;
}

.signUpInputField {
    background: #F4F6F9;
    border: 1px solid #DCDFE2;
    height: 50px;
    width: 100%;
    padding-left: 20px;
    border-radius: 2px;
}

input:focus {
    outline: none;
}

.btn-back,
.btn-next {
    background: #B9C1CA;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 7px;
    font-size: 20px;
    color: #FFFFFF;
    width: 100%;
}

.btn-next {
    background: #2C6CBB;
}

.signupbg-img {
    background-image: url('../img/signup-img.png');
    height: 100%;
    /* background-size: 674px 993px; */
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: bottom;
}

.signup-img-heading {
    font-style: normal;
    font-weight: 500;
    font-size: 25px;
    line-height: 34px;
    color: #2A53AD;
}

.signup-img-subHeading {
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    line-height: 27px;
    color: #9299A2;
}

.signup-text-position {
    position: absolute;
    right: 65px;
    top: 370px;
}

.signup-link {
    font-style: normal;
    font-weight: 500;
    font-size: 30px;
    line-height: 34px;
    color: #2A53AD;
}

.loginHeading {
    font-style: normal;
    font-weight: 500;
    font-size: 30px;
    line-height: 34px;
    color: #2A53AD;
}

.login-text-position {
    position: absolute;
    top: 130px;
    left: 165px;
}

/* ------end SignUp and login css--------- */


/* Inbox page CSS */

.inboxTable thead th {
    background: #DCDFE2;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    height: 54px;
    color: #333333;
    vertical-align: middle !important;
    text-align: start;
}

.inboxTable tbody td {
    height: 70px;
    background: #F4F6F9;
    border-top: 1px solid #DCDFE2;
    border-bottom: 1px solid #DCDFE2;
}

.inboxTable tr td:first-child,
.inboxTable tr th:first-child {
    padding-left: 40px;
}

.inboxTableCompany {
    height: 38px;
    background-color: #007BFF;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.iconBox {
    background: radial-gradient(70.7% 70.7% at 50% 50%, #1456BE 0%, #1456BE 0.1%, #398EEF 100%);
    border: 1px solid #E0E0E0;
    border-radius: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 3px;
    margin-right: 0.5rem !important;
}

.prevLead {
    height: 45px;
    background: #21A9E1;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    color: white;
    width: max-content;
    padding: 0 15px;
    margin-right: 0.5rem !important;
}

.nextLead {
    background: #3978C8;
    height: 45px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    color: white;
    width: max-content;
    padding: 0 15px;
}

.chatSent {
    background: #A5AFBA;
    position: relative;
    border-radius: 6px;
    padding: 5px 0 0 5px;
    width: 200px;
    float: right;
    margin-right: 15px;
}

.chatSent:before {
    display: block;
    clear: both;
    content: "";
    position: absolute;
    top: 0px;
    right: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 12px 15px 12px;
    border-color: transparent transparent #A5AFBA transparent;
    -webkit-transform: rotate(37deg);
    -ms-transform: rotate(37deg);
    transform: rotate(180deg);
}

.chatReceived {
    background: #B9C1CA;
    position: relative;
    border-radius: 6px;
    padding: 5px 0 0 5px;
}

.chatReceived:before {
    display: block;
    clear: both;
    content: "";
    position: absolute;
    top: 0px;
    left: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 12px 15px 12px;
    border-color: transparent transparent #B9C1CA transparent;
    -webkit-transform: rotate(37deg);
    -ms-transform: rotate(37deg);
    transform: rotate(180deg);
}

.chatReceivedInner {
    background: #F2F2F7;
    position: relative;
    border-radius: 6px;
    padding: 5px 10px;
}

.chatReceivedInner:before {
    display: block;
    clear: both;
    content: "";
    position: absolute;
    top: 0px;
    left: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 12px 15px 12px;
    border-color: transparent transparent #F2F2F7 transparent;
    -webkit-transform: rotate(37deg);
    -ms-transform: rotate(37deg);
    transform: rotate(180deg);
}

.chatSentTick {
    display: flex;
    align-items: center;
    justify-content: end;
    color: white;
}

.chatReceivedTime {
    display: flex;
    align-items: center;
    justify-content: end;
    color: #666668;
}

.chatFooter {
    height: 206px;
    background: #F4F6F9;
    padding: 15px 30px 15px 30px;
}

.slctLang {
    height: 45px;
    border-radius: 10px;
    border: 0;
    font-size: 14px;
    font-weight: 700;
    width: 220px;
    padding-left: 10px;
}

.chatInput {
    background-color: white;
    font-size: 20px;
    font-weight: 600;
    padding-left: 135px;
    padding-right: 85px;
    height: 90px;
    border: 0;
    width: 100%;
    box-shadow: inset 0px 1px 0px #E5E5EA;
}

.chatInputBox {
    margin-top: 30px;
    position: relative;
}

.plusIconBox {
    height: 60px;
    width: 60px;
    background-color: #337AC7;
    color: white;
    font-size: 48px;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
    padding-bottom: 6px;
}

.inputIconBox {
    margin-top: -75px;
    margin-left: 15px;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 108px;
}

.smsSendIcon {
    float: right;
    margin-top: -45px;
    position: relative;
    margin-right: 35px;
}

.chatHeader2 {
    background: #E8F2FA;
    border: 2px solid #bed7e2;
    box-shadow: 0px 7px 18px rgba(0, 0, 0, 0.1);
    border-radius: 0px 10px 10px 10px;
    height: 85px;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 7px;
}

.chatBody2 {
    padding: 15px 25px 15px 25px;
    background: #EDEFF1;
}

.appointment {
    background: linear-gradient(0deg, #66BC45 0%, #5EB777 100%);
    height: 45px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    color: white;
    width: 172px;
    box-shadow: 0px 4px 4px #76757563;
}

.reminder {
    background: linear-gradient(0deg, #256CD9 0%, #2D7FE1 50.6%, #469CFD 100%);
    height: 45px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    color: white;
    width: 172px;
    box-shadow: 0px 4px 4px #76757563;
}

.chatBodyHead {
    background: #B9C1CA;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    height: 102px;
    padding: 10px 30px 10px 30px;
}

.dispositionDropdown {
    color: #717579;
    border: 0;
    border-radius: 15px;
    height: 43px;
    padding: 8px 20px;
    margin-top: 5px;
}

.formColor {
    background: #FFFFFF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    padding: 30px 10px;
    margin-left: 0;
    margin-right: 0;
}

.formInputFields {
    background: #F4F6F9;
    border: 1px solid #DCDFE2;
    height: 40px;
    padding: 0 20px 0 20px;
    width: 100%;
}

.updateInfoButton {
    background: #2C6CBB;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 15px;
    height: 60px;
    border: 0;
    color: white;
    width: 100%;
}

/* Inbox page CSS end */

/* Custom Scrollbar */

.customScroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.customScroll::-webkit-scrollbar {
    background-color: #EEF4FE;
}

.customScroll {
    scrollbar-color: #D9D9D9 #CAE9FC;
}

.customScroll::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: #D9D9D9;
}

/* Custom Scrollbar end */

/* Compaign page CSS */

.compaignBox {
    background-color: #EEF4FE;
    border-radius: 10px;
    box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
}

.dateRangeDiv {
    height: 120px;
    background: #B9C1CA;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.targetsHeader {
    height: 63px;
    background: linear-gradient(90deg, #275CB6 0%, #275CB6 0.1%, #4CACF0 100%);
    border-bottom: 4px solid #49b45e;
    display: flex;
    align-items: center;
}

.targetsBody {
    border: 2px solid #B9C1CA;
    border-radius: 0 0 10px 10px;
}

.targetsBodyDiv {
    height: 230px;
    overflow: auto;
}

.selectableTags {
    background: #F4F6F9;
    border: 1px solid #DCDFE2;
    height: 40px;
    display: flex;
    justify-content: start;
    align-items: center;
    cursor: pointer;
}

.selectableTags p {
    color: #A3A8AC;
}

.selectedTagsBody {
    background: #EEF4FE;
    border-radius: 7px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.selectedTags {
    background: #B9C1CA;
    height: 32px;
    width: max-content;
    color: #2A53AD;
    display: flex;
    align-items: center;
}

.deselectBtn {
    background: #2C6CBB;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 7px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border: 0;
}

/* Compaign page CSS end*/

/* SignIn page */

.signInBg {
     background: linear-gradient(180deg, #2466C0 0%, #4CACF0 100%); 
    /*background: #FFFFFF;*/
    box-shadow: 0px 7px 15px rgba(0, 0, 0, 0.1);
    padding: 10px 15px;
}

.signInBgImgBlock {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%23343a40%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27M2 5l6 6 6-6%27/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: 96% 55% !important;
    background-size: 14px 10px !important;
}

.form-select:focus {
    outline: none !important;
}

select {
    /* for Firefox */
    -moz-appearance: none;
    /* for Chrome */
    -webkit-appearance: none;
}

/* For IE10 */
select::-ms-expand {
    display: none;
}

.signInDiv {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* SignIn page end*/


.quick-action-div {
    background: #ffffff;
    position: absolute;
    z-index: 111111;
    top: 48px;
    left: 6px;
    transition: all 0.5s ease;
    display: none;
    border: 1px solid #eee;
    border-radius: 5px;
    box-shadow: 0px 9px 24px -7px rgb(0 0 0 / 68%);
}

@media (min-width: 1825px) {
    .customDivs {
        flex: 0 0 16%;
        max-width: 16%;
        margin-right: 10px;
    }
}

/* @media (min-width: 1220px) and (max-width : 1920px) {
    .customDivs {
        flex: 0 0 15%;
        max-width: 15%;
        margin-right: 10px;
    }
}

.customDivs {
    flex: 0 0 15%;
    max-width: 15%;
    margin-right: 10px;
} */


/* --------blast page-------- */

.fixed-button.wobble {
    right: 100px;
}

.border-none {
    border: none;
    font-size: 18px;
    text-align: right;
}

.role-select {
    border: none;
    text-align-last: right;
}

.role-select option {
    direction: rtl;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: none;
}

.select2-container--default .select2-selection--multiple {
    direction: rtl;
    background: #FFFFFF !important;
    border: 1px solid #E1E6EF !important;
    border-radius: 8px !important;
}

.select2 .select2-hidden-accessible option {
    direction: rtl;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #007bff !important;
    border: 1px solid #007bff !important;
    float: right !important;
}

.fixed-button {
    background-color: #007bff;
    color: #FFFFFF;
    border: none;
    outline: none;
    position: fixed;
    bottom: 0px;
    right: 15px;
    height: 60px;
    width: 60px;
    margin-bottom: 20px;
    border-radius: 40px;
    box-shadow: 1px 3px 5px #888888;
    z-index: 1111;
}

@keyframes wobble {
    16.65% {
        -webkit-transform: translateY(8px);
        -ms-transform: translateY(8px);
        transform: translateY(8px);
    }

    33.3% {
        -webkit-transform: translateY(-6px);
        -ms-transform: translateY(-6px);
        transform: translateY(-6px);
    }

    49.95% {
        -webkit-transform: translateY(4px);
        -ms-transform: translateY(4px);
        transform: translateY(4px);
    }

    66.6% {
        -webkit-transform: translateY(-2px);
        -ms-transform: translateY(-2px);
        transform: translateY(-2px);
    }

    83.25% {
        -webkit-transform: translateY(1px);
        -ms-transform: translateY(1px);
        transform: translateY(1px);
    }

    100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

.wobble {
    -webkit-animation-name: wobble;
    animation-name: wobble;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

.no-data {
    text-align: center;
    font-style: italic;
    color: #ccc;
}

.nj-picker {
    z-index: 11111;
}

.paginations {
    display: -ms-flexbox;
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: .25rem;

}

.img_view {
    text-align: center;
    border: 1px solid #eee;
    background: #fafafa;
    margin-top: 17px;
}

.editimg_view {
    text-align: center;
    border: 1px solid #eee;
    background: #fafafa;
    margin-top: 17px;
}

.draft_body {
    position: absolute;
    top: 33px;
    right: 60px;
    color: red;
    font-weight: bold;
}

.activateblast {
    background: green;
    font-weight: bold;
    color: #fff;
}

.activateblast:hover {
    background: #025802;
    font-weight: bold;
    color: #fff;
}

.percentage_body {
    position: absolute;
    top: 28px;
    background: #f4fbff;
    font-weight: bold;
    right: 185px;
    padding: 4px 0px;
    width: 105px;
    text-align: center;
    border-radius: 5px;
    color: #099eff;
    border: 1px solid #e1f3ff;
}

.percentage_body>i {
    color: #ff8f8f;
    font-size: 14px;
    filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.5);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    display: inline-block;
}

.modal {
    z-index: 1250;
    background: rgb(255 255 255 / 75%);
    -webkit-background: rgb(255 255 255 / 75%);
    -o-background: rgb(255 255 255 / 75%);
    -moz-background: rgb(255 255 255 / 75%);
}

.blast_main {
    /* width: 82%; */
    min-height: 90vh !important;
    background: #fafafa;
    position: fixed;
    /* z-index: 1111; */
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    overflow: auto;
}

.blast_main>span {
    float: right;
    right: 30px;
    top: 3px;
    position: absolute;
    font-size: 50px;
    color: #bdbdbd;
    cursor: pointer;
}

.my-width {
    width: 100%;
}

.is_mobile_img {
    max-height: 200px;
    overflow: hidden;
    overflow-y: auto;
}

.blast_cont {
    display: flow-root;
    padding: 25px 20px 50px;
    border: 1px solid #eee;
    background: #fefefe;
}

/* .blast_cont>h2 {
    width: 100%;
    display: block;
    text-align: center;
    padding-bottom: 10px;
    margin-bottom: 10px;
} */

.blast_left {
    width: 70%;
    float: left;
    /* margin: 0 0 0 3%; */
    padding: 0px 10px;
}

.blast-right {
    width: 30%;
    float: left;
    /* margin-left: 1%; */
    padding: 20px 10px;
    position: relative;
}

.select2-container {
    z-index: 11111;
}

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

.select2-container--default .select2-selection--multiple .select2-selection__choice,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected]:hover {
    margin-top: 7px !important;
    background: #F1F3F9 !important;
    border-radius: 77.7898px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 16px !important;
    letter-spacing: 0.02em !important;
    text-transform: capitalize !important;
    color: #1D2433 !important;
    border: 0px !important;
    height: 31.12px !important;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    padding-left: 15px;
    padding-right: 15px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #1D2433 !important;
    /* margin-top: -2px !important; */
    border: 1px solid #1D2433;
    border-radius: 50px;
    width: 15.96px !important;
    height: 15.96px !important;
    line-height: 0px;
    text-align: center;
    line-height: 12px;
}

.reachable_audience {
    background: #007bff;
    width: 120px;
    padding: 10px 0;
    display: block;
    position: fixed;
    margin-left: -80px;
    margin-top: -9px;
    text-align: center;
    color: #fff;
    border-radius: 2px;
}

.reachable_audience2 {
    background: #52bd0f;
    width: 120px;
    height: 120px;
    padding: 10px 0;
    display: block;
    position: fixed;
    margin-left: -80px;
    margin-top: 120px;
    text-align: center;
    color: #fff;
    z-index: 999999;
}

#send_from_number {
    font-size: 14px;
}

.send_from_number_btn {
    color: #fdff7e;
    text-transform: uppercase;
    text-decoration: underline;
}

.send_from_number_btn:hover {
    font-weight: bold;
    color: #fdff7e;
    text-transform: uppercase;
    text-decoration: underline;
}

.our_phone,
.our_phone_edit {
    position: absolute;
    top: 100px;
    right: 50px;
    background: #dde;
    padding: 7px 12px;
    width: 157px;
    border-radius: 10px;
    text-align: left;
    font-size: 11px;
    line-height: 15px;
    overflow-wrap: break-word;
    max-height: 195px;
    overflow: auto;
}

.siderange::-webkit-slider-runnable-track {
    width: 100%;
    height: 5px;
    background: #CDCDCD !important;
    border-radius: 5px;
}

.siderange::-webkit-slider-thumb {
    height: 11px;
    width: 11px;
    border-radius: 50%;
    background: #CDCDCD !important;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -5px;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 5px;
    background: #FFFFFF;
    border-radius: 5px;
}

input[type=range]::-webkit-slider-thumb {
    height: 11px;
    width: 11px;
    border-radius: 50%;
    background: #6B6B6B;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -5px;
}

.toggleDiv {
    display: none;
}

audio {
    width: 100% !important;
}

.visualizer {
    width: 100%;
    display: none;
}

.our_phone,
.our_phone_edit {
    display: none;
}

.role-select,
.form-control {
    font-size: 15px;
}


.select2-selection {
    background: #f1faff !important;
    min-height: 30px;
}

/* @media (max-width: 1200px) {
    .blast_cont {
        width: 90%;
        margin: 18px 2% 0 0;
        float: right;
    }
} */

@media (max-width: 1000px) {
    /* .blast_main {
        height: 150%
    } */

    .blast_left {
        width: 100%;
    }

    .blast-right {
        width: 100%;
        text-align: center !important;
        float: left;
        margin: 0;
    }

    /* .blast-right>img {
        width: 300px;
    } */
    .reachableAudience {
        font-size: 20px;
    }

    .our_phone,
    .our_phone_edit {
        right: 42px;
        width: 100px;
        top: 70px;
        max-height: 135px;
    }

    .our_phone h3 {
        font-size: 12px !important;
    }

    .input-group-prepend {
        margin-right: -5px;
    }

    /* .our_phone_audio audio {
        width: 150px !important;
        height: 33px !important;
    } */

    .noti-div {
        right: auto !important;
    }
}

@media (max-width: 768px) {
    /* .blast_cont {
        margin: 18px 1% 0 0;
    } */

    .hide_in_sm {
        display: none;
    }

    .date-input {
        border: 1px solid #eee;
        width: 49% !important;
        margin-right: 1% !important;
    }

    .my-minus {
        margin-right: 5px;
    }

    .my-btn>button {
        width: 32.3% !important;
        margin: 8px .2% 5px !important;
    }

    /* .our_phone_audio audio {
        width: 140px !important;
        height: 33px !important;
    } */
}

@media (max-width: 580px) {
    /* .blast_main {
        height: 190%
    } */

    /* .blast_cont {
        margin: 18px 1% 0 0;
        width: 86%;
    } */

    .reachable_audience,
    .reachable_audience2 {
        margin-left: -90px;
        position: fixed;
    }

    .my-width {
        width: 92%;
    }

    .my-btn>button {
        width: 32% !important;
        margin: 8px .2% 5px !important;
    }

    .our_phone,
    .our_phone_edit {
        right: 73px;
        width: 150px;
        top: 110px;
        max-height: 200px;
    }

    .our_phone h3 {
        font-size: 12px !important;
    }

    /* .our_phone_audio audio {
        width: 150px !important;
        height: 33px !important;
    } */

    .noti-div {
        right: auto !important;
        width: 100% !important;
    }
}

.not_number_choosed_layer {
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 82%);
    -webkit-background: rgb(0 0 0 / 82%);
    -moz-background: rgb(0 0 0 / 82%);
    -o-background: rgb(0 0 0 / 82%);
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    display: none;
}

.not_number_choosed_layer_span {
    color: #ff3838;
    top: -111px;
    position: relative;
    font-size: 25px;
    font-weight: bold;
    left: 142px;
    width: 315px;
    line-height: 30px;
    display: none;
}

.not_number_choosed_layer_img {
    position: relative;
    left: 100px;
    top: -112px;
    width: 60px;
    display: none;
}

.border-2x {
    border: 2px solid #e8e8e8 !important;
}

.my-bg-clr-1 {
    background: #EEF4FE;
    padding: 10px 0;
    border-radius: 5px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.my-bg-clr-2 {
    background: #e8e8e8;
    padding: 5px 0;
    border-radius: 5px;
}

body,
p,
.h5,
.h6,
h5,
h6 {
    font-size: 15px;
    font-family: system-ui !important;
}

html {
    overflow-x: hidden;
}

.h1,
.h2,
.h3,
.h4,
h1,
h2,
h3,
h4,
.card-header {
    font-size: 20px !important;
    font-weight: bold !important;
}

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

body::-webkit-scrollbar-thumb {
    background-color: #55ABE1;
}

body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #fbfbfb;
}

.package-logs {
    float: right;
    font-size: 14px;
    padding: 5px 6px;
    width: 156px;
    border: 1px solid #50a3b9;
    color: #50a3b9;
    font-weight: bold;
    background: #f6fdff;
    outline: none;
    border-radius: 3px;
    margin-top: -6px;
}

.feedback_chat {
    width: 380px;
    position: fixed;
    color: #333;
    /*bottom: 100px;*/
    top: 50px;
    background: linear-gradient(to left, #ffe87a, #fff9dd);
    -webkit-background: linear-gradient(to left, #ffe87a, #fff9dd);
    -moz-background: linear-gradient(to left, #ffe87a, #fff9dd);
    -o-background: linear-gradient(to left, #ffe87a, #fff9dd);
    right: 10px;
    z-index: 1111;
    border: 1px solid #c7c7c7;
    padding: 15px 25px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 25px -12px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 25px -12px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 25px -12px rgba(0, 0, 0, 0.75);
    align-self: flex-end;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    display: none;
}

.feedback_chat:hover {
    color: #333;
}

.feedback_chat i {
    color: #eed208;
    float: left;
}

.feedback_chat span {
    float: left;
    margin: 4px 0 0 17px;
    font-size: 18px;
    letter-spacing: 0;
}

.logo-text {
    font-weight: 900;
    background: linear-gradient(to right, #f8901e, #f04c33);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}

#unansweredChatsHide,
#unansweredEmailsHide {
    display: none;
}

#unreadPrivateChatHide {
    display: none;
}

.unanswered_calls {
    text-align: center;
    color: #fff;
    display: block;
    background: #c83838;
    padding: 4px 20px 6px;
    font-size: 14px;
    margin-top: 5px;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 5px;
    -webkit-animation: pulsatee 1s ease-out;
    -webkit-animation-iteration-count: infinite;
    opacity: 0.0
}

.unanswered_calls:hover {
    color: #fff;
}

@-webkit-keyframes pulsatee {
    0% {
        -webkit-transform: scale(1, 1);
        opacity: 1;
    }

    50% {
        opacity: .9;
    }

    100% {
        -webkit-transform: scale(1.02, 1.02);
        opacity: 1;
    }
}

.unanswered-emails {
    text-align: center;
    color: #fff;
    display: block;
    background: #66bc45;
    padding: 4px 20px 6px;
    font-size: 14px;
    margin-top: 5px;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 5px;
    -webkit-animation: pulsateee 1s ease-out;
    -webkit-animation-iteration-count: infinite;
    opacity: 0.0
}

.unanswered-emails:hover {
    color: #fff;
}

@-webkit-keyframes pulsateee {
    0% {
        -webkit-transform: scale(1, 1);
        opacity: 1;
    }

    50% {
        opacity: .9;
    }

    100% {
        -webkit-transform: scale(1.02, 1.02);
        opacity: 1;
    }
}

#notify_cont {
    position: absolute;
    width: 466px;
    background: #fff;
    z-index: 11;
    top: 65px;
    border-radius: 5px;
    padding: 5px 15px;
    max-height: 357px;
    overflow: hidden;
    overflow-y: auto;
    border: 1px solid #eee;
    -webkit-box-shadow: 0px 0px 11px -6px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 11px -6px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 11px -6px rgba(0, 0, 0, 0.75);
    display: none;
}

.notify_list {
    width: 100%;
    float: left;
    color: #666;
    border-bottom: 1px solid #fafafa;
    padding: 5px 0;
}

.notify_list:hover {
    color: #666;
    font-weight: bold
}

#appt_cont_list {
    max-height: 357px;
    overflow: hidden;
    overflow-y: auto;
}

#review_cont_list {
    max-height: 357px;
    overflow: hidden;
    overflow-y: auto;
}

#close_qa_appt:hover {
    cursor: pointer;
    color: blue;
}

#close_qa_appt {
    float: right;
    margin-top: -34px;
    font-size: 20px;
    margin-right: 5px;
}

#close_qa_review:hover {
    cursor: pointer;
    color: blue;
}

#close_qa_review {
    float: right;
    margin-top: -34px;
    font-size: 20px;
    margin-right: 5px;
}

.navbar-badge {
    top: -8px;
    left: 6px;
    font-weight: bold;
    text-align: center;
    letter-spacing: .8px;
    padding: 3px;
    font-size: 11px;
    width: fit-content;
}

.bounce-1 {
    animation-name: bounce-1;
    animation-timing-function: linear;
}

@keyframes bounce-1 {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-15px);
    }

    100% {
        transform: translateX(-7)
    }
}

.blink_me {
    color: #aed5ff;
    animation: blinker 1s linear infinite;
}

.blink_me:hover {
    color: #6899ce;
}

@keyframes blinker {
    50% {
        opacity: 0.5;
        font-size: 16px
    }
}


.search_icon {
    color: #333;
    margin-left: auto;
    margin-top: 9px;
    margin-right: 7px;

}

.search_icon:hover {
    cursor: pointer;
}

.ml-0 {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
    display: flex;
    align-items: center;
}

mr-0,
.mx-0 {
    margin-right: 0 !important;
}

text-center {
    text-align: center !important;
}

.mb-1,
.my-1 {
    margin-bottom: .25rem !important;
}

.modal-body {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1rem;
}

.modal-content {
    position: relative;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    outline: 0;
}

#close_notify {
    float: right;
    margin-top: -34px;
    font-size: 20px;
    margin-right: 5px;
}

#close_notify:hover {
    cursor: pointer;
    color: blue;
}

.bulk_loader {
    width: 100%;
    height: 100%;
    background: #F1F0F0;
    z-index: 1111;
    position: fixed;
    text-align: center;
    padding-top: 50px;
    display: none;
}

.notificationcount,
.textcount,
.supertextcount {
    position: absolute;
    right: 2px;
    top: 11px;
    font-weight: bold;
    background: #f1b840;
    ;
    font-size: 11px;
    padding: 0 7px;
    border-radius: 3px;
}

.modal-header .close,
.modal-header .mailbox-attachment-close {
    margin: -12px !important;
}

.nav-link:hover {
    background: #fafafa !important;
}

.letters-child {
    line-height: 49px;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1px;
}

#remaining_balance {
    color: #6EBF51;
    font-size: 18px;
    cursor: pointer;
    font-weight: bold;
}

#remaining_balance:hover {
    text-decoration: underline;
}

.hover_balance {
    width: 100%;
    display: inline-block;
}

.hover_balance_list {
    width: 100%;
    float: left;
    border: 1px solid #cbcbcb;
    margin: 5px 0;
    padding: 5px 0;
    background: #fafafa;
    font-size: 15px;
}

.hover_balance_list>p {
    padding: 2px 3%;
    float: left;
    margin: 0;
}

.srcbtn {
    margin: 1px 0 0 7px;
}

.alternative_number {
    color: #ebff00;
    font-weight: bold;
    text-decoration: underline;
}

.alternative_number:hover {
    color: #ebff00;
    text-decoration: underline;
}

.qa-appt-letters {
    width: 60px;
    height: 60px;
    background-image: linear-gradient(to left, #55aae1, #4b6cb7);
    border-radius: 50%;
    float: left;
    text-align: center;
}

.qa-appt-letters-child {
    line-height: 59px;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1px;
    color: white;
    vertical-align: middle;
}

.lead-name-qa-appt {
    float: left;
    width: 84%;
    padding-left: 10px;
    text-align: left;
    margin: 1px 0 0 0;
    font-size: 15px
}

#qa-set-appt-res {
    display: none;
}

.dateRange {
    background: #F4F6F9;
    border: 1px solid #DCDFE2;
    height: 52px;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #A3A8AC;
    padding-left: 10px;
}

.allTypeSelect {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #A3A8AC;
    background: #F4F6F9;
    border: 1px solid #DCDFE2;
    height: 34px;
    width: 100%;
    padding-left: 10px;
}

.btn-upload,
.btn-gifLibrary,
.btn-recordRvm {
    background: #4CABEF;
    /*box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);*/
    border-radius: 7px;
    height: 35px;
    padding-left: 20px;
    padding-right: 20px;
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 22px;
    color: #FFFFFF;
    width: max-content;
    border: 0;
}

.btn-recordRvm {
    background: #F87676;
}

.btn-gifLibrary {
    background: #2C6CBB;
}

.uploadIcon {
    width: 59px;
    height: 59px;
    background: #337AC7;
    justify-content: center;
    align-items: center;
    display: flex;
    color: white;
}

.btn-saveDraft,
.btn-close {
    background: #FEF1F2;
    border: 1px solid rgba(186, 37, 50, 0.37);
    border-radius: 8px;
    padding: 12px 16px;
    gap: 8px;
    height: 40px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.02em;
    text-transform: capitalize;
    /* Text+Icon/Primary Black */
    color: #1D2433;
    justify-content: center;
    width: max-content;
}
.btn-close-md {
    background: #FEF1F2;
    border: 1px solid rgba(186, 37, 50, 0.37);
    border-radius: 8px;
    padding: 4px 16px;
    gap:13px;
    height: auto;
    display: flex;
    align-items: center;
    text-align: center;
    text-transform: capitalize;
    /* Text+Icon/Primary Black */
    color: #1D2433;
    justify-content: center;
    line-height: 19px;
    width: max-content;
}

.btn-saveDraft {
    background: #E1E6EF !important;
    border: 1px solid rgba(29, 36, 51, 0.27) !important;
}

.btn-save {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    color: #FFFFFF;
    background: #4CABEF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 7px;
    height: 46px;
    border: 0;
}

.btn-campaign {
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.02em;
    text-transform: capitalize;
    color: #FFFFFF;
    background: #2F6FED;
    padding: 12px 16px;
    gap: 8px;
    border-radius: 7px;
    border: 0;
    height: 40px;
    width: max-content;
    border: 0;
}

.targetDiv {
    background: #EEF4FE;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
    border-radius: 10px 10px 0px 0px;
    height: 36px;
    gap: 10px;
}

.btn-uploadLight {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 22px;
    color: #FFFFFF;
    background: #4CABEF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 7px;
    height: 35px;
}

.pauseIcon,
.stopIcon {
    border: 3px solid white;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 18px;
    border-radius: 4px;
}

.closeIcon {
    background: #E8F2FA;
    border: 2px solid rgba(33, 169, 225, 0.4);
    width: 40px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    cursor: pointer;
}

.closeIcon i {
    color: #0D2D3A;
    font-size: 15px;
}

@media only screen and (min-width: 500px) and (max-width: 768px) {
    .blast_left {
        width: 70%;
    }

    .blast-right {
        width: 30%;
    }
}

@media only screen and (min-width: 320px) and (max-width: 450px) {

    .btn-upload,
    .btn-gifLibrary,
    .btn-uploadLight {
        font-size: 14px;
    }
}


.selectedtarget option {
    background-image: url('../img/Multiply.png');
    background-position: right;
    background-size: 20px;
    background-repeat: no-repeat;
    width: fit-content;
    background-color: #B9C1CA;
    color: #2A53AD;
    margin-top: 5px;
    padding: 5px 5px;
}

.selectableTragets {
    padding: 0;
    height: 30vh !important;
}

.selectableTragets option {
    background: #F4F6F9;
    border: 1px solid #DCDFE2;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;

}

.notifiMsg {
    word-break: break-all;
}

.main-header .nav-link {
    height: auto;
}

@media only screen and (min-width: 1001px) and (max-width: 1024px) {

    .our_phone,
    .our_phone_edit {
        right: 40px;
        width: 120px;
        top: 88px;
        max-height: 161px;
    }

    .our_phone h3 {
        font-size: 13px !important;
    }

    /* .our_phone_audio audio {
        width: 139px !important;
        height: 33px !important;
    } */
}

@media (min-width: 1400px) {

    .our_phone,
    .our_phone_edit {
        font-size: 13px;
        top: 120px;
        right: 56px;
        max-height: 199px;
        width: 215px;
    }
}

@media (min-width: 1700px) {

    .our_phone,
    .our_phone_edit {
        top: 146px;
        right: 76px;
        font-size: 15px;
        max-height: 300px;
    }
}

.our_phone_audio audio {
    width: 100%;
    height: 33px;
}

.noti-div {
    width: 440px;
    right: -5rem;
    margin-top: 20px;
    z-index: 12;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding-right: 40px !important;

}

.leadSearchbar {
    height: 31.7px;
    background: #EBEBEB;
    border-radius: 20px;
    border: 0;
}

.bgWhite {
    background: #FFFFFF;
    box-shadow: 0px 7px 15px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 10px 15px;
}

.call-btn {
    height: 50.22px;
    background: #21A9E1;
    box-shadow: 0px 5.6628px 21.2355px rgba(0, 0, 0, 0.1);
    border-radius: 8.4942px;
    border: 0px;
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 25px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #F8F8F8;
    gap: 10px;
    padding-left: 20px;
    padding-right: 20px;
    float: right;
}

.bggray {
    background: #F8F8F8;
    box-shadow: 0px 7px 15px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    /* height: 96px; */
    /* width: 100%; */
    padding: 10px 15px;
}

.leadsPageTabs .nav-link {
    color: #0D2D3A !important;
    width: 25%;
    display: flex !important;
    align-items: center !important;
    /*justify-content: center !important;*/
    background: #E8F2FA !important;
    border: 2px solid rgba(33, 169, 225, 0.4);
    box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.15) !important;
    border-radius: 20px 20px 0px 0px !important;
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 23px;
}

.leadsPageTabs .nav-link.active {
    border-radius: 20px 20px 0px 0px;
    border: 0px;
    background: white !important;
    color: #0D2D3A;
    font-weight:700 !important;
}

.leadFormLabels {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 16px;
    display: flex;
    align-items: center;
    color: #0D2D3A;
    opacity: 0.6;
    margin-bottom: 5px;
}

.quick-btn,
.edit-btn {
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 11px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #0D2D3A;
    border: 1px solid #dfdfdf;
    background: white;
    height: 25px;
    gap: 10px;
    border-radius: 3px;
}

.leadFormInputs {
    height: 36.19px;
    background: #FFFFFF;
    border: 0.809728px solid #D0D5DD;
    box-shadow: 0px 0.809728px 1.61946px rgba(16, 24, 40, 0.05);
    width: 100%;
    padding-left: 10px;
}

.leadFormselect {
    background: #FFFFFF;
    border: 0.809728px solid #D0D5DD;
    box-shadow: 0px 0.809728px 1.61946px rgba(16, 24, 40, 0.05);
    border-radius: 6.47782px;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 19px;
    color: #101828;
    width: 100%;
    height: 36.19px;
    padding-left: 10px;
}
thead th{
    font-weight: 600 !important;
    font-size: 15px !important;
}
.lead-table thead th {
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 18px;
    color: #0D2D3A;
    background: #E8F2FA;
    border: 0px;
    text-align: start !important;
    height: 32px;
    padding-left: 15px;
}
.lead-table tbody td {
    font-weight: 400;
    font-size: 15px;
    color: #0D2D3A;
    vertical-align: middle;
    padding: 10px 0px 10px 15px;
    text-align: start !important;
}

.lead-table thead th:first-child {
    border-radius: 10.6442px 0px 0px 0px;
}

.lead-table thead th:last-child {
    border-radius: 0px 10.6442px 0px 0px;
}

.chatTabs .nav-link {
    color: #6c757d;
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px 0px 0px 20px !important;
    height: 120px;
    padding-left: 25px;
    padding-right: 25px;
    margin-bottom: 0px;
    background: #D6F0DC;
    border: 2px solid rgba(46, 169, 75, 0.4);
    box-shadow: -5px 4px 10px rgba(0, 0, 0, 0.15);
    border-right: 0;
}

.chatTabs .nav-link.active {
    background: #FFFFFF !important;
    border-radius: 20px 0px 0px 20px !important;
    border: 0px !important;
    height: 150px !important;
}

.chatHeader {
    background: #E8F2FA;
    border: 2px solid #bed7e2;
    box-shadow: 0px 7px 18px rgba(0, 0, 0, 0.1);
    border-radius: 0px 10px 10px 10px;
    width: 100%;
    height: 85px;
    padding: 10px 15px;
}

.msgtextarea {
    width: 100%;
    height: 115px;
    background: #EAF1F5;
    border: 2px solid rgba(76, 172, 240, 0.1);
    border-radius: 5px;
    padding-left: 15px;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 17px;
    color: #000000;
    opacity: 1;
}

.send-btn {
    font-style: normal;
    font-weight: 700;
    font-size: 15px;
    line-height: 17px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #F8F8F8;
    justify-content: center;
    height: 40.12px;
    background: #21A9E1;
    border: 1.4452px solid rgba(0, 0, 0, 0.12);
    border-radius: 6px;
}

.msgdiv {
    background: #F8F8F8 !important;
    box-shadow: 0px 7px 15px rgba(0, 0, 0, 0.1) !important;
    border-radius: 10px;
    padding: 10px;
}

.card-hover:hover {
    background: rgba(33, 169, 225, 0.17);
    transform: scale(1.05);
    transition: transform .4s;
}

.senderChatBg {
    background: #FFFFFF;
    border-radius: 5px;
    padding: 10px;
    max-width: 499.54px;

}

.senderChatBg p {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 17px;
    color: #000000;
    margin-bottom: 0;
}

.view-detail-btn {
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 14px;
    display: flex;
    align-items: center;
    color: #2B4A60;
    /* width: 128.71px; */
    height: 27px;
    background: #DFDFDF;
    border-radius: 50px;
    padding: 0px 19px;
    gap: 7px;
    border: 0;
}

.logModalHeading {
    font-style: normal;
    font-weight: 500;
    font-size: 20px !important;
    line-height: 25px;
    display: flex;
    align-items: center;
    color: #000000;
    margin-bottom: 0;
}

.leadNameHeading {
    font-style: normal;
    font-weight: 700;
    font-size: 15px;
    line-height: 23px;
    display: flex;
    align-items: center;
    color: black;
    opacity: 0.7;
    margin-bottom: 0px;
}

.leadName {
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 23px;
    display: flex;
    align-items: center;
    color: #000000;
    opacity: 0.7;
    margin-bottom: 0;
}

.innerLabel {
    font-size: 15px;
    font-weight: 600 !important;
    color: #0D2D3A;
    margin-bottom: 0;
}

.orange-btn {
    height: 41px;
    background: rgba(248, 169, 15, 0.21);
    border: 1.4452px solid #F8A90F;
    border-radius: 8.1778px;
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    color: #0D2D3A;
    padding-left: 20px;
    padding-right: 20px;
}

.green-btn {
    height: 56.05px;
    background: #EAF6E5;
    border: 1.96976px solid #66BC45;
    border-radius: 8.1778px;
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    color: #0D2D3A;
    padding-left: 20px;
    padding-right: 20px;
}

.blue-btn {
    height: 56.05px;
    background: #E8F5FF;
    border: 1.96976px solid rgba(33, 169, 225, 0.57);
    border-radius: 8.1778px;
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    color: #0D2D3A;
    padding-left: 20px;
    padding-right: 20px;
}

.logModalTable thead th {
    font-style: normal;
    font-weight: 700;
    font-size: 13px;
    line-height: 16px;
    color: #000000;
    vertical-align: middle;
    border-top: 0px;
    text-align: start;
}

.logModalTable tbody td {
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    color: #000000;
    opacity: 0.8;
    vertical-align: middle;
}

.notesbg {
    background: #F2F2F2;
    padding: 15px;
}

.note-btn {
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 17px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #0D2D3A;
    height: 41px;
    background: rgba(102, 188, 69, 0.13);
    border: 1.4452px solid #66BC45;
    border-radius: 6px;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
}

.pointer {
    cursor: pointer;
}

.filterLabel {
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 16px;
    letter-spacing: 0.02em;
    text-transform: capitalize;
    color: #1D2433;
}

.filterDropdowns {
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    color: rgba(29, 36, 51, 0.8);
    height: 40px;
    background: #FFFFFF;
    border: 1px solid #E1E6EF;
    border-radius: 8px;
    width: 100%;
    padding: 8px 9px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filterDropdowns-menu {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #1D2433;
}

.result-btn {
    width: 191.03px;
    height: 38.45px;
    background: #56BDE7;
    border-radius: 71.2053px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 27.058px;
    gap: 9.97px;
    border: 0;
    color: #FFFFFF;
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 20px;
}

@media (max-width: 450px) {
    .chatTabs {
        width: 100% !important;
    }

    .chatTabs .nav-link {
        border-radius: 20px 20px 0px 0px !important;
        height: 50px;
    }

    .chatTabs .nav-link.active {
        border-radius: 20px 20px 0px 0px !important;
        height: 50px !important;
    }
}

.filterMultiSelect .choices .choices__inner {
    background: #FFFFFF;
    border: 1px solid #E1E6EF;
    border-radius: 8px;
    background-image: url(../img/downArrow.png) !important;
    background-repeat: no-repeat !important;
    background-position: 96% 55% !important;
    background-size: auto !important;
}

.filterMultiSelect .choices .choices__inner .choices__input {
    background: #ffffff;
}

.filterMultiSelect .choices .choices__inner .choices__list .choices__item {
    color: black;
    background-color: #F1F3F9;
    border: 1px solid #F1F3F9;
}

.filterMultiSelect .choices .choices__inner .choices__list .choices__item .choices__button {
    background-image: url(../img/cross.png);
    background-size: 12px;
    border: 0;
}

.email-inprogess-table thead th {
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 18px;
    color: #0D2D3A;
    text-align: start !important;
    vertical-align: middle;
    border-top: 0px;
    /* border-bottom: 2px solid #7F63F4 !important; */
}

.email-inprogess-table tbody td {
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 17px;
    color: #0D2D3A;
    text-align: start !important;
    vertical-align: middle;
}

.emailBlastTempHeadingDiv {
    background: rgba(33, 169, 225, 0.1); 
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 15px;
    height: 60px;
}

.emailBlastTempHeading {
    font-style: normal;
    font-weight: 700 !important;
    font-size: 24px !important;
    color: #333333;
    margin-bottom: 0;
}

.createTemp-btn,
.builer-btn {
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 25px;
    color: #FFFFFF;
    background: #007BFF;
    height: 30px;
    border: 0;
    border-radius: 3px;
    padding-left: 10px;
    padding-right: 10px;
}

.preview-btn {
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 25px;
    color: #FFFFFF;
    background: #3978C8;
    height: 30px;
    border: 0;
    border-radius: 3px;
    padding-left: 10px;
    padding-right: 10px;
}

.email-template-table thead th {
    background: #DCDFE2;
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 18px;
    color: #0D2D3A;
    text-align: start !important;
    vertical-align: middle;
}

.email-template-table tbody td {
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 17px;
    color: #0D2D3A;
    text-align: start !important;
    vertical-align: middle;
    background: #F4F6F9;
}

.audioModal::-webkit-media-controls-play-button,
.audioModal::-webkit-media-controls-panel {
    background-color: #D4EFFB;
}

.smsDetailModal .modal-header {
    background: #D4EFFB;
    border: 2px solid rgba(33, 169, 225, 0.4);
    box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.15);
    border-radius: 20px 20px 0px 0px;
}

.newEmailModal .modal-header {
    background: #E8F2FA;
    border: 2px solid rgba(33, 169, 225, 0.4);
    box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.15);
    border-radius: 20px 20px 0px 0px;
}

.newEmailModal .modal-header .modal-title {
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: #0D2D3A;
}

.templateNameInput {
    background: #F4F6F9;
    height: 63px;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 27px;
    color: #ABAFB3;
    width: 100%;
    padding-left: 20px;
    border: 1px solid #DCDFE2;
    border-radius: 3px;
}

.btn-draft {
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 30px;
    border: 1px solid #007BFF !important;
    color: #007BFF;
    background: #FFFFFF;
    height: 37.75px;
    padding: 0px 20px;
    border-radius: 4px;
}

.pause-btn,
.btn-send {
    background: #3978C8;
    color: #FFFFFF;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 30px;
    border: 0;
    padding-left: 20px;
    padding-right: 20px;
    padding: 0px 20px;
    height: 37.75px;
    border-radius: 4px;
}

.hotBtn {
    background: rgba(255, 91, 91, 0.3);
    border: 0.906713px solid rgba(0, 0, 0, 0.12);
    border-radius: 3.76438px;
    color: #0D2D3A;
    font-weight: 500;
    font-size: 10px;
    padding: 0px 20px;
    height: 26px;
}

.coldBtn {
    background: none;
    border: 1px solid #e1e1e1;
    border-radius: 3.76438px;
    color: #0D2D3A;
    font-weight: 500;
    font-size: 10px;
    padding: 0px 20px;
    height: 26px;
}

.smallProgBar {
    height: 8px;
}

.statusBox {
    background: #FFFFFF;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 14px;
    margin-bottom: 40px;
}

.innerBox {
    background: rgba(33, 169, 225, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
}

.warmBtn {
    background: rgba(26, 150, 238, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 3.76438px;
    color: #0D2D3A;
    font-weight: 500;
    font-size: 10px;
    padding: 0px 20px;
    height: 26px;
}

.createAnEmail {
    border: 0px;
    box-shadow: 0 0rem 0rem rgb(0 0 0 / 0%);
}

.createAnEmail .modal-header {
    background: #DCDFE2;
}

.createAnEmail .modal-header .modal-title {
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: #0D2D3A;
}

button:focus,
select:focus {
    outline: none !important;
}

/* @media (min-width: 1400px) {
    .col-xxl-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
} */

/* --------trabsparent custom overflow----------- */

.customTransparentOverflow::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

.customTransparentOverflow::-webkit-scrollbar {
    background-color: transparent;
}

.customTransparentOverflow {
    scrollbar-color: transparent;
}

.customTransparentOverflow::-webkit-scrollbar-thumb {
    background-color: transparent;
}

/* ---------------------- */
.customOverflow::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.customOverflow::-webkit-scrollbar {
    background-color: #f8f8f8;
}

.customOverflow {
    /*scrollbar-color: #CAE9FC #f8f8f8;*/
}

.customOverflow::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: #CAE9FC;
}

.emailblastTempNav .nav-link {
    height: 52.3px;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 27px;
    color: #6A707E !important;
    display: flex;
    align-items: center;
}

.emailblastTempNav .nav-link .span1 {
    background: #66BC45 !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 15px !important;
    line-height: 19px !important;
    color: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 22px !important;
    width: 22px !important;
}

.emailblastTempNav .nav-link.active {
    background: rgba(33, 169, 225, 0.1) !important;
    color: #333333 !important;
    border-radius: 0px !important;
}

/* .sidebar {
    height: 88vh;
} */

/* .content{
    height: 90vh !important;
} */
.content-wrapper {
    height: 91vh !important;
    overflow: auto;
}

.workflow-btn {
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 30px;
    color: #FFFFFF;
    background: #21A9E1;
    padding: 5px 10px;
    height: 40px;
    border: 0;
    border-radius: 4px;
}

.automation-text-table thead th {
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 18px;
    color: #0D2D3A;
    text-align: start !important;
    vertical-align: middle;
    border-top: 0px;
    border-bottom: 2px solid #DCDFE2 !important;
    height: 50px;
    /* border-radius: 3px; */
    text-transform: uppercase;
}

.automation-text-table tbody td {
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 17px;
    color: #0D2D3A;
    text-align: start !important;
    vertical-align: middle;
    height: 55px;

}

/* 
.automation-text-table thead tr,
.automation-text-table tbody tr {
    border: 2px solid #DCDFE2 !important;
    border-radius: 5px !important;
} */

.automation-text-table {
    border-collapse: separate;
    border-spacing: 0;
}

/* .automation-text-table tr:first-child td:first-child {
    border-top-left-radius: 10px;
}

.automation-text-table tr:first-child td:last-child {
    border-top-right-radius: 10px;
}

.automation-text-table tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

.automation-text-table tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
} */

/* .automation-text-table tr:first-child td {
    border-top-style: solid;
}

.automation-text-table tr td:first-child {
    border-left-style: solid;
} */

.pending-btn {
    background: #E1E6EF;
    border: 1px solid rgba(0, 0, 0, 0.27);
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 21px;
    color: #1D2433;
    height: 35.73px;
    border-radius: 4px;
}

.completed-btn {
    background: #C1E4B7;
    border: 1px solid #66BC45;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 21px;
    color: #1D2433;
    height: 35.73px;
    border-radius: 4px;
}

.text-demo-chat {
    background: #E8F2FA;
    border-radius: 8px;
    border-top-left-radius: 0px !important;
}

.text-demo-chat1 {
    background: linear-gradient(90deg, #A5AFBA 14%, #D2D6DE 86%);
    border-radius: 8px;
    border-top-left-radius: 0px !important;
}

textarea:focus {
    outline: none;
}

.blast-select {
    background: #FFFFFF;
    border: 1px solid #E1E6EF;
    border-radius: 8px;
    padding: 8px 9px;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    color: rgba(29, 36, 51, 0.8);
    width: 100%;
}

.recordBtns {
    background: none;
}

.messege-box {
    background: #EAF1F5;
    border: 2px solid rgba(148, 188, 211, 0.44);
    box-shadow: 0px 0px 0px 4px rgba(31, 81, 229, 0.08);
    border-radius: 5px;
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 17px;
    color: #000000;
    width: 100%;
    height: 200.9px;
    padding: 10px;
}

.campaignNameInput {
    height: 40px;
    background: #FFFFFF;
    border: 1px solid #E1E6EF;
    border-radius: 8px;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    color: rgba(29, 36, 51, 0.8);
    padding: 8px 9px;
    width: 100%;
}

.addClient-btn {
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    line-height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.02em;
    text-transform: capitalize;
    color: #FFFFFF;

    padding: 10px 12px;
    gap: 4px;
    height: 32px;
    background: #607091;
    border-radius: 27px;
    border: 0;
}

@media (min-width: 2140px) {

    .our_phone,
    .our_phone_edit {
        top: 155px;
        right: 87px;
        font-size: 15px;
        max-height: 357px;
        width: 274px;
    }
}

@media (min-width: 2360px) {

    .our_phone,
    .our_phone_edit {
        top: 193px;
        right: 87px;
        font-size: 15px;
        max-height: 357px;
        width: 274px;
    }
}

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

.rvm-des {
    background: #F4F4F4;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    padding: 5px 10px;
    width: 100%;
}


/* ------------setting page-------------- */

.settingPageTabs .nav-link {
    color: #0D2D3A !important;
    width: 16.66%;
    display: flex !important;
    align-items: center !important; 
    /*justify-content: center !important;*/
    background: #E8F2FA !important;
    border: 2px solid rgba(33, 169, 225, 0.4);
    box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.15) !important;
    border-radius: 20px 20px 0px 0px !important;
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    /*line-height: 23px;*/
    height: 48px;
}

.settingPageTabs .nav-link.active {
    border-radius: 20px 20px 0px 0px;
    border: 0px;
    background: white !important;
    color: #0D2D3A;
    height: 48px;
    font-weight:700;
}

.upload-profile {
    width: 33px;
    height: 33px;
    border-radius: 50%;
    position: absolute;
    opacity: 0;
}

.uploadProfile-div {
    left: -25px;
    top: 10px;
}

.choseFileBtn {
    width: 140px;
    background: #DCDFE2;
    border: 1px solid #E1E6EF;
    border-radius: 8px 0 0 8px;
    height: 40px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.choseFileInput {
    background: #FFFFFF;
    border: 1px solid #E1E6EF !important;
    border-radius: 0 8px 8px 0;
    height: 40px;
    width: 100%;
    padding-left: 10px;
}

.settingpageLabels {
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
    color: #2C2C2E;
    margin-top: 25px;
}

.settingPageInput {
    background: #FFFFFF;
    border: 1px solid #E1E6EF !important;
    border-radius: 8px !important;
    height: 40px;
    width: 100%;
    padding-left: 10px;
}

.settingPageSave-btn {
    width: 154px;
    height: 52px;
    background: #21A9E1;
    box-shadow: 0px 5.6628px 21.2355px rgba(0, 0, 0, 0.1);
    border-radius: 8.4942px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16.3677px 30.0075px;
    gap: 5.46px;
    border: 0;
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 25px;
    color: #F8F8F8;
}

.addCampaignBtn {
    height: 40px;
    background: #21A9E1;
    box-shadow: 0px 5.6628px 21.2355px rgba(0, 0, 0, 0.1);
    border-radius: 8.4942px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16.3677px 30.0075px;
    border: 0;
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    color: #F8F8F8;
}

.deactive-btn {
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 11px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #0D2D3A;
    height: 25.8px;
    background: #E6F8EA;
    border: 0.906713px solid rgba(46, 169, 75, 0.27);
    border-radius: 3.76438px;
    padding: 7.2537px 10.7493px;
    gap: 5.79px;
    width: fit-content;
}
.deactive-btn-md{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px 16px;
    gap: 13.09px;
    background: #FFE0E0;
    /* border: 1.57646px solid #FF5B5B; */
    border-radius: 6.54496px;
    color: #0D2D3A;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 19px;
    height: auto;
}

.delete-btn {
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 11px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #0D2D3A;
    height: 25.8px;
    background: #FEF1F2;
    border: 0.906713px solid rgba(186, 37, 50, 0.37);
    border-radius: 3.76438px;
    padding: 7.2537px 10.7493px;
    gap: 5.79px;
    width: fit-content;
}

.switchAccount-btn {
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 11px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #0D2D3A;
    height: 25.8px;
    background: #E1E6EF;
    border: 0.906713px solid rgba(29, 36, 51, 0.27);
    border-radius: 3.76438px;
    padding: 7.2537px 10.7493px;
    gap: 5.79px;
    width: fit-content;
}
.switchAccount-btn-md{
    height: auto;
    /*border-radius: 4px;*/
    border: 1px solid #001f3f3d;
    background: #cbdae9;
    /*color: black;*/
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px 16px;
    gap: 13.09px;
    /* background: #FFE0E0; */
    /* border: 1.57646px solid #FF5B5B; */
    border-radius: 6.54496px;
    color: #0D2D3A;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 19px;
}

.automation-text-table thead th {
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 18px;
    color: #0D2D3A;
    text-align: start !important;
    vertical-align: middle;
    border-top: 0px;
    border-bottom: 2px solid #DCDFE2 !important;
    height: 50px;
    border-radius: 3px;
    text-transform: uppercase;
}

.setting-page-table tbody td {
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 17px;
    color: #0D2D3A;
    text-align: start !important;
    vertical-align: middle;
    height: 55px;

}

.setting-page-table thead th {
    border-top: 0px !important;
    border-bottom: 0px !important;
    border-bottom-color: #DCDFE2 !important;
}

.setting-page-table tbody tr {
    border: 2px solid #DCDFE2 !important;
    border-radius: 5px !important;
}

.submitTicket-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 19px;
    gap: 7px;
    height: 27px;
    background: #2A53AD;
    border-radius: 50px;

    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 14px;
    color: #FFFFFF;
    border: 0;
}

/* ------------chat log css------------ */

.chatLog-label {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 16px;
    color: #0D2D3A;
    opacity: 0.6;
}

.chatLog-input {
    background: #FFFFFF;
    border: 0.809728px solid #D0D5DD;
    box-shadow: 0px 0.809728px 1.61946px rgba(16, 24, 40, 0.05);
    height: 36.19px;
    padding: 8.09728px 11.3362px;
    gap: 6.48px;
    width: 100%;
}

.chatLog-header {
    background: #EAF1F5;
    border: 2px solid rgba(148, 188, 211, 0.44);
    box-shadow: 0px 0px 0px 4px rgba(31, 81, 229, 0.08);
    border-radius: 5px;
}

.chatLogTable tr th {
    border: 0;
    font-style: normal;
    font-weight: 700;
    font-size: 13px;
    line-height: 16px;
    text-align: start;
    color: #000000;
    padding-top: 20px;
    padding-bottom: 20px;
}

.chatLogTable tr td {
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 21px;
    text-align: start;
    color: #000000;
    opacity: 0.8;
    vertical-align: middle;
    padding-top: 20px;
    padding-bottom: 20px;
}

.chatLogTable-div {
    background: #FFFFFF;
    box-shadow: 0px 9.54077px 20.4445px rgba(0, 0, 0, 0.1);
    border-bottom-left-radius: 13.6297px;
    border-bottom-right-radius: 13.6297px;
}

.reportTeamActivityTabs .nav-link {
    color: #0D2D3A !important;
    width: 33.33%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #E8F2FA !important;
    border: 2px solid rgba(33, 169, 225, 0.4);
    box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.15) !important;
    border-radius: 20px 20px 0px 0px !important;
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 23px;
}

.reportTeamActivityTabs .nav-link.active {
    border-radius: 20px 20px 0px 0px;
    border: 0px;
    background: #f8f8f8 !important;
    color: #0D2D3A;
}

.reportLeadSourceTable tr th {
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 17px;
    color: #0D2D3A;
    background: #E8F2FA;

    border: 0;
}

.reportLeadSourceTable thead tr {
    box-shadow: 0px 2.36539px 11.8269px rgba(0, 0, 0, 0.1);
    border-radius: 10.6442px 10.6442px 0px 0px;
}

.reportLeadSourceTable tr td {
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 20px;
    color: #0D2D3A;
    background: #FFFFFF;
    /* card shadow */
    border: 0;
}

.btn-backstep,
.delete-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 16px;
    gap: 8px;
    background: #FEF1F2;
    border: 1px solid rgba(186, 37, 50, 0.37);
    border-radius: 8px;

    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 16px;
    letter-spacing: 0.02em;
    text-transform: capitalize;
    color: #1D2433;
}

.btn-backstep {
    background: #E1E6EF;
    border: 1px solid rgba(29, 36, 51, 0.27);
    border-radius: 8px;
    height: 40px;
}

.downloadLead-div {
    background: #EAF1F5;
    border: 2px solid rgba(148, 188, 211, 0.44);
    box-shadow: 0px 0px 0px 4px rgba(31, 81, 229, 0.08);
    border-radius: 5px;
    height: 201px;
}

.uploadLead-div {
    background: #EAF1F5;
    border: 2px solid rgba(148, 188, 211, 0.44);
    box-shadow: 0px 0px 0px 4px rgba(31, 81, 229, 0.08);
    border-radius: 5px;
}

.leadTable thead th {
    font-size: 15px;
    font-weight: 400;
}

.selectCard-dropdown {
    background: #E8F2FA;
    height: 88px;
    border: 0px !important;
    border-radius: 0;
    width: 375px !important;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 25px;
    color: #0D2D3A;
}

.addnew-Card {
    border-radius: 20px 20px 0px 0px !important;
}

.addnew-Card .card-header {
    background: #E8F2FA !important;
    border: 2px solid rgba(33, 169, 225, 0.4);
    box-shadow: 4px 0px 10px rgba(0, 0, 0, 0.15);
    border-radius: 20px 20px 0px 0px !important;
    height: 81px;
    font-style: normal;
    font-weight: 600 !important;
    font-size: 24px !important;
    line-height: 32px;
    color: #0D2D3A;
    align-items: center;
    display: flex;
}

.enabled-btn,
.disabled-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12.6117px 23.1214px;
    gap: 13.09px;

    background: #FFE0E0;
    border: 1.57646px solid #FF5B5B;
    border-radius: 6.54496px;

    color: #0D2D3A;
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 19px;
}

.enabled-btn {
    background: #EAF6E5;
    border: 1.57646px solid #66BC45;
    border-radius: 6.54496px;
}

.enabled-btn-md{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px 16px;
    gap: 13.09px;
    background: #FFE0E0;
    border: 1.57646px solid #FF5B5B;
    border-radius: 6.54496px;
    color: #0D2D3A;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 19px;
    height: auto;
}
.based-sending {
    background: #EAF1F5;
    border: 2px solid rgba(148, 188, 211, 0.44);
    box-shadow: 0px 0px 0px 4px rgba(31, 81, 229, 0.08);
    border-radius: 5px;
    padding: 30px;
}

.payAsYouGoPackage {
    background: #FFFFFF;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
    border-radius: 10px;
}

.payAsYouGoPackage .nav-link {
    color: #0D2D3A !important;
    width: 20%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #EEF4FE !important;
    /* box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12); */
    /* border-radius: 10px 10px 0px 0px; */
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 23px;
    color: #0D2D3A;
    height: 63px !important;
}

.payAsYouGoPackage .nav-link.active {
    color: #0D2D3A;
    font-weight: 700;
    background: #EEF4FE !important;
    height: 63px !important;
    border-bottom: 3px solid #3978C8 !important;
    border-radius: 0;
}

.bundlesCard {
    background: #FFFFFF;
    box-shadow: 0px 0px 4px rgba(24, 59, 86, 0.05);
    border-radius: 4px;
    width: 100%;
    text-align: center;
}

.getStarted-btn {
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 27px;
    text-align: center;
    text-transform: capitalize;
    color: #0B2110;
    border: 1px solid #0B2110;
    padding: 5px 15px;
    border-radius: 8px;
}

.recommendedPackage {
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    color: #FFFFFF;
    background: #3978C8;
    box-shadow: 0px 2px 5px rgba(24, 59, 86, 0.25);
    border-radius: 4px 4px 0px 0px;
    margin-bottom: 0;
    text-align: center;
}

.view-btn {
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 11px;
    text-align: center;
    color: #0D2D3A;
    background: #E6F8EA;
    border: 0.906713px solid rgba(46, 169, 75, 0.27);
    border-radius: 3.76438px;
    height: 25.8px;
}

.sound-clips .delete {
    position: absolute;
    width: 28px;
    height: 32px;
    top: 99px;
    left: 78px;
    opacity: 0;
}

.blastTabs .nav-link:hover,
.blastTabs .nav-link {
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 18px;
    text-align: center;
    color: #000000 !important;
    background: #CEE8F2;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    height: 34px !important;
}

.blastTabs .nav-link.active {
    background: white !important;
    color: #000000 !important;
    box-shadow: 0px -5px 20px rgba(0, 0, 0, 0.12);
}

.sound-clips .clip audio {
    width: 100%;
}

.sound-clips p {
    display: none;
}
.dataTables_empty{
    text-align: center !important;
}

@media (max-width: 425px) {

    .our_phone,
    .our_phone_edit {
        right: 65px;
        width: 150px;
        top: 110px;
        max-height: 200px;
    }
}

@media (max-width: 375px) {

    .our_phone,
    .our_phone_edit {
        right: 57px;
        width: 150px;
        top: 105px;
        max-height: 200px;
    }
}

@media (max-width: 320px) {

    .our_phone,
    .our_phone_edit {
        right: 49px;
        width: 150px;
        top: 90px;
        max-height: 200px;
    }
}

@media (max-width: 1300px) {
    .leadsPageTabs a {
        font-size: 10px !important;
    }
}
@media (max-width: 1450px) {
    .recordingButtonsContainer {
        flex-direction: column ;
    }
    .recordingButtonsContainer .btn-recordRvm{
        width: 100%;
    }
    .recordingButtonsParentContainer{
        width: 100%;
        justify-content: space-between!important;
    }
}

@media (max-width: 1300px) {
    .settingPageTabs a {
        font-size: 13px !important;
    }
}

.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused, .sidebar-mini.sidebar-collapse .main-sidebar:hover{
    width: 4.6rem !important;
}
.nav-sidebar:hover{
    overflow: hidden !important;
}
.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link p{
    visibility: hidden !important;
}

.sidebar-mini.sidebar-collapse .main-sidebar:active .nav-sidebar .nav-link p{
    visibility: hidden !important;
}

.quick-action-div-half{
    width: 60px !important;
    position: absolute !important;
    top: 40px !important;
    left: -78px !important;
}