.plan-index {
    margin-top: 20px;
}
@media (min-width: 768px) {
    .plan-index {
        margin-top: 0;
        width: 22%;
    }
}

.dash-setting {
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 1.5rem;
}
@media (min-width: 992px) {
    .dash-setting {
        width: 33%;
        border-bottom: none;
    }
}

.stats-card {
    width: 45%;
    margin-left: 2.5%;
    margin-right: 2.5%;
}

.payment-currency-hide, .payment-currency-bank-hide {
    display: none;
}

.plan-stats {
    border-bottom: 1px solid #dee2e6;
}

@media (max-width: 768px) {
    .plan-stats-section {
        font-size: 17px;
    }
}

@media (min-width: 992px) {
    .plan-stats {
        border-bottom: none;
    }
}

@media (min-width: 992px) {
    .last-border-stat {
        border-right: 2px solid #dee2e6;
    }
}



div.tooltip-icon {
    height: 1rem;
    width: 1rem;
    background-repeat:no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-info-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z'/%3E%3C/svg%3E");
}

.user-icon {
    height: 32px;
    width: 32px;
    background-repeat:no-repeat;
    background-size: contain;
    background-color: #2b2f32;
}

.image-with-shadow-left {
    position: relative;
}


.image-with-shadow-left > img {
    margin-top: auto;
    margin-bottom: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    max-width: 90%
}

.image-with-shadow-left::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%; /* Adjust the width as per your requirement */
    height: 100%;
    background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 150%);
    box-shadow: -10px 0 10px -10px rgba(255, 255, 255, 1); /* Adjust the shadow values as per your requirement */
    z-index: 1; /* Make sure the shadow is above the image */
}


.image-with-shadow-right {
    position: relative;
}

.image-with-shadow-right > img {
    margin-top: auto;
    margin-bottom: auto;
    position: absolute;
    top: 0;
    max-width: 90%;
    bottom: 0;
}

.image-with-shadow-right::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Adjust the width as per your requirement */
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 150%);
    box-shadow: -10px 0 10px -10px rgba(255, 255, 255, 1); /* Adjust the shadow values as per your requirement */
    z-index: 1; /* Make sure the shadow is above the image */
}

/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
    margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
    bottom: 3rem;
    z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
    height: 32rem;
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
    margin-bottom: 1.5rem;
    text-align: center;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
    margin-right: .75rem;
    margin-left: .75rem;
}
/* rtl:end:ignore */


/* Featurettes
------------------------- */

.featurette-divider {
    margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
/* rtl:begin:remove */
.featurette-heading {
    letter-spacing: -.05rem;
}

/* rtl:end:remove */

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
    /* Bump up size of carousel content */
    .carousel-caption p {
        margin-bottom: 1.25rem;
        font-size: 1.25rem;
        line-height: 1.4;
    }

    .featurette-heading {
        font-size: 50px;
    }
}

@media (min-width: 62em) {
    .featurette-heading {
        margin-top: 5rem;
    }
}

.owl-nav {
    display: none; }

.owl-dots {
    text-align: center;
    position: relative;
    bottom: -30px;
}
.owl-dots .owl-dot {
    display: inline-block;
}
.owl-dots .owl-dot span {
    display: inline-block;
    width: 15px;
    height: 3px;
    border-radius: 0px;
    background: #cccccc;
    -webkit-transition: 0.3s all cubic-bezier(0.32, 0.71, 0.53, 0.53);
    -o-transition: 0.3s all cubic-bezier(0.32, 0.71, 0.53, 0.53);
    transition: 0.3s all cubic-bezier(0.32, 0.71, 0.53, 0.53);
    margin: 3px;
}
.owl-dots .owl-dot.active span {
    background: #007bff;
}
.owl-dots .owl-dot:active, .owl-2-style .owl-dots .owl-dot:focus {
    outline: none;
}

.owl-carousel .monitoring a {
    text-decoration: none;
    color: #212529;
}

.otp-code input {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    float: left;
    width: 100%;
    height: 50px;
    line-height: 48px;
    text-align: center;
    font-size: 2em;
    color: #181819;
    border: 2px solid gray;
    border-radius: 2px 2px 0 0;
    transition: background-color .3s, color .3s, opacity .3s;
    cursor: default;
    user-select: none;
    margin: 0;
    padding: 0;
}

.otp-code input:disabled{
    background-color: #e9ecef;
}

.icon-chat {
    height: 3rem;
    width: 3rem;
    background-repeat:no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 3.33782C15.5291 2.48697 13.8214 2 12 2C6.47715 2 2 6.47715 2 12C2 13.5997 2.37562 15.1116 3.04346 16.4525C3.22094 16.8088 3.28001 17.2161 3.17712 17.6006L2.58151 19.8267C2.32295 20.793 3.20701 21.677 4.17335 21.4185L6.39939 20.8229C6.78393 20.72 7.19121 20.7791 7.54753 20.9565C8.88837 21.6244 10.4003 22 12 22C17.5228 22 22 17.5228 22 12C22 10.1786 21.513 8.47087 20.6622 7' stroke='%231C274C' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M8 12H8.009M11.991 12H12M15.991 12H16' stroke='%231C274C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


.plan-index p {
    margin-bottom: 0.2rem;
}

.plan-index .card-title {
    margin-bottom: 15px;
}

.plan-index .plan-button {
    margin-top: 15px;
}