.e-tooltip-wrap {
    border-radius: 8px;

    &.e-popup {
        background-color: white;
        border: 1px solid var(--clr-input-brdr, #979e9f);
        padding: 0.25rem 0.75rem;
        box-shadow: 0 2px 6px 0 rgba(102, 106, 107, 0.25);
    }

    .e-tip-content {
        color: var(--clr-blk, #112333);
        font-weight: 400;
        font-size: 0.8125rem; /* 13px */
        line-height: 1.5;
        letter-spacing: 0.02em;
        
        strong {
            font-weight: 600;
        }
    }

    .e-arrow-tip-outer {
        /* To customize the arrow tip at bottom */
        &.e-tip-bottom {
            border-left-width: 9px;
            border-right-width: 7px;
            border-top-width: 7px;
            border-top-color: var(--clr-input-brdr, #979e9f);
        }

        /* To customize the arrow tip at top */
        &.e-tip-top {
            border-left-width: 9px;
            border-right-width: 8px;
            border-bottom-width: 10px;
            border-bottom-color: var(--clr-input-brdr, #979e9f);
        }

        /* To customize the arrow tip at left */
        &.e-tip-left {
            border-top-width: 7px;
            border-bottom-width: 9px;
            border-right-width: 7px;
            border-right-color: var(--clr-input-brdr, #979e9f);
        }

        /* To customize the arrow tip at right */
        &.e-tip-right {
            border-top-width: 9px;
            border-bottom-width: 7px;
            border-left-width: 7px;
            border-left-color: var(--clr-input-brdr, #979e9f);
        }
    }

    .e-arrow-tip-inner {
        &.e-tip-top,
        &.e-tip-bottom,
        &.e-tip-left,
        &.e-tip-right {
            color: white;
            font-size: 17px;
        }
    }

    .e-arrow-tip-inner.e-tip-left {
        left: -4px !important;
        top: -1px !important;
    }
}

.e-arrow-tip {
    &.e-tip-top {
        top: -8px !important;
    }
    &.e-tip-left {
        left: -7px !important
    }
}