@import '../css/telecrm-tooltip.css';
@import '../css/animation.css';
@import '../../assets/css/root-loader.css';

.icon-phone-missed,
.icon-phone-outgoing,
.icon-phone-incoming {
    position: relative;
}

.icon-phone-missed:before,
.icon-phone-outgoing:before,
.icon-phone-incoming:before {
    content: "\e94c"
}

.icon-phone-missed:after,
.icon-phone-outgoing:after,
.icon-phone-incoming:after {
    position: absolute;
    color: #0EC270;
    font-family: 'telecrm-new';
    display: flex;
    align-items: flex-start;
    line-height: 1;
    right: 3px;
    top: -2px;
}

.icon-phone-missed:after {
    content: "\e97e" !important;
    color: #C51E1B !important;
}

.icon-phone-outgoing:after {
    content: "\e97f" !important;
}

.icon-phone-incoming:after {
    content: "\e97d" !important;
}

input {
    background-color: #fff;
}

.modal-dialog {
    transition: all 0.30s ease !important;
}

.modal.fade .modal-dialog {
    opacity: 0;
}

.modal.fade.in {
    display: block;
}

.modal.fade.in .modal-dialog {
    z-index: 1000;
    opacity: 1;
}

:root {
    --topbar-height: 48px;
}

.whatsapp-ui {
    --topbar-height: 0px;
}


/* @keyframes movein { from { opacity: 0; } to   { opacity: 1; } } */

ion-app .main-wrapper {
    padding: 10px 9px 100px 15px !important;
    overflow-y: auto !important;
    height: 100vh !important;
}

ion-app.mobile .main-wrapper {
    padding: 10px 8px 100px 8px !important;
}

ion-app .main-wrapper:focus-within {
    border: none;
    outline: none;
}

app-my-activities,
app-batch,
app-all-leads app-all-campaigns {
    display: flex;
}

app-all-campaigns-table-view,
app-whatsapp-conversation {
    width: 100%;
}

.main-wrapper>.top-bar {
    white-space: nowrap;
    overflow: visible;
    text-overflow: ellipsis
}

ion-app .main-wrapper>.top-bar:not(.expand-full) {
    max-width: calc(100% - 55px);
}

ion-app.mobile .main-wrapper>.top-bar {
    max-width: calc(100% - 90px);
}

.campaign-card-label {
    text-transform: uppercase;
    font-size: 12px;
    color: #A4A4A4;
    position: absolute;
    top: 0;
    margin-top: -23px;
    line-height: 1;
}

app-user-editor .campaign-card-label {
    margin-left: 0px;
    width: max-content;
}

app-map-column-data app-user-editor .campaign-card-label {
    margin-top: -20px;
    right: 0 !important;
    margin-left: unset !important;
}

.card-wrapper.has-checkmark.checked .crm-sparks-solid * {
    opacity: 0.8 !important;
    cursor: not-allowed !important;
    color: hsl(106, 56%, 54%);
}

ul.templates-list li.editing .subject-wrapper app-templates-dynamic-values ul.actions {
    margin-top: -28px;
}

app-edit-campaign app-campaign-name-input .addon {
    display: none;
}

app-lead app-view-assignees {
    z-index: 9 !important;
}

app-lead app-view-assignees app-user-avatar:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: auto;
    right: 0;
    width: 9px;
    height: 9px;
    background-color: #31A24C;
    border: 1px solid #fff;
    border-radius: 50%;
}

li.history-list-item .icon-volume-2.big {
    text-decoration: none;
}

li.history-list-item:not(.inactive) .icon-volume-2.big {
    font-size: 18px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

li.history-list-item.inactive [class^=icon-star] {
    margin-top: -3px;
}

li.history-list-item.inactive .icon-volume-2.big {
    margin-left: 5px;
}

ul.history-list.star-filter-on li.history-list-item.starable .icon-star-on {
    opacity: 1;
}

app-reports-filter app-user-editor .footer {
    justify-content: flex-end !important;
}

app-reports-filter app-user-editor .footer .lhs {
    display: none
}

ul.templates-list li .save-btn {
    position: absolute;
    right: 0;
    bottom: 0;
    margin-right: 10px;
    margin-bottom: 5px;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 6px 10px rgb(0 0 0 / 8%);
    transition: all 0.15s ease;
}

ul.templates-list li.editing .subject-wrapper .save-btn {
    display: none !important;
}

app-tag-field-value .tag,
app-dropdown-field-value .value {
    color: #fff;
    padding: 3px 5px;
    border-radius: 5px;
}

app-tag-field-value .tag {
    margin-right: 3px;
}

app-dropdown-field-value .value {
    margin-top: 3px;
    display: inline-block;
    line-height: 1.2;
}

app-my-activities app-action-summary-wrapper app-user-avatar {
    display: none !important;
}


.input-error-wrapper {
    width: 100%;
}

.input-error-wrapper input {
    width: 100%;
}

.input-error-wrapper.error {
    position: relative;
    margin-right: 5px;
    width: calc(100% - 5px);
}

input.error,
input.error:focus {
    box-shadow: 0 0 0 1px #e01e5a, 0 0 0 5px rgba(224, 30, 90, .3) !important;
    border: 1px solid #e01e5a !important;
    padding-right: 25px;
}

input.error+.error-count,
input.error+.error-msg {
    position: absolute;
    right: 0;
    margin-right: 3px;
    color: #e01e5a;
    top: 50%;
    margin-top: -10px;
}

input.error+.error-msg {
    display: none;
}

#allCampaignsWrapper .title-menu {
    top: 0 !important;
    margin-top: -1px !important;
    margin-right: -1px !important;
}



.sidenav>.user-menu .dropdown.open>.dropdown-menu {
    position: fixed;
    left: 75px;
    top: 15px;
    width: max-content;
    max-width: 500px;
}

.sidenav>.user-menu app-user-menu+.menu-label {
    width: max-content;
    max-width: 55px;
    overflow-x: hidden;
}

/* .main-wrapper .top-bar, .main-wrapper .top-bar .lhs{width: max-content; max-width: calc(100% - 53px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis} */
body {
    background-color: #F7F7F7 !important;
    box-sizing: border-box;
    user-select: none;
    height: 100%;
    font-family: "Roboto Flex", sans-serif;
}

[class^="icon-"] {
    align-items: center;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
}

[routerLink] {
    outline: none;
    cursor: pointer;
}

[class^="icon"] {
    text-transform: initial !important;
}

.h1 {
    font-size: 30px !important;
    margin-top: 15px;
    margin-bottom: 15px;
}

.h2 {
    font-size: 24px !important;
    margin-top: 10px;
    margin-bottom: 10px;
}

.h3 {
    font-size: 18px !important;
    margin-top: 5px;
    margin-bottom: 5px;
}

::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .2);
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:focus {
    background: rgba(0, 0, 0, 0.3)
}

.form-control:focus {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(123, 104, 238, .6);
}

.p-absolute {
    position: absolute !important;
}

.p-relative {
    position: relative !important;
}

.p-static {
    position: static !important;
}

.p-sticky {
    position: sticky !important;
}

.no-shadow {
    box-shadow: none !important;
}

.t0 {
    top: 0 !important;
}

.t2 {
    top: 2px !important;
}

.r5 {
    right: 5px !important;
}

.r30 {
    right: 30px !important;
}

.t9 {
    top: 9px !important;
}

.t10 {
    top: 10px;
}

.b0 {
    bottom: 0 !important;
}

.r0 {
    right: 0 !important;
}

.l0 {
    left: 0 !important;
}

.l5 {
    left: 5px !important;
}

.l-unset {
    left: unset !important;
}

.r-unset {
    right: unset !important;
}

.j-flex-start {
    justify-content: flex-start !important;
}

.j-flex-center {
    justify-content: center !important;
}

.j-flex-end {
    justify-content: flex-end !important;
}

.j-flex-space-between {
    justify-content: space-between !important;
}

.j-flex-space-around {
    justify-content: space-around !important;
}

.j-flex-baseline {
    justify-content: baseline !important;
}

.flex-align-self-start {
    align-self: start !important
}

.flex-align-self-flex-end {
    align-self: flex-end !important
}

.flex-align-self-flex-start {
    align-self: flex-start !important
}

.flex-align-self-center {
    align-self: center !important
}

.vas {
    vertical-align: super !important;
}

.vat {
    vertical-align: top !important;
}

.vam {
    vertical-align: middle !important;
}

.vab {
    vertical-align: bottom !important;
}

.vatt {
    vertical-align: text-top !important;
}

.vatb {
    vertical-align: text-bottom !important;
}

.p-fixed {
    position: fixed;
}



.p-sticky {
    position: sticky !important;
}

.overflow-none {
    overflow: hidden;
}

.overflow-y-scroll {
    overflow-y: scroll;
}

.t3 {
    top: 3px;
}

.t10-minus {
    top: -10px !important;
}

.p00 {
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
}

.posr0 {
    right: 0 !important;
    left: unset !important;
}


.z1 {
    z-index: 1;
}

.pulsating {
    animation: pulseAnimation 1s infinite;
}

.z10 {
    z-index: 10;
}

.z100 {
    z-index: 100;
}

.zmax {
    z-index: 999999999;
}

.zmax-plus {
    z-index: 9999999999;
}

.o70 {
    opacity: 0.7 !important;
}

.o30 {
    opacity: 0.3 !important;
}

.o0 {
    opacity: 0 !important;
}

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

.o-none {
    outline: none !important;
}

.br50p {
    border-radius: 50% !important;
}

.br3 {
    border-radius: 3px !important;
}

.br4 {
    border-radius: 4px !important;
}

.br5 {
    border-radius: 5px !important;
}

.br7 {
    border-radius: 7px !important;
}

.br9 {
    border-radius: 9px !important;
}

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

.br11 {
    border-radius: 11px !important;
}

.br19 {
    border-radius: 19px !important;
}

.br25 {
    border-radius: 25px !important;
}

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

.err-outline {
    outline: 1px solid red !important;
}

.g4{
    gap: 4px !important;
}

.g10 {
    gap: 10px !important;
}

.g20 {
    gap: 20px !important;
}

.cp:hover {
    cursor: pointer !important;
}

.cna:hover {
    cursor: not-allowed !important;
}

.cna {
    cursor: not-allowed !important;
}

.nopointer {
    pointer-events: none !important;
}

.non-hoverable:hover {
    color: initial !important;
    background-color: initial !important;
    cursor: initial !important;
}

body {
    height: 100vh;
    overflow-y: auto;
}

.d-none {
    display: none !important;
}

.flex {
    display: flex;
}

.flex1 {
    flex: 1;
}

.d-flex:not(.collapse) {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
}

.d-flex-start {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
}

.d-flex-column {
    flex-direction: column !important;
}

.a-flex-center {
    align-items: center !important;
}

.a-flex-start {
    align-items: flex-start !important;
}

.a-flex-end {
    align-items: flex-end !important;
}

.a-flex-stretch {
    align-items: stretch !important;
}

.d-flex-grow {
    flex-grow: 1;
}

.d-flex-shrink {
    flex-shrink: 1;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.flex-nowrap {
    flex-wrap: nowrap !important;
}

.d-inline-flex {
    display: inline-flex !important;
    align-items: center;
}

.d-inline {
    display: inline !important;
}

.d-block {
    display: block !important;
}

.d-ib {
    display: inline-block !important;
}

.card-crm {
    padding: 5px 10px;
    margin-top: 5px;
    background-color: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08);
    border-radius: 5px;
}

.card-crm.high-shadow {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 1px 4px 8px rgba(0, 0, 0, 0.08);
}

.special-card-crm {
    transform: scale(1.02);
}

.card-crm.red {
    position: relative;
}

.card-crm.red:before {
    background-color: rgba(209, 100, 100, 0.2) !important;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    overflow: hidden;
}

.card-crm.inactive.na * {
    opacity: 0.95
}

.card-crm.inactive * {
    font-weight: 400;
}


.bg-crm {
    background-color: #7B68EE;
}

.bg-crm-white {
    background: #fff !important;
}

.bg-crm-transparent {
    background: transparent !important;
}

.bg-crm-fade {
    background-color: rgb(245, 249, 253) !important;
}

.bg-crm-light {
    background-color: #f7f7f7 !important;
}

.bg-crm-main-light {
    background-color: #F8F7FE !important;
}

.bg-crm-transparent {
    background-color: transparent !important
}

app-root .ion-page {
    left: unset;
    right: unset;
    top: unset;
    bottom: unset;
    display: unset;
    position: unset;
    flex-direction: unset;
    justify-content: unset;
    overflow: unset;
    width: 100%;
    z-index: 0 !important;
}

ion-app.notification-on app-user-menu-web .dropdown .dropdown-menu {
    top: 38px !important
}

a.crm-wrapper-anchor {
    color: unset;
}

.crm-wrapper-anchor:hover,
.crm-wrapper-anchor:focus {
    text-decoration: none;
}

.text-crm {
    color: #7B68EE !important;
}

.text-crm-white {
    color: #ffffff !important;
}

.text-crm-black {
    color: #000000 !important;
}

.text-crm-red {
    color: #e01e5a !important;
}

.text-crm-red-dark,
.text-crm-red-dark-all,
.text-crm-red-dark-all * {
    color: #A40D40 !important;
}

.text-crm-green-dark {
    color: rgba(57, 110, 61, 1) !important;
}

.text-crm-red-light {
    color: #E6427C !important;
}

.text-crm-all,
.text-crm-all * {
    color: #7B68EE !important;
}

.bg-crm-faded {
    background-color: #F7F7F7;
}

.text-crm-grey-dark {
    color: #707070 !important;
}

.text-crm-grey-dark-all,
.text-crm-grey-dark-all * {
    color: #707070 !important;
}

.text-crm-grey-dark-all .text-crm {
    color: #7B68EE !important;
}

.text-crm-dark-light,
.text-crm-dark-light-all,
.text-crm-dark-light-all * {
    color: #8a8a8a !important;
}

.anchor-crm-red-dark,
.anchor-crm-red-dark-all,
.anchor-crm-red-dark-all * {
    color: #A40D40 !important;
}

.anchor-crm-red-dark:hover,
.anchor-crm-red-dark-all:hover,
.anchor-crm-red-dark-all:hover * {
    color: #800d33;
}

.hoverable:hover {
    cursor: pointer;
}

.text-crm-grey-dark-faded {
    color: #A4A4A4 !important;
}

.text-crm-grey-dark-faded-all,
.text-crm-grey-dark-faded-all * {
    color: #A4A4A4 !important;
}

.b-dashed {
    border: 1px dashed #A4A4A4;
}

.b-dashed.hoverable:hover {
    border-color: #7B68EE;
}

.border-crm-1 {
    border: 1px solid #7B68EE !important;
}

.text-crm-grey-dark-faded.hoverable:hover {
    color: #7B68EE !important;
}

.text-crm-grey-dark-faded-all.hoverable:hover,
.text-crm-grey-dark-faded-all.hoverable:hover * {
    color: #7B68EE !important;
}

a.crm-no-anchor {
    color: unset;
}

a.crm-no-anchor:hover,
a.crm-no-anchor:focus {
    text-decoration: none;
    color: unset;
}

.text-crm-onhover:hover {
    color: #7B68EE;
}

.text-crm-grey-light {
    color: rgba(200, 200, 200, 1) !important;
}

.t-left {
    text-align: left;
}

.t-right {
    text-align: right;
}

.t-center {
    text-align: center;
}

/* crm-fg */
.crm-fg {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    position: relative;
    margin-bottom: unset;
}

.crm-fg>label,
.crm-fg>.labels-wrapper {
    position: absolute;
}

.crm-fg>label {
    text-transform: uppercase;
    font-size: 13px;
    color: #A4A4A4;
    font-weight: 500;
}

.crm-fg>label+.form-wrapper,
.crm-fg>.labels-wrapper+.form-wrapper {
    margin-top: 20px;
}

.crm-fg.has-small-label label {
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 3px;
}

.crm-fg.has-small-label>label+.form-wrapper,
.crm-fg.has-small-label>.labels-wrapper+.form-wrapper {
    margin-top: 15px;
}

.crm-fg .form-wrapper {
    width: 100%;
    outline: none;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: flex-start;
    background-color: #fff;
    border-radius: 4px;
    align-items: center;
}

.form-wrapper:not(.textarea-wrapper) {
    height: 32px;
}

.crm-fg .form-wrapper input,
.crm-fg .form-wrapper textarea,
.crm-fg .form-wrapper .input-btn {
    flex-grow: 1;
    border: none;
    border-radius: 4px;
    outline: none;
    padding: 5px 9px;
}

.crm-fg .form-wrapper input:focus,
.crm-fg .form-wrapper textarea:focus,
.crm-fg .form-wrapper .input-btn:focus {
    box-shadow: inset 2px 2px 3px rgba(0, 0, 0, .075);
}

.crm-fg .form-wrapper a.input-btn {
    max-width: calc(100% - 30px);
}

.crm-fg .form-wrapper a.input-btn .value {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.crm-fg .form-wrapper .addon {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    width: max-content;
    padding: 5px 6px;
}

.crm-fg .form-wrapper input::placeholder,
.crm-fg .form-wrapper textarea::placeholder {
    color: #C5C5C5;
}

/* input error handlers */
.crm-fg.error .form-wrapper input {
    outline: 1px solid #e01e5a;
}

.crm-fg label.error-label {
    display: none;
}

.crm-fg.error label.error-label {
    display: unset;
    color: #e01e5a;
    font-style: italic;
    margin-left: 5px;
}

/* end of input error handlers */

.crm-fg .form-wrapper input.invalid~.addon:not(.static) {
    color: #C5C5C5;
    cursor: not-allowed;
}

.crm-fg .form-wrapper input:not(.invalid)~.addon:not(.static) {
    color: #7B68EE;
}

.crm-fg .form-wrapper input:not(.invalid)~.addon:not(.static):hover {
    background-color: #7B68EE;
    color: #fff;
    cursor: pointer;
}

.dropdown-menu>.active>a,
.dropdown-menu>.active>a:focus,
.dropdown-menu>.active>a:hover {
    background-color: #7B68EE !important;
}

.crm-small-anchor {
    color: #0a0a0a;
    font-size: 14px;
    line-height: 14px;
    vertical-align: middle;
    margin-bottom: 5px;
}

.crm-small-anchor.default {
    color: #7B68EE;
    font-size: 14px;
    line-height: 16px;
    vertical-align: middle;
    margin-bottom: 5px;
    border-bottom: 1px dashed #7B68EE;
}

.crm-small-anchor.default:hover {
    text-decoration: none;
}

.crm-small-anchor span {
    display: flex;
    align-items: center;
    justify-content: center;
}

.crm-small-anchor.tuc {
    font-size: 11px;
}

.crm-small-anchor:hover,
.crm-small-anchor:hover * {
    cursor: pointer;
    color: #531CB3 !important;
    border-color: #531CB3;
}

.dashed-grey-anchor {
    border-bottom: 1px dashed #707070
}

.top-bar .dashed-grey-anchor {
    line-height: 1.1;
    cursor: pointer;
}

a {
    text-decoration: none;
}

.lh14px {
    line-height: 14px !important;
}

.lh18px {
    line-height: 18px !important;
}

.lh19px {
    line-height: 19px !important;
}

.lh1 {
    line-height: 1 !important;
}

.lh1point2 {
    line-height: 1.2 !important;
}

.lh22px {
    line-height: 22px !important;
}

.lh1-n-half {
    line-height: 1.5 !important;
}

.t-ellipsis {
    line-height: 1.2em !important;
    height: 1.2em !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    min-width: 0;
    max-width: 100% !important;
}

.t-ellipsis-special {
    overflow-x: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

.m0 {
    margin: 0 !important;
}

.m3 {
    margin: 3px !important;
}

.m5 {
    margin: 5px !important;
}

.m10 {
    margin: 10px !important;
}

.m20 {
    margin: 20px !important
}

.m-auto {
    margin: auto !important;
}

.m0-auto {
    margin: 0 auto !important;
}

.m15-auto {
    margin: 15px auto !important;
}

.m5-minus {
    margin: -5px !important;
}

.mt34-minus {
    margin-top: -34px !important;
}

.mt30-minus {
    margin-top: -30px !important;
}

.mt20-minus {
    margin-top: -20px !important;
}

.mt10-minus {
    margin-top: -10px !important;
}

.mt5-minus {
    margin-top: -5px !important;
}

.mt0 {
    margin-top: 0 !important;
}

.mt1 {
    margin-top: 1px !important;
}

.mt2 {
    margin-top: 2px !important;
}

.mt3 {
    margin-top: 3px !important;
}

.mt4 {
    margin-top: 4px !important;
}

.mt5 {
    margin-top: 5px !important;
}

.mt7 {
    margin-top: 7px !important;
}

.mt8 {
    margin-top: 8px !important;
}

.mt10 {
    margin-top: 10px !important;
}

.mt14 {
    margin-top: 14px !important;
}

.mt15 {
    margin-top: 15px !important;
}

.mt20 {
    margin-top: 20px !important;
}

.mt25 {
    margin-top: 25px !important;
}

.mt30 {
    margin-top: 30px;
}

.mt35 {
    margin-top: 35px;
}

.mt50 {
    margin-top: 50px;
}

.mt70 {
    margin-top: 70px;
}

.mt90 {
    margin-top: 90px;
}

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

.mb0 {
    margin-bottom: 0px !important;
}

.mb1 {
    margin-bottom: 1px !important;
}

.mb2 {
    margin-bottom: 2px !important;
}

.mb3 {
    margin-bottom: 3px !important;
}

.mb4 {
    margin-bottom: 4px !important;
}

.mb5 {
    margin-bottom: 5px !important;
}

.mb7 {
    margin-bottom: 7px !important;
}

.mb8 {
    margin-bottom: 8px !important;
}

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

.mb12 {
    margin-bottom: 12px !important;
}

.mb14 {
    margin-bottom: 14px !important;
}

.mb15 {
    margin-bottom: 15px !important;
}

.mb20 {
    margin-bottom: 20px !important;
}

.mb30 {
    margin-bottom: 30px !important;
}

.mb35 {
    margin-bottom: 35px !important;
}

.mb50 {
    margin-bottom: 50px !important;
}

.mb70 {
    margin-bottom: 70px !important;
}

.mb135 {
    margin-bottom: 135px !important;
}

.ml30-minus {
    margin-left: -30px !important;
}

.ml20-minus {
    margin-left: -20px !important;
}

.ml5-minus {
    margin-left: -5px !important;
}

.ml3-minus {
    margin-left: -3px !important;
}

.mlauto {
    margin-left: auto !important;
}

.ml0 {
    margin-left: 0px !important;
}

.ml1 {
    margin-left: 1px !important
}

.ml3 {
    margin-left: 3px !important;
}

.ml4 {
    margin-left: 4px !important;
}

.ml5 {
    margin-left: 5px !important;
}

.ml6 {
    margin-left: 6px !important;
}

.ml8 {
    margin-left: 8px !important;
}

.ml10 {
    margin-left: 10px !important;
}

.ml12 {
    margin-left: 12px !important;
}

.ml15 {
    margin-left: 15px !important;
}

.ml20 {
    margin-left: 20px !important;
}

.ml25 {
    margin-left: 25px !important;
}

.ml30 {
    margin-left: 30px !important;
}

.ml35 {
    margin-left: 35px !important;
}

.ml35p {
    margin-left: 35% !important;
}

.ml40 {
    margin-left: 40px !important;
}

.ml50 {
    margin-left: 50px !important;
}

.ml55 {
    margin-left: 55px !important;
}

.ml65 {
    margin-left: 65px !important;
}

.ml70 {
    margin-left: 70px !important;
}

.mr20-minus {
    margin-right: -20px !important;
}

.mr5-minus {
    margin-right: -5px !important;
}

.mrauto {
    margin-right: auto !important;
}

.mr0 {
    margin-right: 0px !important;
}

.mr1 {
    margin-right: 1px !important;
}

.mr3 {
    margin-right: 3px !important;
}

.mr4 {
    margin-right: 4px !important;
}

.mr5 {
    margin-right: 5px !important;
}

.mr8 {
    margin-right: 8px !important;
}

.mr10 {
    margin-right: 10px !important;
}

.mr15 {
    margin-right: 15px !important;
}

.mr1em {
    margin-right: 1em !important;
}

.mr20 {
    margin-right: 20px !important;
}

.mr25 {
    margin-right: 25px !important;
}

.mr30 {
    margin-right: 30px !important;
}

.mr35 {
    margin-right: 35px !important;
}

.mr40 {
    margin-right: 40px !important;
}

.mr50 {
    margin-right: 50px !important;
}

.mr60 {
    margin-right: 60px !important;
}

.mr100 {
    margin-right: 100px !important;
}

.mx30-minus {
    margin-left: -15px !important;
    margin-right: -15px !important;
}

.mx16 {
    margin-left: 8px !important;
    margin-right: 8px !important;
}

.mx20 {
    margin-left: 10px !important;
    margin-right: 10px !important;
}

.mx80 {
    margin-left: 40px !important;
    margin-right: 40px !important;
}

.p0 {
    padding: 0 !important;
}

.p-point3em {
    padding: .3em !important;
}

.p1 {
    padding: 1px !important;
}

.p3 {
    padding: 3px !important;
}

.p4 {
    padding: 4px !important;
}

.p5 {
    padding: 5px !important;
}

.p10 {
    padding: 10px !important;
}

.p12 {
    padding: 12px !important;
}

.p15 {
    padding: 15px !important;
}

.p20 {
    padding: 20px !important;
}

.p25 {
    padding: 25px !important;
}

.p30 {
    padding: 30px !important;
}

.p40 {
    padding: 40px !important;
}

.px0 {
    padding-left: 0px !important;
    padding-right: 0px;
}

.px6 {
    padding-left: 3px !important;
    padding-right: 3px;
}

.px8 {
    padding-left: 4px !important;
    padding-right: 4px;
}

.px10 {
    padding-left: 5px !important;
    padding-right: 5px;
}

.px16 {
    padding-left: 8px !important;
    padding-right: 8px;
}

.px20 {
    padding-left: 10px !important;
    padding-right: 10px;
}

.px24 {
    padding-left: 12px !important;
    padding-right: 12px;
}

.px30 {
    padding-left: 15px !important;
    padding-right: 15px;
}

.px50 {
    padding-left: 25px !important;
    padding-right: 25px;
}

.px80 {
    padding-left: 40px !important;
    padding-right: 40px;
}

.py0 {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.py6 {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

.py8 {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.py10 {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.py14 {
    padding-top: 7px !important;
    padding-bottom: 7px !important
}

.py16 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.py20 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.py30 {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

.py36 {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

.py66 {
    padding-top: 33px !important;
    padding-bottom: 33px !important;
}

.pb0 {
    padding-bottom: 0px !important;
}

.pb3 {
    padding-bottom: 3px;
}

.pb4 {
    padding-bottom: 4px;
}

.pb5 {
    padding-bottom: 5px;
}

.pb7 {
    padding-bottom: 7px;
}

.pb10 {
    padding-bottom: 10px;
}

.pb15 {
    padding-bottom: 15px !important;
}

.pb20 {
    padding-bottom: 20px !important;
}

.pb25 {
    padding-bottom: 25px !important;
}

.pb30 {
    padding-bottom: 30px !important;
}

.pt0 {
    padding-top: 0px !important;
}

.pt5 {
    padding-top: 5px !important;
}

.pt10 {
    padding-top: 10px !important;
}

.pt12 {
    padding-top: 12px !important;
}

.pt15 {
    padding-top: 15px !important;
}

.pt20 {
    padding-top: 20px !important;
}

.pt25 {
    padding-top: 25px !important;
}

.pt30 {
    padding-top: 30px !important;
}

.pt40 {
    padding-top: 40px !important;
}

.pl0 {
    padding-left: 0px !important;
}

.pl5 {
    padding-left: 5px !important;
}

.pl6 {
    padding-left: 6px !important;
}

.pl10 {
    padding-left: 10px !important;
}

.pl12 {
    padding-left: 12px !important;
}

.pl15 {
    padding-left: 15px !important;
}

.pl20 {
    padding-left: 20px !important;
}

.pl30 {
    padding-left: 30px !important;
}

.pl35 {
    padding-left: 35px !important;
}

.pl40 {
    padding-left: 40px !important;
}

.pl45 {
    padding-left: 45px !important;
}

.pl51 {
    padding-left: 51px !important;
}

.pr0 {
    padding-right: 0px !important;
}

.pr5 {
    padding-right: 5px !important;
}

.pr6 {
    padding-right: 6px !important;
}

.pr8 {
    padding-right: 8px !important;
}

.pr10 {
    padding-right: 10px !important;
}

.pr15 {
    padding-right: 15px !important;
}

.pr20 {
    padding-right: 20px !important;
}

.pr30 {
    padding-right: 30px !important;
}

.pr40 {
    padding-right: 40px !important;
}

.pr45 {
    padding-right: 45px !important;
}

.pr65 {
    padding-right: 65px !important;
}

.pr80 {
    padding-right: 80px !important;
}

.p-all-btn {
    padding: 6px 12px !important;
}

.fwb {
    font-weight: bold !important;
}

.fwsb {
    font-weight: 600 !important;
}

.fwm {
    font-weight: 500 !important;
}

.fwn {
    font-weight: normal !important;
}

.fwl {
    font-weight: 350 !important;
}

.fs7 {
    font-size: 7px !important;
}

.fs8 {
    font-size: 8px !important;
}

.fs9 {
    font-size: 9px !important;
}

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

.fs11 {
    font-size: 11px !important;
}

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

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

.fs14 {
    font-size: 14px !important;
}

.fs15 {
    font-size: 15px !important;
}

.fs16 {
    font-size: 16px !important;
}

.fs17 {
    font-size: 17px !important;
}

.fs18 {
    font-size: 18px !important;
}

.fs19 {
    font-size: 19px !important;
}

.fs20 {
    font-size: 20px !important;
}

.fs22 {
    font-size: 22px !important;
}

.fs24 {
    font-size: 24px !important;
}

.fs27 {
    font-size: 27px !important;
}

.fs30 {
    font-size: 30px !important;
}

.fs36 {
    font-size: 36px !important;
}

.fs42 {
    font-size: 42px !important;
}

.fs62 {
    font-size: 62px !important;
}

.tul {
    text-decoration: underline !important;
}

.td-none {
    text-decoration: none !important;
}

.tul-on-hover-heading:hover h3 {
    text-decoration: underline !important;
}

.tul-on-hover-all:hover * {
    text-decoration: underline !important;
}

.tul-on-hover-all-except-icon:hover *:not([class^="icon-"]) {
    text-decoration: underline !important;
}

.tuc {
    text-transform: uppercase !important;
}

.tti {
    text-transform: initial !important;
}

.ttc {
    text-transform: capitalize !important;
}

.ti {
    font-style: italic;
}

.icon-anchor {
    text-decoration: none !important;
}

.anchor-crm,
.anchor-crm-all,
.anchor-crm-all * {
    color: #7B68EE !important;
    cursor: pointer;
}

.anchor-crm.anchor-danger:hover {
    color: rgba(209, 100, 100, 1) !important;
}

.anchor-crm:hover,
.anchor-crm.active,
.anchor-crm:active,
.anchor-crm:focus,
.anchor-crm-all:hover *,
.anchor-crm-all.active *,
.anchor-crm-all *:active,
.anchor-crm-all *:focus {
    color: #531CB3 !important;
}

.anchor-crm.non-active:hover,
.anchor-crm.non-active.active,
.anchor-crm.non-active:active,
.anchor-crm.non-active:focus {
    color: #7B68EE !important;
}

.anchor-crm-du,
.anchor-crm-du-all {
    border-bottom: 1px dashed #7B68EE;
}

.anchor-crm-du,
.anchor-crm-du-all,
.anchor-crm-du-all * {
    color: #7B68EE !important;
    cursor: pointer;
}

.anchor-crm-du:hover,
.anchor-crm-du-all:hover,
.anchor-crm-du-all:hover *,
.anchor-crm-du.active,
.anchor-crm-du-all.active,
.anchor-crm-du-all.active *,
.anchor-crm-du:active,
.anchor-crm-du-all:active,
.anchor-crm-du-all:active *,
.anchor-crm-du:focus,
.anchor-crm-du-all:focus,
.anchor-crm-du-all:focus * {
    color: #531CB3 !important;
    border-color: #531CB3;
}


.anchor-crm.tab.red {
    color: rgba(209, 100, 100, 1) !important;
}

.anchor-crm.tab.red:hover,
.anchor-crm.tab.red.active,
.anchor-crm.tab.red:active,
.anchor-crm.tab.red:focus {
    color: rgba(161, 48, 48, 1) !important;
}

.anchor-crm.tab.red.active {
    border-bottom: 2px solid rgba(161, 48, 48, 1) !important;
    position: relative;
}

.anchor-crm.tab.active {
    border-bottom: 2px solid #531CB3 !important;
    position: relative;
}

.dropdown-menu>.active>a,
.dropdown-menu>.active>a:focus,
.dropdown-menu>.active>a:hover {
    background-color: #7B68EE;
    color: #fff;
}

.anchor-crm.tab.active:before {
    position: absolute;
    top: 100%;
    margin-top: 2px;
    left: 50%;
    margin-left: -7px;
    display: inline-block;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ccc;
    border-left: 7px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    content: '';
    z-index: 100;
}

.anchor-crm.tab.active:after {
    position: absolute;
    top: 100%;
    margin-top: 4px;
    left: 50%;
    margin-left: -6px;
    display: inline-block;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #ffffff;
    border-left: 6px solid transparent;
    content: '';
    z-index: 101;
}

a.tab.disabled {
    opacity: 0.5;
    pointer-events: none;
    color: rgba(150, 145, 143, 1) !important;
}

.anchor-crm-black {
    color: rgba(0, 0, 0, 0.8) !important;
}

.anchor-crm-black:hover,
.anchor-crm-black.active,
.anchor-crm-black:active,
.anchor-crm-black:focus,
.anchor-crm-black:visited {
    color: rgba(0, 0, 0, 0.9) !important;
    ;
}

.anchor-crm-white {
    color: rgba(255, 255, 255, 0.8) !important;
}

.anchor-crm-white:hover,
.anchor-crm-white.active,
.anchor-crm-white:active,
.anchor-crm-white:focus {
    color: rgba(255, 255, 255, 1) !important;
}

.btn-crm,
.spinner-btn-crm .btn {
    background-color: #7B68EE !important;
    color: #efefef !important;
    transition: all 0.35s;
}

.disabled>.btn-crm * {
    background-color: transparent !important
}

.btn-crm:not(.disabled) {
    cursor: pointer;
}

.btn-crm:hover,
.btn-crm.active,
.btn-crm:active,
.btn-crm:focus {
    background-color: #531CB3 !important;
    color: #fff !important;
}

.btn-crm.inactive {
    background-color: unset !important;
}

.btn-crm.disabled,
.btn-crm.disabled:hover,
.btn-crm.disabled.active,
.btn-crm.disabled:active,
.btn-crm.disabled:focus {
    background-color: rgba(124, 104, 238, 0.5) !important;
    pointer-events: none;
}

.btn-crm.disable,
.btn-crm.disable:hover,
.btn-crm.disable.active,
.btn-crm.disable:active,
.btn-crm.disable:focus {
    background-color: rgba(124, 104, 238, 0.5) !important;
    pointer-events: none;
}

.btn-crm.small {
    padding: 4px 8px;
}

.btn-crm.disabled[data-tooltip]:before {
    background-color: rgba(88, 88, 88, 0.5);
}

.rounded-btn {
    height: 25px;
    border-radius: 25px;
    padding: 2px 8px;
}

.btn-crm-red {
    background-color: rgba(209, 100, 100, 1) !important;
}

.btn-crm-red:hover,
.btn-crm-red.active,
.btn-crm-red:active,
.btn-crm-red:focus {
    background-color: rgba(161, 48, 48, 1) !important;
    color: #fff !important;
}

.btn-crm-yellow {
    background-color: rgba(239, 179, 82, 1) !important;
}

.btn-crm-yellow:hover,
.btn-crm-yellow.active,
.btn-crm-yellow:active,
.btn-crm-yellow:focus {
    background-color: rgba(201, 131, 19, 1) !important;
}

.btn-crm-blue {
    background-color: rgba(83, 111, 246, 1) !important;
}

.btn-crm-blue:hover,
.btn-crm-blue.active,
.btn-crm-blue:active,
.btn-crm-blue:focus {
    background-color: rgba(11, 46, 218, 1) !important;
}

.btn-crm-grey {
    background-color: rgba(150, 145, 143, 1) !important;
}

.btn-crm-black {
    background-color: rgba(51, 51, 51, 1) !important;
}

.btn-crm-white {
    background-color: rgba(255, 255, 255, 1) !important;
}

.btn-crm-white-outline {
    background-color: transparent !important;
    border: 2px solid white;
    color: #fff !important;
}

.btn-crm-white-outline:hover,
.btn-crm-white-outline.active,
.btn-crm-white-outline:active,
.btn-crm-white-outline:focus {
    background-color: #fff !important;
    color: #7B68EE !important
}

.btn-crm-outline {
    background-color: transparent !important;
    border: 2px solid #7B68EE;
    color: #7B68EE !important;
    transition: all 0.35s;
}

.btn-crm-outline * {
    color: #7B68EE !important;
}

.btn-crm-outline:hover,
.btn-crm-outline.active,
.btn-crm-outline:active,
.btn-crm-outline:focus {
    background-color: #7B68EE !important;
    color: #fff !important
}

.btn-crm-outline:hover *,
.btn-crm-outline.active *,
.btn-crm-outline:active *,
.btn-crm-outline:focus * {
    color: #fff !important
}

.btn-crm-outline-white-bg {
    background-color: #fff !important;
    border: 2px solid #7B68EE;
    color: #7B68EE !important;
}

.btn-crm-outline-white-bg:hover,
.btn-crm-outline-white-bg.active,
.btn-crm-outline-white-bg:active,
.btn-crm-outline-white-bg:focus {
    background-color: #7B68EE !important;
    color: #fff !important
}

.btn-crm-outline.disabled,
.btn-crm-outline.disabled:hover,
.btn-crm-outline.disabled.active,
.btn-crm-outline.disabled:active,
.btn-crm-outline.disabled:focus,
.btn-crm-outline.disabled * {
    color: rgba(124, 104, 238, 0.5) !important;
    pointer-events: none;
    border-color: rgba(124, 104, 238, 0.5) !important;
}

.btn-crm-outline.disabled:focus,
.btn-crm-outline.disabled:active {
    background-color: unset;
    background-color: unset !important;
    outline: none !important;
}



.btn-crm-red-outline {
    background-color: transparent !important;
    border: 2px solid rgba(209, 100, 100, 1);
    color: rgba(209, 100, 100, 1) !important;
}

.btn-crm-red-outline:hover,
.btn-crm-red-outline.active,
.btn-crm-red-outline:active,
.btn-crm-red-outline:focus {
    background-color: rgba(209, 100, 100, 1) !important;
    color: #fff !important
}

.btn-crm-red-outline {
    background-color: transparent !important;
    border: 2px solid rgba(209, 100, 100, 1);
    color: rgba(209, 100, 100, 1) !important;
}

.btn-crm-green {
    background-color: rgba(94, 183, 101, 1) !important;
}

.spinner-btn-crm-green .btn {
    background-color: rgba(94, 183, 101, 1) !important;
}

.btn-crm-green:hover,
.btn-crm-green.active,
.btn-crm-green:active,
.btn-crm-green:focus {
    background-color: rgba(54, 124, 60, 1) !important;
}

.spinner-btn-crm-green .btn:hover,
.spinner-btn-crm-green .btn.active,
.spinner-btn-crm-green .btn:active,
.spinner-btn-crm-green .btn:focus {
    background-color: rgba(54, 124, 60, 1) !important;
}

.btn-crm-transparent {
    background-color: transparent !important;
}

[type="checkbox"]+label {
    margin-bottom: 0
}

[type="checkbox"]+label:after {
    border-radius: 2px;
}

[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
    position: absolute;
    left: -9999px;
}

[type="checkbox"]:not(:checked)+label,
[type="checkbox"]:checked+label {
    position: relative;
    overflow: hidden;
    padding-left: 18px;
    cursor: pointer;
    display: inline-block;
    height: 13px;
    line-height: 13px;
    user-select: none;
}

[type="checkbox"]+label:before,
[type="checkbox"]+label:after {
    content: '';
    position: absolute;
    left: 0;
    z-index: 1;
    -webkit-transition: .2s;
    transition: .2s;
}

[type="checkbox"]:not(:checked)+label:before {
    top: 0px;
    width: 13px;
    height: 13px;
}

[type="checkbox"]:not(:checked)+label:after {
    top: 0px;
    width: 13px;
    height: 13px;
    border: 1px solid #7B68EE;
    z-index: 0;
}

[type="checkbox"]:checked+label:before {
    color: #fff;
    content: '\e914';
    font-family: "telecrm-new" !important;
    line-height: 1;
    font-size: 12px;
}

[type="checkbox"]:checked+label:after {
    top: 0px;
    width: 13px;
    height: 13px;
    background-color: #7B68EE;
    z-index: 0;
}

[type="checkbox"]:disabled:not(:checked)+label:before,
[type="checkbox"]:disabled:checked+label:before {
    background-color: #F4F5F7;
    width: 13px;
    height: 13px;
    cursor: not-allowed;
}

[type="checkbox"]:disabled+label {
    color: #858585;
    cursor: not-allowed;
}

[type="checkbox"].medium:not(:checked)+label,
[type="checkbox"]:checked+label,
[type="checkbox"].medium:checked+label {
    height: 16px;
    line-height: 16px;
}

[type="checkbox"].medium:not(:checked)+label:before,
[type="checkbox"].medium:not(:checked)+label:after,
[type="checkbox"].medium:checked+label:after {
    width: 16px;
    height: 16px;
}

[type="checkbox"].medium:checked+label:before {
    font-size: 15px;
}


.checkmark-container {
    display: flex;
    position: relative;
    cursor: pointer;
    font-size: 22px;
    user-select: none;
    margin: 0;
    height: 24px;
    width: 24px;
}

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

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    margin-left: 12px;
    left: 0;
    height: 24px;
    width: 24px;
    background-color: #fff;
    border-radius: 4px;
    border: 2px solid #7B68EE;
}

/* On mouse-over, add a grey background color */
.checkmark-container:hover input:not(:disabled):not(:checked)~.checkmark {
    background-color: #E5E1FC;
}

.checkmark-container input:disabled~.checkmark {
    cursor: not-allowed;
}


/* Style the checkmark/indicator */
.checkmark-container .checkmark:after {
    color: #fff;
    content: '\e914';
    font-family: "telecrm-new" !important;
    line-height: 1;
    font-size: 20px;
    text-transform: initial;
    justify-content: center;
    align-items: center;
    height: 20px;
    width: 20px;
    display: none;
}

.checkmark-container input:checked~.checkmark {
    background-color: #7B68EE;
}

.checkmark-container input:checked~.checkmark:after {
    display: flex;
}


/* #customFieldsWrapper{max-height: calc(100vh - 224px);overflow-y: auto;} */
#customFieldsWrapper ion-reorder-group ion-item.error {
    margin-top: 23px;
    border: 2px solid #e01e5a !important;
    border-radius: 4px;
}

#customFieldsWrapper ion-reorder-group ion-item.error:before {
    content: attr(title);
    color: #e01e5a;
    font-size: 14px;
    position: absolute;
    top: 0;
    margin-top: -4px;
    right: 0;
    z-index: 10;
    margin-right: 5px;
}

#settingsPageComponent [class^="icon-"]:not(.d-none) {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

#settingsPageComponent [class^="icon-"]:not(.d-none):before {
    vertical-align: middle !important;
}

.lof .custom-fields-wrapper>ion-item:before {
    height: 3px;
    position: absolute;
    background-color: #fff;
    display: flex;
}

.lof .ion-item-btn,
.dropdown.field-type .btn {
    display: block;
    text-align: left;
    font-size: 16px;
    background-color: #fff;
    color: #000;
    border: 1px solid #ccc;
    padding-left: 51px;
}

.lof .ion-item-btn+.dropdown-menu,
.dropdown.field-type .dropdown-menu {
    width: -webkit-fill-available;
}

.dropdown.field-type.inside-ion-item .dropdown-menu {
    margin-right: 15px;
    margin-top: -8px;
}

.dropdown.field-type .caret {
    float: right;
    margin-top: 9px;
}

.dropdown.field-type.inside-ion-item .caret {
    margin-right: 24px;
}

.lof ul.nav-tabs-list {
    padding: 0;
    margin: 0;
}

.lof ul.nav-tabs-list li,
.lof ul.nav-tabs-list li,
.lof ul.nav-tabs-list li a,
.lof ul.nav-tabs-list li a span,
.lof ul.nav-tabs-list li span a {
    display: inline-block !important;
}

.lof ul.nav-tabs-list li {
    display: inline-block;
    padding: 0;
    margin: 0 10px;
}

.lof ul.nav-tabs-list li a a {
    padding: 5px 0;
    color: #7B68EE;
    text-transform: capitalize;
    font-size: 15px;
}

.lof ul.nav-tabs-list li a a[aria-expanded="true"] {
    border-bottom: 3px solid #7B68EE;
}

.lof .business-type-label .collapse.in {
    display: unset
}

.lof ul.nav-tabs-list li a a:not([aria-expanded="true"]) i.icon-eye:before {
    content: "\f070";
}


.crm-ripple {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    cursor: pointer;
}

.crm-ripple.rounded {
    border-radius: 50%;
}

.crm-ink {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    transform: scale(0);
    opacity: 0.4;
}

.crm-ripple.light-base .crm-ink {
    background: #000;
}

.crm-ripple.medium-base .crm-ink {
    background: #bdc3c7;
}

.crm-ink.animate {
    animation: ripple 0.6s linear;
}

.custom-modal-backdrop {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 10;
}

.custom-modal-backdrop+.modal {
    z-index: 100000;
    display: block;
    width: 100%;
    height: 100vh;
    overflow-y: auto;
}

.custom-modal-backdrop+.modal .modal-header,
.custom-modal-backdrop+.modal .modal-body,
.custom-modal-backdrop+.modal .modal-footer {
    border-radius: 8px;
}

.custom-modal-backdrop+.modal label,
.crm-custom-field-label {
    color: rgba(150, 150, 150, 1);
    text-transform: uppercase;
    font-size: 12px;
}

.field-box .card-crm {
    transition: all .3s;
}

.system-fields .field-box .card-crm {
    border: 4px solid #fff;
}

.field-box:hover *:not(.disabled),
.field-box .card-crm.active,
.field-box .card-crm.active * {
    cursor: pointer;
    transition: all ease 0.3s;
    color: #7B68EE !important;
    border-color: #7B68EE;
}

.field-box .card-crm.disabled {
    opacity: 0.45;
}

.field-box .card-crm.disabled:hover {
    cursor: not-allowed;
}

.field-box .card-crm.disabled:hover * {
    pointer-events: none;
}


.custom-reoder-field .main-element {
    margin: -10px 0;
    padding: 10px 0;
}

/* .field-options .color-label{border-left: 8px solid white;} */
.field-options .color-label .color-indicator[style^="background-color: rgb(255, 255, 255)"] {
    border: 1px solid #ccc !important;
    ;
}

.field-options .color-label .color-indicator {
    width: 10px;
    display: block;
    position: absolute;
    height: 100%;
}

.field-options .color-label .color-indicator~.form-control {
    margin-left: 10px;
    border-left: 0;
    width: calc(100% - 10px);
    border-radius: 0 4px 4px 0;
}

.field-options .color-selection-dropdown {
    padding: 5px;
    position: absolute;
    left: unset;
    right: 0;
    max-width: 180px;
    top: 0;
    z-index: 10000000000000;
    margin-right: 45px;
    margin-top: 20px;
    padding-bottom: 0;
}

.field-options .color-selection-dropdown .color-palette-bar {
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 1;
}

.field-options .color-selection-dropdown .color-palette-bar li {
    display: inline-block;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    margin: 4px;
    transition: all 0.26s;
}

ion-item.dropdown-inside.allow-overfolw {
    overflow: visible;
    color: #fff;
    position: relative;
}

.field-options .color-selection-dropdown .color-palette-bar li:hover {
    transform: scale(1.3);
    transition: all 0.26s;
    cursor: pointer;
}

.field-options .color-selection-dropdown .color-palette-bar li.active {
    transform: scale(1.3);
    transition: all 0.26s;
}

.field-options .color-selection-dropdown .color-palette-bar li.active:before {
    content: "\e914";
    font-family: "telecrm-new" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #fff !important;
}

.field-options .add-colors-anchor {
    right: 0;
    margin-right: 35px;
    line-height: 34px;
}

ion-item.dropdown .open~.dropdown-menu {
    display: block;
}

.edit-lead-card-btn {
    right: 0px !important;
    top: 0;
    margin-top: 0px !important;
    margin-right: -10px !important;
}

.dropdown.multi-option-lead-fields.open {
    display: inline-block;
}

.dropdown.multi-option-lead-fields .dropdown-menu {
    top: 0
}

.dropdown.multi-option-lead-fields .dropdown-menu {
    top: 0;
    right: 0;
    left: unset;
}

.dropdown.multi-option-lead-fields .dropdown-menu li label {
    color: rgba(150, 145, 143, 1);
    text-transform: uppercase;
    font-weight: normal;
    font-size: 11px;
}

.dropdown.multi-option-lead-fields .dropdown-menu li.active label {
    color: #ddd;
}

.dropdown.multi-option-lead-fields .dropdown-menu li .value {
    font-weight: bold;
}

.dropdown.multi-option-lead-fields .dropdown-menu li.active label:before {
    content: "\f00c";
    font-size: 13px !important;
    vertical-align: middle;
    margin-right: 5px;
    font: normal normal normal 13px/1 FontAwesome;
    position: absolute;
    right: 0;
    margin-right: 10px;
}

.dropdown.field-type .dropdown-menu>li a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}

.dropdown.field-type .dropdown-menu>li>a:focus,
.dropdown.field-type .dropdown-menu>li>a:hover {
    text-decoration: none;
    background-color: #f5f5f5;
}

.dropdown.field-type .dropdown-menu>.active>a,
.dropdown.field-type .dropdown-menu>.active>a:focus,
.dropdown.field-type .dropdown-menu>.active>a:hover {
    background-color: #7B68EE;
    color: #fff;
}


.main-filter-body.not-editable app-filter-tags .option .icon-x,
.main-filter-body.not-editable app-filter-dropdown .option .icon-x,
.main-filter-body.not-editable .text-options-wrapper input,
.main-filter-body.not-editable .tag .icon-x {
    display: none !important;
}

.main-filter-body app-filter-dropdown .body label .inner-text,
.main-filter-body app-filter-tags .body label .inner-text,
.main-filter-body app-lead-status-filter .body label .inner-text,
.main-filter-body app-batch-system-filter .body label .inner-text {
    padding: 2px 4px;
    border-radius: 4px;
    display: flex;
    height: max-content;
}

.main-filter-body app-filter-dropdown [type="checkbox"]:checked+label:after,
.main-filter-body app-filter-tags [type="checkbox"]:checked+label:after,
.main-filter-body app-lead-status-filter [type="checkbox"]:checked+label:after,
.main-filter-body app-batch-system-filter [type="checkbox"]:checked+label:after {
    top: unset;
}

.main-filter-wrapper.mobile .main-filter-body .activated .item .details {
    flex-wrap: wrap;
    width: calc(100% - 28px);
    padding-right: 0;
}

.main-filter-wrapper.mobile .main-filter-body .activated .item .details .name {
    width: 100%;
    margin-bottom: 5px;
    order: 1;
}

.main-filter-wrapper.mobile .main-filter-body .activated .item .details .close {
    order: 1;
    position: absolute;
    right: 0;
    margin-right: 12px;
}

.main-filter-wrapper.mobile .main-filter-body .activated .item .details>* {
    order: 2;
}

.main-filter-wrapper.mobile .main-filter-body .activated .item .details .multi-select-dropdown {
    margin-right: 10px !important;
}

.main-filter-wrapper.mobile .main-filter-body .activated .item .details .multi-select-dropdown .dropdown-toggle {
    max-width: unset;
}

/* .lead-action-page-card h3+p .crm-h1h2{background-color: tomato;} */

/* app-action-card.first .history-list-item, app-call-reminder.first .history-list-item{padding-top: 0px!important;}
app-action-card.last .history-list-item, app-call-reminder.last .history-list-item{padding-bottom: 0px!important;} */

app-action-card.last .history-list-item:after,
app-call-reminder.last .history-list-item:after {
    display: none;
}

app-action-card.last .history-list-item,
app-call-reminder.last .history-list-item {
    box-shadow: none !important;
}

.switch-small {
    width: 40px !important;
}

.switch .switch-text {
    font-size: 9px !important;
}

.switch .switch-text .off,
.switch .switch-text .on {
    color: #fff !important;
}

.switch .off {
    right: 15% !important;
}

.switch-small.checked small {
    left: 20px !important;
}

app-user-avatar.initials {
    background-color: #7B68EE;
    border-radius: 50%;
}

app-user-avatar[ng-reflect-size="extra-small"] {
    height: 20px !important;
}

#settingsPageComponent.is-caller *,
#settingsPageComponent.is-caller ion-item::part(native) {
    background-color: #fcfcfc;
}

#settingsPageComponent.is-caller {
    cursor: not-allowed !important;
}

#settingsPageComponent.is-caller * {
    pointer-events: none !important;
}

#settingsPageComponent.is-caller #previewToggleBtn {
    pointer-events: painted !important;
    cursor: pointer !important;
}

#settingsPageComponent.is-caller #previewToggleBtn * {
    background-color: transparent;
    pointer-events: painted !important;
    cursor: pointer !important;
}

#settingsPageComponent.is-caller .fixed-fields .value+.icon-chevron-down,
#settingsPageComponent.is-caller ion-reorder .icon-draggable,
#settingsPageComponent.is-caller ion-label .icon-edit,
#settingsPageComponent.is-caller ion-label .icon-eye,
#settingsPageComponent.is-caller ion-label .icon-eye-off,
#settingsPageComponent.is-caller .add-field-btn-wrapper {
    display: none !important;
}

/* #appWrapper{padding-bottom: 100px!important;} */

/* #appWrapper app-auth-page{display: flex; flex-direction: column; width: calc(100vw - 30px);} */
.not-editable {
    cursor: not-allowed;
}

.not-editable * {
    pointer-events: none;
}

.not-editable .activated .item .details {
    width: 100% !important;
}

.not-editable .bottom-bar,
.not-editable .item .close {
    display: none !important;
}

.not-editable .details *:not(.tag):not(.tag *) {
    background-color: #f7f7f7 !important;
}

/* .dropdown .first li.notifications-list-item{padding-top: 5px;} */
/* .dropdown .last li.notifications-list-item.last{padding-bottom: 5px;} */
/* .dropdown .last li.notifications-list-item:after{display: none;} */

.dropdown.mobile li.notifications-list-item.closable {
    max-width: calc(100% - 20px);
    margin-right: 20px;
}

.dropdown.mobile li.notifications-list-item.closable:before {
    content: "\e906";
    font-size: 15px;
    margin-right: -16px;
    opacity: 0.6;
}

#detailedReportsMainWrapper .assignees {
    margin-top: 0 !important;
}


/* Shortcut for placeholder animation before page load */
.pha {
    display: flex;
    animation-delay: 1100ms;
    animation-name: ph-loading-animation;
    animation-duration: 1s;
    opacity: .25;
    animation-timing-function: steps(10, end);
    background-color: #e4e6eb;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    outline: none;
}

.btn-crm .pha {
    background-color: rgba(228, 230, 235, 0.25);
}

.tooltip-d-none+.tooltip.show {
    display: none !important;
}

.tooltip a {
    color: #ddd;
    transition: all .2s;
}

.tooltip a:hover,
.tooltip.show a:focus,
.tooltip.show a:active {
    color: #fff;
    transition: all .2s;
}

/* .tooltip .tooltip-inner{padding: 0!important;} */

.tooltip.show {
    opacity: 0.9;
}

.tooltip.show .tooltip-inner span {
    padding: 3px 8px;
}

.tooltip.show .tooltip-inner span:empty {
    display: none;
}

.tooltip.show .arrow {
    left: calc(50% - .4rem);
    position: absolute;
    top: 100%;
}

.tooltip.show .arrow:before,
.tooltip.show[x-placement^=top] .arrow:before {
    top: 0;
    border-width: .4rem .4rem 0;
    border-top-color: #000 !important;
    position: absolute;
    content: "";
    border-color: transparent;
    border-style: solid;
}

.tooltip.show.bs-tooltip-bottom .arrow {
    top: 0;
}

.tooltip.show.bs-tooltip-bottom .arrow:before {
    bottom: 0;
    border-width: 0 .4rem .4rem;
    border-bottom-color: #000;
    margin-top: -5px;
}

.tooltip.show.bs-tooltip-right .arrow {
    top: calc(50% - .4rem);
    left: 0;
    width: .4rem;
    height: .8rem;
    margin-left: -0.4rem;
}

.tooltip.show.bs-tooltip-right .arrow::before {
    right: 0;
    border-width: .4rem .4rem .4rem 0;
    border-right-color: #000;
    border-top-color: transparent !important;
}

.h-auto {
    height: auto;
}

.h100vh {
    height: 100vh;
}

.h65vh {
    height: 65vh;
}

.h100p {
    height: 100%;
}


.h80p {
    height: 80%;
}

.h150 {
    height: 150px;
}

.h100 {
    height: 100px;
}


.h200 {
    height: 200px;
}


.h60 {
    height: 60px;
}

.h50 {
    height: 50px;
}

.h45 {
    height: 45px;
}

.h40 {
    height: 40px;
}

.h36 {
    height: 36px;
}

.h34 {
    height: 34px;
}

.h32 {
    height: 32px;
}

.h30 {
    height: 30px;
}

.mh300 {
    min-height: 300px;
}

.h26 {
    height: 26px;
}

.h24 {
    height: 24px;
}

.h22 {
    height: 22px;
}

.h20 {
    height: 20px;
}

.h18 {
    height: 18px;
}

.h16 {
    height: 16px;
}

.h15 {
    height: 15px;
}

.h14 {
    height: 14px;
}

.h12 {
    height: 12px;
}

.h10 {
    height: 10px;
}

.h0 {
    height: 0px !important;
}


.w100vw {
    width: 100vw !important
}

.w100p {
    width: 100% !important
}

.w100p-minus-27 {
    width: calc(100% - 27px);
}

.mw100p-minus-27 {
    max-width: calc(100% - 27px);
}

.w90p {
    width: 90% !important
}

.w80p {
    width: 80% !important;
}

.w85p {
    width: 85% !important;
}

.w75p {
    width: 75% !important;
}

.w70p {
    width: 70%;
}

.w60p {
    width: 60% !important
}

.w30p {
    width: 30% !important
}

.w50p {
    width: 50%;
}

.w40p {
    width: 40%;
}

.w45p {
    width: 45%;
}

.w49p {
    width: 49%;
}

.w25p {
    width: 25%;
}

.w20p {
    width: 20%;
}

.w10p {
    width: 10% !important
}

.mw100p {
    max-width: 100% !important
}

.mw80p {
    max-width: 80%;
}

.mw40p {
    max-width: 40%;
}

.w-max-content {
    width: max-content !important;
}

.w-fit-content {
    width: fit-content !important
}

.w315 {
    width: 315px;
}

.w215 {
    width: 215px;
}

.w230 {
    width: 230px;
}

.w250 {
    width: 250px;
}

.w270 {
    width: 270px !important;
}

.w190 {
    width: 190px;
}

.w175 {
    width: 175px;
}

.w170 {
    width: 170px;
}

.w160 {
    width: 160px;
}

.w150 {
    width: 150px;
}

.w100 {
    width: 100px;
}

.w80 {
    width: 80px;
}

.w75 {
    width: 75px;
}

.w70 {
    width: 70px;
}

.w62 {
    width: 62px;
}

.w60 {
    width: 60px;
}

.w59 {
    width: 59px;
}

.w55 {
    width: 55px;
}

.w50 {
    width: 50px;
}

.w44 {
    width: 44px;
}

.w40 {
    width: 40px;
}

.w36 {
    width: 36px;
}

.w32 {
    width: 32px;
}

.w30 {
    width: 30px;
}

.w300 {
    width: 300px;
}

.w26 {
    width: 26px;
}

.w24 {
    width: 24px;
}

.w22 {
    width: 22px;
}

.w20 {
    width: 20px;
}

.w18 {
    width: 18px;
}

.w16 {
    width: 16px;
}

.w15 {
    width: 15px;
}

.w14 {
    width: 14px;
}

.w12 {
    width: 12px;
}

.w10 {
    width: 10px;
}



.m2-5 {
    margin: 2px 5px;
}

.b1px {
    border: 1px solid #F4F4F4;
}

.loading-text-dots:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    content: "\2026";
    width: 0px;
    -webkit-animation: normal-ellipsis steps(4, end) 1452ms infinite;
    animation: normal-ellipsis steps(4, end) 1452ms infinite;
}

.loading-text-dots.small-text:after {
    -webkit-animation: small-ellipsis steps(4, end) 1452ms infinite;
    animation: small-ellipsis steps(4, end) 1452ms infinite;
}

@media (max-width: 425px) {
    .filter-top-bar {
        padding: 10px 10px 7px 10px !important;
    }

    .filter-top-bar label {
        margin-right: 4px !important;
    }

    .m-m-none {
        margin: none !important;
    }

    .m-d-none {
        display: none !important;
    }
}


.wiggle {
    animation: wiggle 1.5s infinite;
}

.wiggle:hover {
    animation: none;
}

.wiggle2 {
    animation: wiggle2 1.5s infinite;
}

.wiggle2:hover {
    animation: none;
}

app-manage-users #me .icon-star-on {
    display: none;
}

app-tag-field-value .tag {
    color: #333;
}

.lead-details-section .pair.heading .value-wrapper input {
    font-size: 22px;
    color: #7B68EE;
    height: 36px;
    padding: 0 6px;
    font-weight: 500;
}

/* This case is unlikely
.lead-details-section .pair.h1.special-field .value-wrapper div{font-size: 17px; min-height: 36px; margin-top: 2px;} */

app-phone-input .tel-phone-input.duplicate-warning .has-small-label .labels-wrapper label.warning-label {
    color: #8a6d3b !important;
    font-weight: 600 !important;
    margin-left: 5px;
}

app-phone-input .tel-phone-input.duplicate-warning input {
    background-color: #fcf8e3;
    box-shadow: #8a6d3b 0px 0px 0px 2px inset;
}

app-email-input .email-input.duplicate-warning .crm-fg .warning-label {
    color: #8a6d3b !important;
    font-weight: 600;
    margin-left: 50px
}

app-email-input .email-input.duplicate-warning input {
    background-color: #fcf8e3;
    box-shadow: #8a6d3b 0px 0px 0px 2px inset;
}

.tel-phone-input .iti.iti--allow-dropdown {
    width: 100%;
}

.tel-phone-input .form-wrapper * {
    padding-top: 0;
    padding-bottom: 0;
    outline: none;
}


app-phone-editable .iti {
    width: 100%;
}

app-phone-editable .iti .iti__flag-container {
    padding: 0;
    border-radius: 4px 0 0 4px;
    background-color: #f7f7f7;
}

app-phone-editable .iti .iti__flag-container .iti__selected-flag {
    border-radius: 4px 0 0 4px;
    outline: none;
    padding: 0 5px 0 12px;
    background-color: inherit;
}

app-phone-editable .invalid .iti .iti__flag-container .iti__selected-flag {
    background-color: transparent;
}

app-phone-editable [id$="_duplicateWrapper"]+.phone-input-wrapper .iti .iti__flag-container .iti__selected-flag {
    background-color: transparent;
}

app-phone-editable [id$="_duplicateWrapper"]+.phone-input-wrapper input {
    border-top-left-radius: 0;
}

app-phone-editable .iti ul.iti__country-list {
    margin-top: 5px;
    border-radius: 4px;
    box-shadow: rgb(15 15 15 / 5%) 0px 0px 0px 1px, rgb(15 15 15 / 10%) 0px 3px 6px, rgb(15 15 15 / 20%) 0px 9px 24px;
}

.lead-details-section .pair.h1 app-phone-editable .iti {
    font-size: 22px
}

.lead-details-section .pair.h1 app-phone-editable .iti .iti__country-list {
    font-size: 18px
}

.lead-details-section .pair.h1:not(.checkmark-type) .value-wrapper .iti__selected-dial-code,
.lead-details-section .pair.h1:not(.checkmark-type) .value-wrapper .iti__country-list * {
    font-weight: normal;
    color: #707070;
}

app-email-editable [id$="_duplicateWrapper"]+input {
    border-top-left-radius: 0 !important;
}

app-phone-editable .duplicate-warning,
app-email-editable .duplicate-warning:not(:empty) {
    position: absolute;
    font-weight: 600;
    bottom: 100%;
    left: 0px;
    color: #fff;
    border-radius: 4px 4px 0 0;
    max-width: 100%;
    background-color: #8a6d3b;
    padding: 1px 4px;
    font-size: 9px;
    height: 15px;
    display: flex;
    align-items: center;
    text-transform: uppercase;
}

app-phone-editable input.duplicate-warning-input,
app-email-editable input.duplicate-warning-input {
    background-color: #fcf8e3 !important;
    box-shadow: #8a6d3b 0px 0px 1px 2px inset !important;
}

/* A tag by default takes bootstrap colors to override that the following CSS is needed */
[id$="_duplicateWrapper"] a {
    color: white;
}

/* Hide dupicate redirection link css
[id^="duplicate_warning_"] .tul-on-hover-all:hover *{text-decoration: none!important;}
[id^="duplicate_warning_"] .cp{cursor: default!important;}
[id^="duplicate_warning_"] i{display: none!important;} */

.card-content-left {
    width: calc(100% - 75px);
}

.card-content-left h3,
.card-content-left p {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.card-content-left+.rhs {
    font-size: 33px;
    padding: 7px;
}

/* Autofill Inputs */
/* It doesn't look weird for the rest of the input so I'm removing it from here but for each one it does so I'm putting a specific class category on h1 */
/* input:-webkit-autofill{ -webkit-box-shadow: 0 0 0 1000px white inset !important; -webkit-text-fill-color: #333!important;} */
.h1 .value-wrapper input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: #7B68EE !important;
}

app-all-campaigns .filter-top-bar .lhs>div {
    display: none !important;
}

/* app-all-campaigns .search-filter-main-dropdown{max-height: 350px; overflow-y: auto;} */

/* Modal overflow hadler for DD and tags */
app-edit-field-modal .modal-body.of-auto,
app-create-field-modal .modal-body.of-auto {
    overflow-y: auto;
}

/* Margin x handler for app-date-time-format-picker */
app-edit-field-modal app-date-time-format-picker .field-label-wrapper,
app-create-field-modal app-date-time-format-picker .field-label-wrapper {
    margin: 0 !important;
    margin-left: 5px !important;
}

@media only screen and (max-width: 768px) {

    app-edit-field-modal app-date-time-format-picker .field-label-wrapper,
    app-create-field-modal app-date-time-format-picker .field-label-wrapper {
        margin: left 0 !important;
    }
}

.spinning:before {
    animation: spin-loader 1.1s linear infinite;
}

/* input checkmark to help focusout on Mobile*/
app-lead-field-editable-wrapper .focus-check:after {
    font-family: "telecrm-new" !important;
    content: "\e914";
    position: absolute;
    right: 0;
    height: 100%;
    display: flex;
    top: 0;
    align-items: center;
    padding: 0px 12px;
    font-size: 16px;
    cursor: pointer;
    color: #7b68ee;
    z-index: 4;
}

app-lead-field-editable-wrapper .focus-check:after:hover {
    color: #531CB3;
}

app-lead-field-editable-wrapper textarea {
    resize: none;
}

app-all-leads-filter-bar .underlay {
    position: fixed !important;
}

app-all-leads-filter-bar .conditions-count .icon-x {
    display: none !important;
}

app-action-bar {
    display: block;
    position: relative;
}

app-user-onboarding-guide {
    position: fixed;
    left: 0;
    top: calc(100vh - 60px);
    width: 100vw;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -7px 17px 0 rgb(0 0 0 / 20%);
    overflow: hidden;
    background-color: #fff;
    z-index: 10;
}

app-create-user .iti {
    width: 100%;
}

app-numpad .iti {
    display: flex !important;
    height: 47px !important;
    z-index: 10;
}

app-numpad .iti,
app-numpad .iti input {
    padding-right: 0 !important;
}

app-duplicate-leads-info-card.active .card-crm,
app-waca-template-card.active .card-crm,
app-all-labels-card.active .card-crm,
app-label-lead-card.active .card-crm,
app-trigger.active .card-crm,
app-leaderboard-teammember-card.active .card-crm,
app-all-leads-card.active .card-crm,
app-all-archived-leads-card.active .card-crm,
app-merge-lead-card.active .card-crm,
app-batch-lead-card.active .card-crm,
app-campaign-lead-card.active .card-crm,
app-lead-duplicate-card.active .card-crm,
app-outgoing-call-activity-card.active .card-crm,
app-search-card.active .card-crm,
app-leads-added-card.active .card-crm,
app-call-reminder-activities.active .card-crm,
app-call-reminder-activities-card.active .card-crm,
app-batch-added-card.active .card-crm,
app-time-for-call-reminder-activities-card.active .card-crm,
app-fb-integrated-account-card.active .card-crm,
app-edit-campaign.active .card-crm,
app-v1-campaign-lead-card.active .card-crm {
    background-color: #EBEBEB;
}

app-all-leads app-assignee-system-filter [type="checkbox"]:checked+label:after,
app-all-leads app-assignee-system-filter [type="checkbox"]:not(:checked)+label:after {
    top: unset;
}

/*lead-page css was breaking after removing it*/
app-lead {
    width: 150px;
}

app-deleted-lead {
    width: 150px;
}

app-batch,
app-deleted-lead,
app-deleted-lead .main-wrapper,
app-lead,
app-lead .main-wrapper,
app-fields,
app-fields .main-wrapper,
app-user-preferences,
app-user-preferences .main-wrapper,
app-leaderboard-user-info,
app-leaderboard-user-info .main-wrapper,
app-waca-details,
app-waca-details .main-wrapper,
app-user-preferences,
app-user-preferences .main-wrapper,
app-enterprise-preferences,
app-enterprise-preferences .main-wrapper,
app-all-leads,
app-label,
app-all-campaigns,
app-waca-campaign-dashboard,
app-waca-campaign-dashboard .main-wrapper,
app-campaign-dashboard,
app-custom-lead-status,
app-custom-lead-status .main-wrapper,
app-campaign-dashboard .main-wrapper:not(.small-main-wrapper),
app-campaign2 .main-wrapper:not(.small-main-wrapper) {
    flex-grow: 10 !important;
}

app-search,
app-campaign,
app-all-leads,
app-reports,
app-campaign2,
app-all-campaigns,
app-v1-campaign {
    display: flex;
}

.dropdown-menu.pulled-left {
    left: unset !important;
    right: 0 !important;
}

.dropdown-menu.pulled-right {
    left: 0 !important;
    right: unset !important;
}

app-filter-editor app-user-editor .dropdown-menu,
app-filter-editor app-user-selection .dropdown-menu {
    max-width: 180px !important;
}

app-user-selection .users-list.medium li {
    padding-right: 0 !important;
}

app-user-selection .users-list.medium li .count {
    justify-content: center !important;
}

app-ui-filter-operator .dropdown-menu {
    width: max-content;
}

ion-app.mobile .centered-dropdown-menu {
    position: fixed;
    left: 50%;
    transform: translateX(-50%)
}

ion-app:not(.mobile) app-all-leads .centered-dropdown-menu {
    position: fixed;
    left: 250px;
    transform: translateX(-50%);
}


/* app-fab {display: none!important;} */

/*lead-page css was breaking after removing it*/
app-lead {
    width: 150px;
}

app-deleted-lead {
    width: 150px;
}

app-template,
app-templates-dynamic-values,
app-email-template-card {
    width: 100%;
}

app-batch,
app-trigger,
app-trigger .main-wrapper,
app-deleted-lead,
app-deleted-lead .main-wrapper,
app-lead,
app-lead .main-wrapper,
app-template-card,
app-templates,
app-fb-integration,
app-fb-integration-details,
app-campaign2,
app-waca-templates,
app-send-bulk-message,
app-send-bulk-message .main-wrapper {
    flex-grow: 10 !important;
}

app-search,
app-campaign,
app-all-leads,
app-template,
app-templates,
app-template-card,
app-duplicate-leads,
app-merged-leads,
app-fb-integration,
app-waca-templates,
app-send-bulk-message {
    display: flex;
}

#campaignDashboardMainWrapper.small-main-wrapper {
    max-width: 400px !important;
}

.inner-wrapper.cards-stack {
    min-height: calc(100vh - 250px);
}

#allCampaignsWrapper .cards-stack {
    padding-bottom: 500px;
}

.small-main-wrapper {
    min-width: 400px;
    width: 400px;
    position: relative;
}

app-fab {
    position: fixed;
    right: 0;
    top: 100vh;
    margin-top: -111px;
    z-index: 111;
}

.small-main-wrapper app-fab {
    right: unset;
    left: calc(80px + 400px - 106px);
}

app-fab #menu {
    position: unset;
}

#templates-main-wrapper {
    padding-bottom: 0 !important;
}

app-filter-editor.archived .filter-cond-el {
    cursor: not-allowed;
}

app-filter-editor.archived .filter-cond-el>* {
    pointer-events: none;
}

app-filter-editor.archived .filter-cond-el .close-button,
app-filter-editor.archived app-filter-selector {
    display: none;
}

@media only screen and (min-width: 800px) and (max-width: 1280px) {
    ion-app:not(.mobile) .small-main-wrapper {
        min-width: 380px;
        width: 380px;
    }

    .small-main-wrapper app-fab {
        right: unset;
        left: calc(80px + 380px - 106px);
    }
}

@media only screen and (min-width: 1280px) and (max-width: 1600px) {
    .unknown-lead-text-wrapper * {
        font-size: 12px !important;
    }
}

@media only screen and (min-width: 1600px) {
    ion-app:not(.mobile) .small-main-wrapper {
        min-width: 480px;
        width: 480px;
    }

    #campaignDashboardMainWrapper.small-main-wrapper {
        max-width: 480px !important;
    }

    .small-main-wrapper app-fab {
        right: unset;
        left: calc(80px + 480px - 106px);
    }
}

@media (max-width: 540px) {
    app-reports .assignees .dropdown-menu.title-menu.pulled-right {
        left: -70px !important;
    }

    .small-main-wrapper app-fab {
        right: unset;
        left: calc(380px - 106px);
    }

    .unknown-lead-text-wrapper * {
        font-size: 12px !important;
    }
}

.small-main-wrapper .main-filter-wrapper.desktop-view {
    position: unset !important;
}

.small-main-wrapper .main-filter-wrapper .search-filter-main-dropdown {
    top: 100%;
    left: 5px;
    margin-left: -15px;
    margin-top: 0;
}

.shadown-el {
    box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease 0s;
}

.shadown-el:hover {
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease 0s;
}

.card-body.mobile app-license-user-card .license-tag {
    margin-left: unset;
    margin-right: unset;
}

#allCampaignsWrapper app-user-editor .dropdown-menu {
    max-width: 300px !important;
}

app-bulk-edit-leads {
    width: 100%;
}

/* app-bulk-edit-leads .value-wrapper:not(:focus){background-color: #f7f7f7;} */
app-bulk-edit-leads .users-list-ul {
    margin-left: 0 !important;
}

app-bulk-edit-leads app-bulk-lead-edit .value-wrapper {
    cursor: pointer;
    background-color: #f7f7f7;
}

app-bulk-edit-leads app-bulk-lead-edit .value-wrapper {
    cursor: pointer;
    background-color: #f7f7f7;
}

app-filter-editor,
app-all-leads-filter-bar,
app-filter-editor,
app-ui-saved-filter-editor {
    width: 100%;
}

.filter-editor-wrapper-legend.view-only-mode .filter .icon-chevron-down,
.filter-editor-wrapper-legend.view-only-mode .filter .close-button,
.filter-editor-wrapper-legend.view-only-mode app-filter-selector {
    display: none !important;
}

.filter-editor-wrapper-legend.view-only-mode .filter {
    cursor: not-allowed;
}

.filter-editor-wrapper-legend.view-only-mode .filter * {
    pointer-events: none;
}

app-all-leads-filter-bar .filter * {
    color: #37352F;
}

app-all-campaigns app-create-campaign app-ui-edit-filter-editor {
    position: relative;
    background-color: #fff;
    padding-bottom: 30px;
    border: 1px solid #f6f6f6;
}

app-all-campaigns app-create-campaign app-ui-edit-filter-editor .filter-editor-wrapper-legend {
    margin-top: 5px !important;
}

app-all-campaigns app-create-campaign .filter-editor-wrapper-legend .crm-legend-head {
    display: none !important;
}

app-campaign-dashboard app-ui-edit-filter-editor {
    width: calc(100% - 5px);
}

app-campaign-dashboard .small-main-wrapper .main-filter-wrapper .search-filter-main-dropdown {
    width: unset
}

app-background-job app-ui-edit-filter-editor .filter-editor-wrapper-legend .crm-legend-head,
app-campaign-dashboard app-ui-edit-filter-editor .filter-editor-wrapper-legend .crm-legend-head {
    display: none !important;
}

app-campaign-dashboard app-ui-edit-filter-editor .filter-editor-wrapper-legend {
    margin-top: 5px !important;
}

app-campaign-dashboard .main-filter-wrapper:not(.mobile) .search-filter-main-dropdown {
    left: 0 !important;
}

app-campaign-dashboard app-restart-campaign .main-filter-wrapper:not(.mobile) .search-filter-main-dropdown {
    left: -400px !important;
}

app-campaign-dashboard app-campaign2 .mfb-component__button--main {
    left: 400px;
}

app-lead-condition-wrapper app-ui-edit-filter-editor .filter-editor-wrapper-legend .crm-legend-head {
    display: none !important;
}

/* app-lead-condition-if-else-summary app-ui-edit-filter-editor .filter-editor-wrapper-legend .crm-legend-head{display: none!important;}
app-lead-condition-if-else-summary app-ui-edit-filter-editor .filter-editor-wrapper-legend {border: 0px!important} */

app-lead-condition-wrapper app-ui-edit-filter-editor app-filter-components-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* app-create-campaign-filter-bar  */

app-view-assignees .plus-count.last {
    padding-right: 0 !important;
}

app-view-assignees .plus-count.last .count {
    justify-content: center !important;
}

app-view-assignees .plus-count.last .count {
    justify-content: center !important;
}

/* .history-list app-action-card.notification-active .history-list-item{background-color: rgba(123,104,238,0.2);}
.history-list app-action-card.notification-active .history-list-item:before{content: ''; height: 11px; width: 11px; border-radius: 50%; background-color: #7B68EE; border: 1px solid #fff; position: absolute; left: 14px; margin-left: 18px; top: 8px; z-index: 2; display: none;}*/
/* .history-list app-action-card.notification-active .history-list-item{border-left: 1px solid #531CB3;border-right: 1px solid #7B68EE;} */
.history-list app-action-card.notification-active .history-list-item *:not(.icon-telecrm) {
    font-weight: bold !important;
    color: #000 !important;
}

.history-list app-action-card.notification-active.last-unviewed-action .history-list-item {
    box-shadow: 0 2px 4px rgb(0 0 0 / 25%);
    border-radius: 0 0 4px 4px;
    margin-bottom: 3px;
}

app-edit-fields app-lead-field-editable-wrapper {
    flex-grow: 10;
    position: relative;
}

app-edit-fields .crm-fg {
    border: 1px solid #eee !important;
    border-radius: 4px !important;
    margin-bottom: 20px !important;
}

app-edit-fields .crm-fg .form-wrapper input:focus,
app-edit-fields .crm-fg .form-wrapper textarea:focus,
app-edit-fields .crm-fg .form-wrapper .input-btn:focus {
    box-shadow: none;
}

app-bulk-edit-card .value-wrapper.status app-lead-status .dropdown {
    margin-left: 0;
}

app-templates .share-menu {
    position: absolute;
    right: 0;
    z-index: 100;
    margin-top: 20px;
    border-color: #999;
}

app-templates .share-menu .share-bg {
    background-color: #eee;
    border-radius: 0 0 4px 4px;
}

app-templates .share-menu ::-webkit-scrollbar-track {
    background-color: #ddd;
}

app-templates ul.templates-list li {
    padding-right: 40px !important;
}

app-templates ul.templates-list li .icon-share {
    position: absolute;
    right: 10px;
    background-color: #fff !important;
    border-radius: 4px !important;
    box-shadow: 1px 2px 5px rgb(0 0 0 / 22%);
    color: #707070;
    transition: all 0.3s ease;
}

app-templates ul.templates-list li .icon-share:hover {
    transform: scale(1.15);
    transition: all 0.3s ease;
}

app-lead-distribution-modal .modal .list-item .lhs .app-user-avatar-wrapper img {
    box-shadow: 0 4px 8px rgb(16 30 54 / 20%);
}

.bs-close-btn {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
    position: absolute;
    right: 0;
    padding: 20px;
    margin-right: 10px;
    margin-top: -5px;
}

.bs-close-btn:hover {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    filter: alpha(opacity=50);
    opacity: .5;
}

app-fb-integration app-lead-distributor .share-menu {
    width: 100% !important;
    margin-top: 0 !important;
}

app-fb-integration app-lead-distributor .share-menu .close-search {
    display: none !important;
}

app-fb-integration input.error+.error-msg {
    display: unset;
}

.btn-small {
    height: 30px;
    padding-left: 6px;
    padding-right: 6px;
}

/* app-add-fb-lead-form-subscription app-options-dropdown:first{} */

app-subscribed-lead-form-card.active .card-crm {
    animation: activate 1.5s 2;
}

app-subscribed-lead-form-card.active:hover .card-crm {
    animation: none;
}


/* app-subscribed-lead-form-card.active{animation: wiggle 1.5s 2;}
app-subscribed-lead-form-card.active:hover {animation: none;} */
app-fb-integrated-account-card.active .card-crm.inactive {
    border: 2px solid #A40D40
}

app-user-avatar .extra-small .teamMemberInitials {
    font-size: 11px !important;
    height: 20px !important;
    width: 20px !important;
    line-height: 20px;
}

app-user-avatar .tiny .teamMemberInitials {
    font-size: 10px !important;
    height: 17px !important;
    width: 17px !important;
    line-height: 17px;
}

/* .sidenav.mobile li.menu-inactive .submenu li{animation: contract-submenu 0.3s ease-in forwards;}
@keyframes contract-submenu {
  0% {  height: 38px; opacity: 1; }
  to  { opacity: 0; height:0}
} */

.switch-campaign-view-btn {
    background-color: rgb(232, 230, 235) !important;
    padding: 5px 8px;
    font-size: 15px;
}

.switch-campaign-view-btn.mobile {
    background-color: transparent !important;
    padding: 1px 4px;
    font-size: 15px;
    font-weight: 400 !important;
    text-decoration: underline;
}

.switch-campaign-view-btn.mobile span {
    display: none !important;
}

ion-app.mobile .main-wrapper#allCampaignsWrapper>.top-bar,
ion-app.mobile app-campaign-dashboard .top-bar {
    max-width: calc(100% - 110px);
    justify-content: flex-start !important;
    align-items: center !important;
}

ion-app.mobile .main-wrapper#allCampaignsWrapper>.top-bar .lhs,
ion-app.mobile app-campaign-dashboard .top-bar .lhs {
    flex-grow: unset;
    margin-right: 10px;
}

ion-app:not(.mobile) .main-wrapper#allCampaignsWrapper>.top-bar {
    width: 100% !important;
    max-width: unset;
}

ion-app.mobile app-all-campaigns app-create-campaign app-ui-edit-filter-editor {
    left: 0;
    width: 100%;
}

ion-app.mobile app-all-campaigns app-create-campaign app-ui-edit-filter-editor>.filter-editor-wrapper-legend {
    margin-top: 0 !important;
}

ion-app.mobile app-filter-bar .main-filter-wrapper {
    position: unset;
}

.custom-btn {
    z-index: 1;
    font-size: 14px;
    height: 25px;
    background-color: white;
    border-radius: 25px;
    border: 1px solid;
    padding: 1px 8px;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    display: flex;
    align-items: center;
}

.custom-btn .inner {
    display: flex;
    align-items: center;
}

.custom-btn.red-button {
    color: rgb(180, 0, 0);
    border-color: rgb(180, 0, 0);
}

.custom-btn.red-button:hover {
    background-color: rgb(180, 0, 0);
    color: #fff;
}

.custom-btn.crm-button {
    color: rgb(124, 104, 238);
    border-color: rgb(124, 104, 238);
}

.custom-btn.crm-button:hover {
    background-color: rgb(124, 104, 238);
    color: #fff;
}

app-bulk-upload .iti__flag-container {
    margin-left: 20px;
}

app-bulk-upload .iti__flag-container+input {
    padding-left: 82px;
    width: 82px;
    padding-right: 0;
    background-color: #F4F4F4;
}

app-map-custom-field .iti__flag-container+input {
    padding-left: 82px;
    width: 82px;
    padding-right: 0;
    background-color: #F4F4F4;
}

ul .list-item-container li.notifications-list-item {
    border-radius: 6px;
    transition: 0.5s;
}

ul .list-item-container:nth-child(2n) li.notifications-list-item {
    background-color: #f8f7f7;
}

ul .list-item-container:nth-child(2n) li.notifications-list-item:hover {
    background-color: #e7e7e7;
}

ul .list-item-container:nth-child(2n+1) li.notifications-list-item {
    background-color: white;
}

ul .list-item-container:nth-child(2n+1) li.notifications-list-item:hover {
    background-color: #e7e7e7;
}

.overlay-layer-container {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 15;
    background-color: #f7f7f7;
    width: 40% !important;
    min-width: 90vw;
    box-shadow: rgb(0 0 0 / 24%) -1px 0px 8px;
    transition: 0.5s;
    border-radius: 6px 0 0 6px;
    padding-left: 10px;
    overflow: auto;
    animation: translateLeftAnime 0.5s linear;
}

@keyframes translateLeftAnime {
    0% {
        right: -100%;
    }

    100% {
        right: 0;
    }
}

.max-height-500 {
    max-height: 500px;
}

.slideshow-container {
    max-height: 600px;

    height: calc(100vh - 40px) !important;
    width: 100vw;
    position: fixed;
    bottom: -100vh;
    left: 0;
    z-index: 15;
    background-color: #f7f7f7;
    box-shadow: rgb(0 0 0 / 24%) -1px 0px 8px;
    transition: 0.3s;
    border-radius: 6px 6px 0 0;
    padding-top: 10px;
    overflow: auto;
    animation: translateTopAnime 0.3s linear;
}

@keyframes translateTopAnime {
    0% {
        bottom: -200vh;
    }

    100% {
        bottom: -100vh;
    }
}

.us-text {
    user-select: text;
}

abbr {
    text-decoration: none !important;
    cursor: auto !important;
}

.excel-color {
    color: #2B8654 !important;
}

.indiamart-color {
    color: #501614 !important;
}

.fb-color {
    color: #3578e5 !important;
}

.housing-color {
    color: #5726d4 !important;
}

.text-grey {
    color: grey;
}

.dropdown-menu-top {
    top: auto !important;
    bottom: 100% !important;
}

.dropdown-menu-right {
    right: auto !important;
    left: 100% !important;
}

.ws-nowrap {
    white-space: nowrap;
}

.ws-initial {
    white-space: initial;
}

.overflow-visible {
    overflow: visible !important;
}

.d-block {
    display: block !important;
}

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

.pe-none {
    pointer-events: none;
}

.text-danger {
    color: #EE4545
}

.overflow-x-auto {
    overflow-x: auto !important
}

.overflow-y-auto {
    overflow-y: auto !important
}

.border-bottom-0 {
    border-bottom: none !important;
}

.float-right {
    float: right;
}

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

.scrollbar-none::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-none {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.crm-carousel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crm-carousel button.prev,
.crm-carousel button.next {
    position: absolute;
    height: 100%;
    width: 0;
    z-index: 1;
}

.crm-carousel button.prev i,
.crm-carousel button.next i {
    width: 30px;
    height: 30px;
    aspect-ratio: 1/1;
    background-color: white;
    border-radius: 25px;
    box-shadow: 0 0 8px grey;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crm-carousel button.prev {
    left: 7px !important;
}

.crm-carousel button.next {
    right: 37px !important;
}

.crm-carousel .crm-carousel-dots {
    position: absolute;
    display: flex;
    z-index: 1;
    left: 0;
    height: 10px;
    top: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crm-carousel .crm-carousel-element-cover .crm-carousel-element {
    transition: transform 300ms ease-in-out;
}

.crm-carousel .crm-carousel-element-cover::-webkit-scrollbar {
    display: none;
}

.crm-carousel .crm-carousel-element-cover {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.crm-carousel .crm-carousel-element-cover {
    display: flex;
    overflow: hidden;
}

.crm-carousel .crm-carousel-dots {
    display: flex;
}

.crm-carousel .crm-carousel-dots .dot {
    height: 8px;
    width: 8px;
    background-color: #8080806e;
    margin: 1px;
    border-radius: 25px;
    transition: all 300ms ease-in-out;
}

.crm-carousel .crm-carousel-dots .active {
    width: 20px;
    background-color: mediumslateblue;
}

ion-app .desktop-container {
    height: calc(100vh - var(--topbar-height)) !important;
}

.desktop-container {
    height: calc(100vh - var(--topbar-height)) !important;
}

.d-flex h3 {
    font-size: 22px;
}