:root, [data-bs-theme=light] {
    --vz-gold: #d99a29;
    --vz-gold-primary: #00bbb4;
    --vz-gold-text-primary: #013443;
    --vz-gold-primary-emphasis: #03485c;
    --vz-gold-primary-rgb: 19,197,107;
    --vz-gold-grey: #bababa;
    --vz-border-color: #d99a29;
    --vz-light-500-bg-subtle: #f5f5f5;
    --vz-border-radius: 1rem;
    --vz-border-radius: 0.25rem;
    --vz-gold-bg-subtle: #fff4e0;
    --vz-gold-bg-nav: #033A37;
}

[data-bs-theme=dark] {
    --vz-gold: #d99a29;
    --vz-gold-primary: #00bbb4;
    --vz-gold-grey: #bababa;
    --vz-gold-text-primary: #fff;
}
.bg-gold-subtle {
    background: var(--vz-gold-bg-subtle);
}
.text-gold {
    color: var(--vz-gold) !important;
}
.text-gold-primary {
    color: var(--vz-gold-primary) !important
}
.bg-gold {
    background: var(--vz-gold)
}
.bg-gold-primary {
    background: var(--vz-gold-primary)
}
.badge-gold {
    background-color: #d99a29;
}
.bg-light-gold-subtle {
    background-color: var(--vz-light-500-bg-subtle);
}
.border-color-primary {
    border-color: var(--vz-gold-primary);
}
.btn-gold {
    --vz-btn-bg: var(--vz-gold-primary);
    --vz-btn-border-color: var(--vz-gold-primary);
    --vz-btn-hover-bg: var(--vz-gold-primary-emphasis);
    --vz-btn-hover-border-color: var(--vz-gold-primary-emphasis);
    --vz-btn-focus-shadow-rgb: var(--vz-gold-primary-rgb);
    --vz-btn-active-bg: var(--vz-gold-primary-emphasis);
    --vz-btn-active-border-color: var(--vz-gold-primary-emphasis);
    --vz-btn-color: #fff;
    --vz-btn-hover-color: #fff;
    --vz-btn-focus-shadow-rgb: 54,206,129;
    --vz-btn-active-color: #fff;
    --vz-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --vz-btn-disabled-color: #fff;
}


.isl-gold {
}

/*.isl-gold  .border {
    border: var(--vz-border-width) var(--vz-border-style) var(--vz-border-color) !important;
}*/

.gold-titleBig {
    color: var(--vz-gold-text-primary);
    line-height: 1.6;
    font-size: 30px;
    letter-spacing: -2px;
    margin-bottom: 1rem;
}
.gold-subTitle {
    color: var(--vz-gold-text-primary);
    font-size: 22px;
    line-height: 1.3;
    font-weight: 500;
}
.gold-para {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
}
.isl-gold .rounded {
    border-radius: var(--vz-border-radius) !important;
}
.isl-gold--invest {
    color: var(--vz-gold-text-primary);
    position: relative;
}
.gold-pos--badge {
    position: absolute;
    top: -20px;
    left: 42.3%;
}

.isl-gold--tabs .border-bottom {
    border-bottom: var(--vz-border-width) var(--vz-border-style) var(--vz-border-color) !important;
    border-color: var(--vz-gold-text-primary) !important;
}
.isl-gold--tabs .border-3 {
    border-width: 3px !important;
}

.isl-gold--tabs a {
    padding: 5px 20px;
}
.isl-gold--tabs a:hover {
    color: var(--vz-gold-primary);
    text-decoration: none;
}

.custom-tabs {}
.custom-tabs .nav-tabs-custom {
    border-bottom: 1px solid var(--vz-gray-400);
    max-width: 96%;
    margin: 0 auto;
    border: 1px solid var(--vz-gray-400);
    padding: 3px 5px;
    border-radius: 6px;
}
.custom-tabs .nav-tabs-custom .nav-item {
    width: 50%;
    text-align: center;
    display: flex;
    justify-content: center;
    padding: 0px;
    margin: 0px;
}
.custom-tabs .nav-tabs-custom .nav-item .nav-link::after {
    display: none;
}
.custom-tabs .nav-tabs-custom .nav-item .nav-link {
    font-size: 18px;
    text-transform: uppercase;
    color: var(--vz-gold-primary);
    font-weight: 600;
    width: 100%;
    border-radius: 6px;
}
.custom-tabs .nav-tabs-custom .nav-item .nav-link.active {
    background: var(--vz-gold-primary);
    color: var(--vz-light-500-bg-subtle)
}

    .custom-tabs .animation-nav li a.active,
    .custom-tabs .animation-nav li a.active::before {
        background-color: var(--vz-gold-primary) !important;
    }
    .custom-tabs .animation-nav li a::before {
        display: none;
    }
    /*.custom-tabs .animation-nav li a:hover {
        background-color: transparent !important;
    }*/
    .custom-tabs .custom-tabs .animation-nav li a:hover::before {
        display: none;
    }

    .isl-gold--calculations {
        margin-bottom: 15px;
    }
        .isl-gold--calculations .btn {
            width: 100%;
            font-size: 15px;
            font-weight: 600;
            padding: 0.4rem 1rem !important;
        }
    .isl-gold--calculations .btn.btn-gold {
        background: var(--vz-gold);
        border-color: var(--vz-gold);
    }
        .isl-gold--calculations .btn.btn-light {
            background: var(--vz-gray-600);
            border-color: var(--vz-gray-600);
            color: var(--vz-white)
        }

.isl-gold--link p { margin: 0px;text-align: center;}
.isl-gold--link p a { 
    margin: 0px;
    text-align: center;
    font-size: 18px;
    color: var(--vz-gold-primary);
    font-weight: 600;
    text-transform: uppercase;
}
    .isl-gold--link p img {
        border: 1px solid var(--vz-gray-400);
        padding: 10px 15px;
        border-radius: 6px;
        width: 130px;
        margin-bottom: 10px;
    }

.custom-tabs.custom-tabs1 .nav-tabs-custom {
    border-bottom: 0px solid var(--vz-gray-400);
    max-width: 96%;
    margin: 0 auto;
    border: 0px solid var(--vz-gray-400);
    padding: 0px;
    border-radius: 0px;
}

.custom-tabs.custom-tabs1 .nav-tabs-custom .nav-item {
    width: fit-content;
    text-align: center;
    display: flex;
    justify-content: center;
    padding: 0px;
    margin: 0px;
}

        .custom-tabs .nav-tabs-custom .nav-item .nav-link::after {
            display: none;
        }

.custom-tabs.custom-tabs1 .nav-tabs-custom .nav-item .nav-link {
   padding: 4px 25px !important;
   color: var(--vz-gold)
}

            .custom-tabs .nav-tabs-custom .nav-item .nav-link.active {
                background: var(--vz-gold-primary);
                color: var(--vz-light-500-bg-subtle)
            }

.custom-tabs .animation-nav li a.active,
.custom-tabs .animation-nav li a.active::before {
    background-color: var(--vz-gold-primary) !important;
}

.custom-tabs .animation-nav li a::before {
    display: none;
}
/*.custom-tabs .animation-nav li a:hover {
        background-color: transparent !important;
    }*/
.custom-tabs .custom-tabs .animation-nav li a:hover::before {
    display: none;
}
.custom-tabs1 .table th {
    font-size: 17px;
    color: var(--vz-gold-primary);
    border-bottom: 1px solid var(--vz-gold);
}
.custom-tabs1 .table td {
    font-size: 15px;
    vertical-align: middle;
    /*color: var(--vz-gold-primary);
    border-bottom: 1px solid var(--vz-gold);*/
}
.text-underline {
    text-decoration: underline;
}

.form-floating > .form-control, .form-floating > .form-control-plaintext, .form-floating > .form-select {
    height: calc(3rem + calc(var(--vz-border-width) * 2));
    min-height: calc(3rem + calc(var(--vz-border-width) * 2));
    line-height: 1.25;
}

.border-gold {
    border: 1px solid var(--vz-gold);
}
.isl-gold--vault a {
    text-align: center;
}

.isl-gold--vault a:hover {
    text-decoration: none;
}

.isl-gold--vault a.active {
    /*background: #ffedbb;*/
    
}
    .isl-gold--vault a.active:after {
        height: 3px;
        display: block;
        width: 100px;
        background: var(--vz-gold-primary);
        border-right: 1px white;
        content: '';
        margin: 10px auto 0px;
    }
.isl-gold--vault .m-4 {
    margin: 1.5rem 0vw 1rem !important;
}

.gold-pos--badge {
    position: absolute;
    top: -24px;
    left: 37%;
}
.fs-30 {
    font-size: 30px;
}
.fs-26 {
    font-size: 26px;
}
.isl-gold--invest .img-display {
    overflow: hidden;
}

.isl-gold--invest .img-showcase {
    display: flex;
    width: 100%;
    transition: all 0.5s ease;
}

    .isl-gold--invest .img-showcase img {
        min-width: 100%;
    }

.isl-gold--invest .img-select {
    display: flex;
}
.fw-500 {
    font-weight: 500 !important;
}

.isl-gold--invest .img-item {
    margin: 0.3rem;
    border: 1px solid #ccc;
    width: 25%;
    height: 110px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.isl-gold--invest .img-item:first-child {
    margin-left: 0rem;
}
    .isl-gold--invest .img-item:last-child {
        margin-right: 0rem;
    }

.isl-gold--invest .img-item:nth-child(1),
.isl-gold--invest .img-item:nth-child(2),
.isl-gold--invest .img-item:nth-child(3) {
    margin-right: 0;
}

.isl-gold--invest .img-item:hover {
    opacity: 0.8;
}
.isl-gold--invest .img-item img {
    width: 100%;
    display: block;
}

.isl-gold--invest .img-item img {
    height: 100px;
}

.isl-gold--features .img-fluid {
    height: 55px;
}

.isl-gold--features .avatar-lg {
    height: 5rem;
    width: 5rem;
}

.isl-gold--works {
    margin: 0px -4px;
    width: 101%;
    max-width: 100.6%;
    margin-top: 30px;
}

.input-step {
    padding: 0px;
    border: 0px;
    background: transparent;
    height: 30px;
}
    .input-step button {
        width: 1.4em;
        font-weight: 300;
        height: 100%;
        line-height: .1em;
        font-size: 1.4em;
        padding: 0.2em !important;
        background: var(--vz-gold);
        color: var(--vz-light-500-bg-subtle);
        border: none;
        border-radius: var(--vz-border-radius);
    }

    .input-step input {
        width: 4em;
        height: 100%;
        text-align: center;
        border: 0;
        background: 0 0;
        color: var(--vz-body-color);
        border-radius: var(--vz-border-radius);
        background: #fff;
        margin: 0px 10px;
    }

.bg-custom.input-step input {
    background: #ccc;
}
.form-check-right {
    padding-left: 0;
    display: inline-block;
    text-align: right;
}
    .form-check-right .form-check-input {
        float: right;
        margin-left: 0.5rem;
        margin-right: -1.6em;
    }
.isl-gold .form-check-input {
    --vz-form-check-bg: var(--vz-input-bg-custom);
    width: 1.5em;
    height: 1.5em;
}

.step-arrow-nav .nav .nav-link.active {
    background-color: rgb(217 154 41 / 100%);
    color: #ffffff;
    -webkit-box-shadow: none;
    box-shadow: none;
}
    .step-arrow-nav .nav .nav-link.active::before {
        border-left-color: rgb(217 154 41 / 100%);
    }

.step-arrow-nav .nav .nav-link span {
    background: var(--vz-gold-primary);
    padding: 6px 12px;
    border-radius: 40px;
    color: #fff;
    margin-right: 7px;
}
.step-arrow-nav .nav .nav-link.active span {
    background-color: orange;
    padding: 6px 12px;
    border-radius: 40px;
    color: #fff;
}
.align-center {
    vertical-align: middle !important;
}


















.slide-right, .slide-left {
    width: 100%;
}
/***** Slide Right *****/
.slide-right {
    animation: 1s slide-right;
}

@keyframes slide-right {
    from {
        margin-left: -100%;
    }

    to {
        margin-left: 0%;
    }
}
/***** Slide Left *****/
.slide-left {
    animation: 1s slide-left;
}

@keyframes slide-left {
    from {
        margin-left: 5%;
    }

    to {
        margin-left: 0%;
    }
}

.line-height-2 {
    line-height: 1.4 !important;
}

.text-silver {
    color: #C0C0C0 !important
}

.btn-gold {
    background-color: var(--vz-gold-primary) !important;
    border-color: var(--vz-gold-primary) !important;
    color: #fff !important;
}

.checkout_form {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    transition-delay: 10s;
    /* box-shadow: inset 0px 10px 7px -7px blue; */
    box-shadow: inset 0px 11px 6px -6px #01aea540;
}

.new-checkout_form {
    box-shadow: none;
    min-height: 1px;
    position: relative;
    left: auto;
    top: auto;
    padding: 30px 30px 30px 30px;
    z-index: 1;
}

.checkout_form {
    background: #f7f7f7;
    width: 100%;
    margin: 0 auto;
    padding: 30px;
    padding-bottom: 10px;
    padding-top: 10px;
    border-radius: 10px;
}

ul.nostyle {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}
    ul.nostyle .row {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .new-checkout_form .nostyle {
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 0px;
    }

    .new-checkout_form .nostyle li {
        padding: 5px 0px;
        color: #333;
    }

        .new-checkout_form .nostyle li:first-child {
            padding: 0 0 5px 0px;
        }

        .new-checkout_form .nostyle li span {
            font-style: normal;
            font-weight: 500;
            font-size: 15px;
            line-height: 21px;
            color: #666666;
            width: 50%;
        }
            .new-checkout_form .nostyle li span.pull-right {
                text-align: right;
            }

            .divider {
                margin-top: 50px;
                margin-bottom: 50px;
                background-image: -moz-linear-gradient(180deg, #ffffff 0%, #e3e3e3 49%, #ffffff 100%);
                background-image: -webkit-linear-gradient(180deg, #ffffff 0%, #e3e3e3 49%, #ffffff 100%);
                background-image: -ms-linear-gradient(180deg, #ffffff 0%, #e3e3e3 49%, #ffffff 100%);
                width: 95%;
                height: 1px;
            }

.new-checkout_form .divider {
    border-top: 1px dashed #DDDDDD;
    margin: 10px 0;
    width: 100%;
}

.savings_divider {
    position: relative;
    margin: 10px 0 15px;
}

    .savings_divider h3 {
        
        font-style: normal;
        font-weight: 600;
        font-size: 20px;
        line-height: 26px;
        color: #BF9F41;
        background: #f7f7f7;
        display: flex;
        position: relative;
        z-index: 1;
        text-align: center;
        margin: 0 auto;
        justify-content: center;
        align-items: center;
        width: 150px;
    }

    .savings_divider:after {
        content: '';
        height: 1px;
        border-top: 1px dashed #D2C060;
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
    }

.savings-zone {
    background: linear-gradient(102.24deg, rgba(255, 221, 121, 0.25) 2.93%, rgba(255, 221, 121, 0.25) 2.94%, rgba(255, 239, 192, 0.25) 98.95%);
    border-radius: 25px;
}
.savings-zone-pad {
    padding: 15px 30px;
}

.savings-zone h4 {
    
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 21px;
    color: #BD8C2B;
    margin-bottom: 15px;
}
.savings-zone ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .savings-zone ul li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }
        .savings-zone ul li span {
            font-style: normal;
            font-weight: 500;
            font-size: 15px;
            line-height: 18px;
            color: #3A3B3A;
        }

.savings-zone .amount_saved {
    background: rgba(255, 255, 255, 0.52);
    border: 0.5px dashed #D2C061;
    border-radius: 0px 0px 25px 25px;
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
    .savings-zone .amount_saved span {
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 18px;
        color: #BD8C2B;
    }
.banner-storage-partner h1 {
    font-weight: 600;
    font-size: 18px;
    color: #083863;
    color: #d99a29;
}

.banner-storage-partner .secured-by-images {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.banner-storage-partner .image-container {
    margin-top: 1rem;
}
    .banner-storage-partner .secured-by-images .image-container:first-child {
        margin-right: 2rem;
    }
.image-container img {
    max-width: 100%;
}
.banner-storage-partner .image-container .vistra {
    width: 120px;
}
.sip_buy_gold_item {
    display: flex;
    align-items: center;
    position: relative;
    width: 98%;
    background: #ffffff;
    border: 1px solid #e8ebea;
    box-shadow: 0px 4px 8px rgba(95, 108, 108, 0.07);
    border-radius: 10px;
    padding: 15px 40px;
    cursor: pointer;
}

.earned_gold_info, .active_sip_wrapper, .total_bal_wrapper, .new_user_banner, .sip_buy_gold_item {
    transition: all 0.25s ease-in-out;
}
    .sip_buy_gold_item .item_info {
        margin-left: 35px;
    }
.bold_black_text {
    font-weight: 600;
    font-size: 18px;
    line-height: 23px;
    letter-spacing: 0.5px;
    color: #111111;
    margin: 5px 0;
    text-align: left;
}
.sip_buy_gold_item .item_info span {
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #666666;
}
.go_to_icon {
    position: absolute;
    right: 20px;
    top: 45%;
    transform: translateY(-45%);
}

.accordion-button {
    font-size: 1.1rem;
}
.accordion .accordion-body {
    font-size: 1rem;
    line-height: 1.8;
    color: #666;
    text-align:left;
}

.accordion-button:not(.collapsed) {
    color: #d99a29;
    background-color: #fff8ea;
    font-weight: 600;
}

.accordion-item {
    margin-bottom: 15px;
}


.banner-section {
    background: url('https://pic.islamicly.com/web/gold/SIP-banner-backgroung-web.svg') center no-repeat;
    background-size: cover;
}
    .banner-section .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .banner-section .left-section {
        margin-right: 80px;
    }
        .banner-section .left-section h1 {
            margin: 80px 0 10px 0;
            color: #fff;
            font-size: 34px;
            line-height: 44px;
        }
.container .highlight {
    color: #c9a775;
    background: transparent;
    margin: 0px;
    padding: 0px;
}
.banner-section .left-section p {
    margin-bottom: 30px;
    color: #fff;
    font-size: 22px;
    line-height: 31px;
}
.banner-section .left-section ul {
    padding-left: 0;
    margin-bottom: 30px;
    list-style: none;
}
    .banner-section .left-section ul li {
        display: flex;
        align-items: flex-start;
    }
    .banner-section .left-section ul p {
        margin: 0 0 25px 15px;
        color: #fff;
        font-size: 16px;
        line-height: 21px;
    }
.container .bold {
    font-weight: 700;
}
.banner-section .left-section .saving-sip-button-container {
    margin-bottom: 30px;
}
    .banner-section .left-section .saving-sip-button-container button {
        width: 100%;
        padding: 15px;
        border: none;
        border-radius: 24px;
        box-shadow: none;
        background: #00bbb4;
        color: #f6f6f6;
        font-size: 16px;
        font-weight: 600;
        line-height: 21px;
        text-align: center;
    }
.banner-section .left-section .enrolled-user-container p {
    font-size: 20px;
    margin-bottom: 40px;
}

    .banner-section .left-section .enrolled-user-container p span {
        font-size: 32px;
    }
.banner-section .right-section {
    align-self: flex-end;
}
    .banner-section .right-section .sip-banner-img {
        margin-bottom: -50px;
    }
        .banner-section .right-section .sip-banner-img .mobile-img {
            display: none;
        }
.gold-sip-calculator-container {
    margin-top: 80px;
}
    .gold-sip-calculator-container .container {
        padding: 0 60px;
        background: url('https://pic.islamicly.com/web/gold/SIP-calculator-web.svg') center no-repeat; background-size: cover;
    }
    .gold-sip-calculator-container .section-heading {
        padding: 40px 0 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
        .gold-sip-calculator-container .section-heading h2 {
            margin: 0;
            color: #fff;
            font-size: 40px;
        }
            .gold-sip-calculator-container .section-heading h2 span {
                display: block;
                font-size: 24px;
            }

    .gold-sip-calculator-container .graph-number-container, .gold-sip-calculator-container .total-number-container {
        margin: 30px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .gold-sip-calculator-container .graph-number-container {
        align-items: flex-end;
    }
        .gold-sip-calculator-container .graph-number-container > div {
            flex: 1;
        }
    .gold-sip-calculator-container .gold-appreciation {
        margin-bottom: 40px;
    }
.compound_desk {
    display: block;
}
.graph-number-container h3 {
    font-size: 16px !important;
}
.gold-sip-calculator-container .gold-appreciation h3 {
    padding-bottom: 12px;
    border-bottom: 1px solid #fff;
    margin: 0;
    color: #fff;
}

.graph-number-container h3 {
    font-size: 16px !important;
}

.gold-sip-calculator-container .slider h3 {
    margin: 0;
    color: #fff;
    font-size: 24px;
}

.gold-sip-calculator-container .submit {
    padding-bottom: 25px;
    text-align: center;
}
    .gold-sip-calculator-container .submit button {
        width: 60%;
        padding: 15px;
        border: none;
        border-radius: 24px;
        margin: 0 auto 10px;
        box-shadow: none;
        display: block;
        background: #00bbb4;
        color: #f6f6f6;
        font-size: 16px;
        line-height: 20px;
    }
.advantages-of-sip-container h4 {
    margin: 70px auto 40px;
    color: #226e6a;
    font-size: 24px;
}
.advantages-of-sip-container .highlight {
    color: var(--vz-gold);
    background: transparent;
    margin: 0px;
    padding: 0px;
}
.advantages-of-sip-container .start-sip {
    margin-bottom: 40px;
}
    .advantages-of-sip-container .start-sip button {
        width: 60%;
        padding: 15px;
        border: none;
        border-radius: 24px;
        box-shadow: none;
        background: #00bbb4;
        color: #f6f6f6;
        font-size: 16px;
        line-height: 20px;
    }
#rangeValue {
    position: relative;
    display: block;
    text-align: center;
    font-size: 6em;
    color: #999;
    font-weight: 400;
}

.range {
    width: 400px;
    height: 15px;
    -webkit-appearance: none;
    background: #111;
    outline: none;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 1);
}

    .range::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: #00fd0a;
        cursor: pointer;
        border: 4px solid #333;
        box-shadow: -407px 0 0 400px #00fd0a;
    }
.customRange {
    position: absolute;
}

.relationship-status-output {
    /*display: block;
    text-align: center;
    font-size: 17px;
    font-family: sans-serif;
    font-weight: 600;
    margin: 0 0 2rem 0;
    line-height: 1;
    color: #fff;*/
}

.rangeslider__fill {
    background: #00bbb4;
}

.rangeslider--horizontal {
    margin: 20px 0px;
    width: 98%;
    height: 10px;
}
.rangeslider__handle {
    border: 1px solid #ffbf00;
    width: 20px;
    height: 20px;
    background: linear-gradient(90deg, #ffbf00 0%, #ffd447 100%) !important;
}
.rangeslider--horizontal .rangeslider__handle {
    top: -5px;
    touch-action: pan-y;
    -ms-touch-action: pan-y;
}
.rangeslider__handle:after {
    width: 10px;
    height: 10px;
}
.nav-tabs-custom.card-header-tabs {
    margin-top: -1rem;
    display: flex;
    justify-content: center;
}
.nav-tabs-custom .nav-item {
    position: relative;
    max-width: fit-content;
}
.nav-tabs-custom .nav-item {
    position: relative;
    max-width: fit-content;
    background: #d99a29;
    background: #e7e7e7;
    background: #dbfdfa;
    border-radius: 0px;
    color: #fff;
    padding: 0px 0px;
    border-right: 1px solid #77fff3;
}

.nav-tabs-custom.nav-gold .nav-item {
    position: relative;
    max-width: fit-content;
    background: #d99a29;
    background: #e7e7e7;
    background: #dbfdfa;
    background: #ffedcc;
    background: #fff3dc;
    border-radius: 0px;
    color: #fff;
    padding: 0px 0px;
    border-right: 1px solid #d99a29;
}

    .nav-tabs-custom .nav-item:first-child {
        border-radius: 20px 0px 0px 20px;
        /*border-right: 1px solid #ccc;*/
    }
/*.nav-tabs-custom .nav-item:not(:first-child) {
    border-radius: 0px 20px 20px 0px;
}*/
    .nav-tabs-custom .nav-item:last-child {
        border-radius: 0px 20px 20px 0px;
        border-right: 0px solid #ccc;
    }
.card-header-tabs .nav-link.active {
    background-color: transparent !important;
}
.nav-tabs-custom.card-header-tabs .nav-link {
    color: #666;
}
.nav-tabs-custom.card-header-tabs .nav-link {
    padding: 0px;
    width: 100%;
    padding: 0.7rem 2rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.card-header-tabs .nav-link .active, .card-header-tabs .nav-link.active .inactive {
    display: none;
}
    .card-header-tabs .nav-link.active .active, .card-header-tabs .nav-link .inactive {
        display: inline-block;
    }
.card-header-tabs .nav-item a {
    font-size: 15px;
    color: #00bbb4 !important;
    transition: all 1s ease;
}

.nav-tabs-custom.card-header-tabs.nav-gold .nav-link {
    display: flex;
    align-items: center;
    font-size: 16px;
}
.nav-tabs-custom.card-header-tabs.nav-gold .nav-link img {
    margin-right: 8px;
}

.card-header-tabs.nav-gold .nav-link.active {
    background-color: #d99a29 !important;
    color: #fff !important;
}
.card-header-tabs.nav-gold .nav-item a {
    color: #666 !important;
}
.nav-tabs-custom .nav-item .nav-link::after {
    display: none;
}
.card-header-tabs .nav-link.active {
    background-color: #00bbb4 !important;
    color: #fff !important;
}
.nav-tabs-custom .nav-item:first-child .nav-link {
    border-radius: 20px 0px 0px 20px;
}
.nav-tabs-custom .nav-item:last-child .nav-link {
    border-radius: 0px 20px 20px 0px;
}
.sip-wrapper {
    width: 100%;
    background-color: #F6FBFF;
    border-radius: 8px;
    border: 0.5px solid #F5F5F5;
    margin: 15px 0px;
    height: 120px;
    color: #333333;
    box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.02);
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
    .sip-wrapper img {
        width: 15%;
        float: left;
        margin-right: 20px;
    }
    .sip-wrapper p {
        width: 65%;
        float: left;
       /* margin: 6% auto;
        line-height: 20px;*/
        font-size: 1.2rem;
        line-height: 1.2;
        margin: 0px;
    }

.sip-wrapper-2 {
    padding: 7% 6%;
}
.sip-wrapper.sip-wrapper-2 p {
    width: 100%;
    font-size: 1.2rem;
    padding: 0px;
}
.sip-wrapper p img {
    float: unset;
}
.isl-gold--invest i {
    cursor: pointer;
}
.p-relative {
    position: relative;
}
.sit_back_section {
    display: flex;
    align-items: center;
    position: relative;
}
.sit_back_section {
    background: #FBF6F3;
    border: 0.5px solid #FBF6F3;
    box-shadow: 0px 2px 8px 0px rgba(234, 234, 234, 0.15);
    border-radius: 6px;
    padding: 24px;
    margin-top: 22px;
    justify-content: space-between;
}
.sit_back_left {
    width: 75%;
}
    .sit_back_left p {
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #666666;
        opacity: 0.85;
    }
        .sit_back_left p span {
            color: #00958E;
        }
.sit_back_right {
    position: absolute;
    bottom: 0;
    right: 0;
}
.sit_back_left a {
    display: inline-block;
    background: #FFFFFF;
    border-radius: 6px;
    border: 0;
    outline: none;
    margin-top: 20px;
    padding: 10px 29px;
    box-shadow: 0 1px 6px #0000004a;
    color: #00bbb4;
}
.configuration_main_wrapper {
    background: #FFFFFF;
    border-radius: 8px;
    margin-top: 24px;
    padding: 0;
    position: relative;
}
.middle_content {
    margin-top: 24px;
    padding: 15px 24px;
    border: 0.5px solid #EBEBEB;
    position: relative;
    border-radius: 8px 8px 0px 0px;
}
.config_title {
    font-weight: 600;
    font-size: 16px;
    line-height: 150%;
    color: #333333;
    margin: 15px 0;
}
.planName_wrapper input {
    width: 95%;
    border: 1px solid #E0E0E0;
    margin-left: 15px;
    padding: 12px 15px;
    border-radius: 8px;
    outline: none;
    font-size: 14px;
    line-height: normal;
}
.avatar {
    position: relative;
    margin-left: 0.3rem;
    z-index: 999;
}
.config_title img {
    margin-left: 0;
}
.lease_amnt, .minimum_yield_wrapper {
    position: relative;
    margin-left: 15px;
    width: 95%;
}

.lease_amnt .input-group, .minimum_yield_wrapper .input-group {
    background: #F7F7F7;
    border-radius: 8px;
    border: 1px solid #E0E0E0;
}
.lease_amnt .input-group-addon, .minimum_yield_wrapper .input-group-addon {
    background: #fff;
    border-radius: 0 8px 8px 0;
    border: 0;
    border-left: 1px solid #E0E0E0;
    font-weight: 500;
    font-size: 16px;
    line-height: 21px;
    color: #333333;
}
/*.in_rupee .input-group-addon {
    border-left: 0;
    border-right: 1px solid #E0E0E0;
    border-radius: 8px 0 0 8px;
}*/
/*input, textarea {
    background-image: none !important;
}*/
/*.lease_amnt .input-group > input, .minimum_yield_wrapper .input-group > input {
    flex: 1 0 auto;
    width: 100%;
    height: 100%;
    border: 0;
    outline: none;
    border-radius: 0 8px 8px 0;
    padding: 12px 15px;
    font-weight: 500;
    font-size: 14px;
    line-height: normal;
    display: flex;
    align-items: center;
    color: #242436;
}*/
.lease_tenure_container {
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    margin: 15px 0px 0px;
    width: 100%;
}
    .lease_tenure_container .input_label {
        width: 200px;
        padding: 10px 24px;
        height: 40px;
        position: relative;
        /* width: 100%; */
    }
        .lease_tenure_container .input_label:not(:last-child) {
            margin-right: 24px;
        }
input[type=radio], input[type=checkbox] {
    margin: 4px 0 0;
    margin-top: 1px \9;
    line-height: normal;
}
.lease_tenure_container .input_label label, .lease_tenure_container .input_label input {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #FFFFFF;
    border: 1px solid #CECECE;
    border-radius: 33px;
}
.lease_tenure_container .input_label label {
    cursor: pointer;
    z-index: 90;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    color: #00BBB4;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lease_tenure_container .input_label label, .lease_tenure_container .input_label input {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #FFFFFF;
    border: 1px solid #CECECE;
    border-radius: 33px;
}
.lease_tenure_container .input_label input {
    opacity: 0;
}
    .lease_tenure_container .input_label input[type="radio"]:checked + label {
        background: #00BBB4;
        color: #fff;
    }
.popular_choice_wrapper {
    position: absolute;
    width: 100%;
    left: 0;
    top: 18px;
    border-radius: 0px 0px 4px 4px;
    background: linear-gradient(180deg, rgba(255, 239, 192, 0.00) 0%, #FFEFC0 100%);
    padding: 12px 8px 2px;
    text-align: center;
}
    .popular_choice_wrapper span {
        font-size: 10px;
        line-height: normal;
        color: #F16100;
    }
.lease_amt_container {
    width: 80%;
    margin: 0 0 0 0px;
    display: flex;
    justify-content: space-between;
}
.entire_bal, .upto_bal {
    height: 40px;
}
.upto_bal {
    width: 35%;
}
.entire_bal {
    width: 40%;
}
    .entire_bal.active, .upto_bal.active {
        background: #00BBB4;
        border-radius: 8px;
        /* height: 52px; */
        /* margin: 15px 0; */
    }
.upto_bal.active {
    height: auto;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
    height: 42px;
    margin-right: 10px;
}
.lease_amt_container label {
    height: 100%;
    display: block;
    position: relative;
    padding-left: 45px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: flex;
    align-items: center;
}
    .lease_amt_container label .lbl_txt {
        font-weight: 400;
        font-size: 14px;
        line-height: normal;
        color: #333333;
        opacity: 0.85;
    }
.entire_bal.active .lbl_txt, .upto_bal.active .lbl_txt {
    color: #FFFFFF;
}
.lease_amt_container label input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 16px;
    margin-top: 6px;
    width: 16px;
    background-color: #eee;
}
.checkmark {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 15px;
    height: 20px;
    width: 20px;
    background-color: transparent;
    border-radius: 50%;
    border: 1px solid #00BBB4;
    margin-top: 0;
}
.lease_amt_container label input:checked ~ .checkmark {
    background-color: transparent;
    border: 1px solid #fff;
    z-index: 1;
}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.lease_amt_container label .checkmark:after {
    top: 17%;
    left: 17%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: white;
}
.lease_amt_container label input:checked ~ .checkmark:after {
    display: block;
}

.lease_amnt, .minimum_yield_wrapper {
    position: relative;
    margin-left: 15px;
    width: 95%;
}
.minimum_yield_wrapper {
    width: 95%;
    margin-bottom: 20px;
}
    .lease_amnt .input-group, .minimum_yield_wrapper .input-group {
        background: #F7F7F7;
        border-radius: 8px;
        border: 1px solid #E0E0E0;
    }
    .minimum_yield_wrapper .input-group {
        position: relative;
    }
.minimal.form-control {
    border-radius: 8px !important;
    background-color: white;
}

.aft:after {
    content: "";
    background: #E0E0E0;
    display: block;
    width: 1px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 10%;
    z-index: 5;
}
.toast-btn, .save_config_btn, .toast-btn-inside-disable {
    width: 100%;
    margin: 10px 0 15px;
    padding: 10px 40px;
    outline: none;
    border: none;
    background: #00BBB4;
    border-radius: 33px;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #fff;
    cursor: pointer;
    transition: 0.3s;
}
.lease_amt_container {
    width: 80%;
    margin: 0 0 0 15px;
    display: flex;
    justify-content: space-between;
}
    .lease_amt_container.details_page {
        width: 100%;
        flex-direction: column;
        margin: 0;
    }
.txt_if_mandates_exits {
    color: #333;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
}
.entire_bal.active, .upto_bal.active {
    background: #00BBB4;
    border-radius: 8px;
    /* height: 52px; */
    /* margin: 15px 0; */
}
.lease_amt_container.details_page .entire_bal, .lease_amt_container.details_page .upto_bal {
    width: 100%;
    height: auto;
}
.lease_amt_container.details_page .label_wrapper {
    margin: 8px 0;
    padding: 15px 0;
    border-radius: 8px;
    border: 0.5px solid rgba(234, 234, 234, 0.94);
    position: relative;
    z-index: 1;
}
.lease_amt_container.details_page label {
    height: auto !important;
}
.lease_amt_container.details_page label {
    align-items: flex-start;
    flex-direction: column;
}
.entire_bal.active .lbl_txt, .upto_bal.active .lbl_txt {
    color: #FFFFFF;
}

.lbl_desc1 {
    color: #666;
    font-weight: 400;
    font-size: 12px;
    line-height: 140%;
    margin-top: 5px;
}
.entire_bal.active .lbl_desc1, .upto_bal.active .lbl_desc1 {
    color: #EBEBEB;
}
.details_page .checkmark {
    top: 12px;
    transform: translateY(-12px);
}

.desktop_consent {
    display: block;
}
.autoLeaseConsent {
    margin-top: 25px;
}
    .autoLeaseConsent input[type=checkbox] {
        position: relative;
        border: 1px solid #00BBB4;
        border-radius: 4px;
        background: none;
        cursor: pointer;
        line-height: 0;
        margin: 0 0.6em 0 0;
        outline: 0;
        padding: 0 !important;
        vertical-align: text-top;
        height: 20px;
        width: 20px;
        -webkit-appearance: none;
        opacity: .5;
    }

        .autoLeaseConsent input[type=checkbox]:before {
            content: '';
            position: absolute;
            right: 50%;
            top: 50%;
            width: 4px;
            height: 10px;
            border: solid #FFF;
            border-width: 0 2px 2px 0;
            margin: -1px -1px 0 -1px;
            transform: rotate(45deg) translate(-50%, -50%);
            z-index: 2;
        }
    .autoLeaseConsent .saveText {
        font-weight: 500;
        font-size: 11px;
        line-height: normal;
        color: #666666;
        opacity: 0.85;
        letter-spacing: 0.055px;
    }
        .autoLeaseConsent .saveText a {
            font-size: 12px;
            color: #00bbb4;
        }

    .autoLeaseConsent input[type=checkbox]:checked {
        background-color: #00BBB4;
        opacity: 1;
    }


.details_page-top p {
    margin-bottom: 10px;
    font-size: 14px;
}
.details_page-top p img {
    margin-right: 7px;
}
.details_page-top h4 {
    font-size: 16px;
    margin-bottom: 30px;
    margin-left: 25px;
}
.active_sip_total_bal_wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.active_sip_wrapper, .total_bal_wrapper {
    height: 138px;
    width: 98%;
}
.active_sip_row1, .active_sip_row2, .total_bal_row1, .total_bal_row2 {
    position: relative;
    padding: 15px 30px;
}
.new_locker_balance_wrapper .golden_text {
    font-weight: 700;
    font-size: 20px;
    line-height: 20px;
    letter-spacing: 0.5px;
    color: #bfa209;
    margin: 5px 0;
}
.active_sip_row2 span, .total_bal_row2 span {
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    color: #f5a623;
}
.active_sip_row2 .warning_icon {
    width: 16px;
    margin-right: 5px;
    margin-top: -2px;
}
.total_bal_row2 span {
    color: #3ec79e;
}
.active_sip_wrapper, .active_sip_row1, .total_bal_wrapper, .total_bal_row1 {
    background: #ffffff;
    border: 1px solid #e8ebea;
    box-shadow: 0px 4px 8px rgba(95, 108, 108, 0.07);
    border-radius: 10px;
}
.active_sip_total_bal_wrapper .bold_black_text {
    text-align: center;
}
.active_sip_total_bal_wrapper .golden_text {
    font-weight: 700;
    font-size: 20px;
    line-height: 20px;
    letter-spacing: 0.5px;
    color: #bfa209;
    margin: 5px 0;
}
.isl-gold--purchase .page-heading {
    margin: 40px 0 30px;
    color: #333;
    
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.mark1 {
    background-image: url('https://pic.islamicly.com/web/gold/maskgroup.svg'), linear-gradient(to right, #00998e, #00bbb4);
    border-radius: 10px;
    margin-bottom: 24px;
    max-height: 100%;
    height: 191px;
    /* box-shadow: 5px 5px 5px 5px rgba(0,0,0,.075); */
    box-shadow: 0 5px 20px -15px rgb(0, 0, 0, 0.3);
    padding: 15px 30px;
    background-position: right;
    background-size: cover;
    /* margin-bottom: 50px; */
}

.mark1 {
    height: auto;
    padding: 24px;
}
.gold-accumulation-container {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
}
    .gold-accumulation-container > div {
        flex: 1;
    }
    .gold-accumulation-container .heading {
        margin-bottom: 10px;
    }
        .gold-accumulation-container .heading span {
            margin-left: 8px;
            color: #fff;
            
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
        }
    .gold-accumulation-container .active-sip {
        margin-left: 60px;
    }
    .gold-accumulation-container .value span {
        color: #fff;
        
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }
.separator {
    margin: 16px auto;
    text-align: center;
}
.next-goal-border {
    padding: 2px;
    border-radius: 8px;
    margin-bottom: 32px;
    background: linear-gradient(45deg, #c9a775, #8f5c12, #c9a775);
}
.next-goal-container {
    padding: 24px;
    border-radius: 8px;
    background: #02333a url('https://pic.islamicly.com/web/gold/sip-goal.svg') no-repeat 98% 100%;
    background: #02333a url('https://pic.islamicly.com/web/gold/SIP.png') no-repeat 98% 100%;
}
    .next-goal-container h3 {
        margin: 0 0 8px 0;
        color: #fff;
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }
    .next-goal-container p {
        width: 45%;
        margin-bottom: 24px;
        color: #fff;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }
    .next-goal-container a {
        padding: 10px 12px;
        border-radius: 6px;
        display: inline-block;
        background: #fff;
        color: #00958e;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 16px;
    }

.sips-filter-container {
    margin-bottom: 24px;
}
    .sips-filter-container .filter-sip {
        padding-bottom: 16px;
        border-bottom: 1px solid #d9e0e7;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .sips-filter-container h4 {
        margin: 0;
        color: #333;
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: 28px;
        letter-spacing: 0.1px;
    }
    .sips-filter-container .filter {
        display: flex;
        align-items: center;
        cursor: pointer;
    }
        .sips-filter-container .filter span {
            margin-left: 8px;
            display: inline-block;
            color: #333;
            text-align: right;
            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            line-height: 22.4px;
            letter-spacing: 0.08px;
        }

.sip-container {
    border-radius: 8px;
    margin-bottom: 17px;
    border: 0.5px solid #eaeaea;
    background: #fff;
    box-shadow: 0px 2px 8px 0px rgba(234, 234, 234, 0.15);
}
    .sip-container .sip-details-section {
        padding: 16px;
    }
        .sip-container .sip-details-section .top-section {
            padding-bottom: 16px;
            border-bottom: 0.5px solid #eaeaea;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

            .sip-container .sip-details-section .top-section h5 {
                margin: 0;
                color: #333;
                font-size: 16px;
                font-style: normal;
                font-weight: 600;
                line-height: normal;
                letter-spacing: 0.08px;
            }
            .sip-container .sip-details-section .top-section p {
                margin: 0;
                color: #999;
                cursor: pointer;
                font-size: 12px;
                font-style: normal;
                font-weight: 500;
                line-height: normal;
            }

                .sip-container .sip-details-section .top-section p img {
                    margin-left: 10px;
                    display: inline-block;
                }
        .sip-container .sip-details-section .bottom-section {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

            .sip-container .sip-details-section .bottom-section > div {
                text-align: center;
            }
            .sip-container .sip-details-section .bottom-section .header {
                display: block;
                color: #666;
                text-align: center;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 21px;
            }
            .sip-container .sip-details-section .bottom-section .value {
                color: #d2c060;
                text-align: center;
                font-size: 16px;
                font-style: normal;
                font-weight: 700;
                line-height: normal;
            }
            .sip-container .sip-details-section .bottom-section .sip-amount .value {
                color: #00bbb4;
            }

    .sip-container .progress-section .progress-status-bar {
        height: 16px;
        width: 100%;
    }
        .sip-container .progress-section .progress-status-bar .status-bar {
            height: 100%;
            position: relative;
            background: linear-gradient(283deg, #ffefc0 0%, #f0fafa 100%);
            clip-path: polygon(0 51%, 100% 0, 100% 100%, 0% 100%);
            -webkit-clip-path: polygon(0 51%, 100% 0, 100% 100%, 0% 100%);
        }

    .sip-container .progress-section .status-bar .instalment {
        position: absolute;
        top: -7px;
        right: 3px;
    }
    .sip-container .progress-section .status {
        padding: 12px 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #f0fafa;
    }
        .sip-container .progress-section .status .status-label span {
            color: #00958e;
            font-size: 12px;
            font-style: normal;
            font-weight: 700;
            line-height: 16.8px;
            letter-spacing: 0.06px;
        }
        .sip-container .progress-section .status .date span {
            color: #666;
            text-align: right;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 16.8px;
            letter-spacing: 0.06px;
        }
    .sip-container .progress-section .progress-status-bar .status-bar span {
        font-size: 10px;
    }
    .sip-container .progress-section .status-bar .instalment {
        position: absolute;
        top: -2px;
        right: 3px;
    }


.header_info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0.5px solid #EBEBEB;
    border-radius: 8px 8px 0px 0px;
    padding: 15px 24px;
}
    .header_info .config_title {
        font-size: 16px;
        line-height: normal;
        margin: 0;
        font-weight: 600;
        color: #333333;
    }
.auto-lease-details-partial {
    border-radius: 0 0 8px 8px;
}
    .auto-lease-details-partial ul {
        margin: 0;
        padding: 20px 30px;
        list-style: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 0.5px solid #EBEBEB;
        flex-wrap: wrap;
        border-radius: 0 0 8px 8px;
    }
        .auto-lease-details-partial ul li {
            text-align: center;
            width: calc(100% / 3);
            margin: 10px 0;
        }
.balance_info li.width_fiftyPer {
    width: 50% !important;
}
.auto-lease-details-partial.about_investment .balance_info li {
    /* width: 50%; */
    width: auto;
    margin: 0;
}
.balance_info li:nth-child(1) p:nth-child(1) {
    color: #999;
    font-size: 14px;
    font-weight: 600;
    line-height: 150%;
    margin-left: 5px;
}
.balance_info li:nth-child(1) p:nth-child(2), #timelineModal .modal_balance_info li:nth-child(1) p {
    color: #333;
    opacity: 0.85;
    font-size: 18px;
    font-weight: 600;
    line-height: normal;
}
.header_info h5, .header_info h5 a {
    color: #00BBB4;
    font-family: Sarabun;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    text-decoration-line: underline;
    cursor: pointer;
    margin: 0;
}

.auto-lease-details-partial ul li h4 {
    color: #999;
    font-size: 12px;
    font-weight: 600;
    line-height: 150%;
    display: flex;
    align-items: center;
    justify-content: center;
}
    .auto-lease-details-partial ul li h4 img {
        width: 16px;
        margin-right: 8px;
    }
.avatar {
    position: relative;
    margin-left: 0.3rem;
    z-index: 999;
}
.auto-lease-details-partial ul li h6 {
    color: #333;
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
}
.timeline_and_status_container {
    background: #fff;
}
.sip_timelines_viewmore {
    border-left: 1px solid #EBEBEB;
    border-right: 1px solid #EBEBEB;
    padding-bottom: 0px;
}
.sip_timelines_wrapper {
    padding: 24px;
    padding-bottom: 0;
}
.circle {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
}
    .circle .flexed-container {
        display: flex;
        align-items: center;
    }
    .circle .outer-circle {
        padding: 1px;
        border: 1px dashed #00bbb4;
        border-radius: 100%;
        display: flex;
        align-self: flex-start;
    }
.outer-circle.brown {
    border: 1px dashed #B1B1B1;
}
.circle .index {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    display: flex;
    position: relative;
    z-index: 2;
    align-self: center;
    color: #fff;
    font-size: 10px;
    line-height: normal;
    text-align: center;
    align-items: center;
    justify-content: center;
}
.outer-circle.brown .index {
    background: #B1B1B1;
}
.circle .index::after {
    content: "";
    height: 30px;
    width: 0;
    border: 1px dotted #B1B1B1;
    margin-left: -1px;
    display: block;
    position: absolute;
    z-index: 1;
    top: 20px;
    left: 50%;
}
.payout-data {
    margin-bottom: 0;
    margin-left: 15px;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    color: #333;
    text-align: left;
}
    .payout-data .amnt {
        font-weight: 600;
    }
.outer-circle.orange {
    border: 1px dashed #F5A623;
}
    .outer-circle.orange .index {
        background: #F5A623;
    }
.outer-circle.no_circle_border {
    border: none !important;
}

.circle .no_circle_border .index::after {
   display: none;
}
.sip_status_wrapper {
    border-radius: 0px 0px 8px 8px;
    background: #F0FAFA;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 15px 24px;
}
    .sip_status_wrapper .left p {
        color: #333;
        font-size: 14px;
        font-weight: 500;
        line-height: normal;
        margin: 0;
    }
    .sip_status_wrapper .left span {
        color: #999;
        font-size: 10px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }
    .sip_status_wrapper .right p {
        text-align: right;
        font-size: 14px;
        font-weight: 600;
        line-height: normal;
        margin: 0;
    }
    .sip_status_wrapper .right .orangeTxt {
        color: #F16100;
    }
    .sip_status_wrapper .left span span {
        color: #2DCFC9;
        text-decoration: underline;
        cursor: pointer;
    }
.gold_purity_info {
    height: 49px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px 0 5px;
    background: linear-gradient(180deg, #FFDD79 0%, #FFEFC0 100%);
    border-radius: 0px 0px;
    position: absolute;
    right: 0;
    top: 0;
}
    .gold_purity_info span {
        font-weight: 600;
        font-size: 14px;
        line-height: 140%;
        color: #BD8C2B;
    }

.video-container div, .video-container iframe {
    border-radius: 10px;
    overflow: hidden;
}
/*.sg-carousel-video {
    height: 100%;
    width: 100%;
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
}*/
.border-left-0 {
    border-left-width: 0px !important;
}
.border-left-0, .border-right-0 {
    border-right-width: 0px !important;
}
.nav-pills--gold {}
    .nav-pills--gold .nav-link:focus, .nav-pills--gold .nav-link:hover {
        color: var(--vz-gold);
    }
    .nav-pills--gold.nav-pills .nav-link.active {
        background-color: var(--vz-gold);
        color: #fff;
    }
    .nav-pills--gold.nav-pills .nav-link {
        color: #666;
    }

.pin-input {
    background: #f7f7f7;
    color: #a6a0a0;
    font: 600 16px / 20px Sarabun;
    border-radius: 5px;
    height: 44px;
    width: fit-content;
    padding: 10px 10px;
}
    .pin-input img {
        margin-right: 1%;
        height: 19px;
    }
    .pin-input input[type="tel"] {
        background: transparent;
        border: 0px;
        outline: none;
        width: 56%;
        font-weight: normal;
    }
.disabled-pin {
    opacity: 0.5;
    cursor: not-allowed !important;
}
    .pin-input span {
        color: #00bbb4;
        cursor: pointer;
        font-weight: normal;
    }
.delivery-banner.desktop {
    padding-left: 0% !important;
}
.delivery-banner.desktop {
    background: url('https://pic.islamicly.com/web/gold/delivery-banner-bg.png') no-repeat;
    background-size: 100% 100%;
    height: 120px;
    width: 100%;
    color: #083863;
    font: 700 14px / 18.2px Sarabun Light;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding-left: 3%;
    text-align: center;
    margin: 3% 0;
}
    .delivery-banner.desktop div:first-child {
        margin-right: 4%;
    }
    .delivery-banner.desktop div img {
        display: block;
        height: 34px;
        margin: auto;
        margin-bottom: 4%;
    }
    .delivery-banner.desktop div p {
        font: 800 24px / 31.2px Sarabun;
        color: #083863;
        float: left;
    }

.savings-zone ul li span {
    position: relative;
}

    /*.savings-zone ul li span::before {
        top: 50%;*/ /*tweak this to adjust the vertical position if it's off a bit due to your font family */
        /*background: red;*/ /*this is the color of the line*/
        /*opacity: .7;
        content: '';
        width: 110%;
        position: absolute;
        height: .1em;
        border-radius: .1em;
        left: -5%;
        white-space: nowrap;
        display: block;
        transform: rotate(-15deg);
    }*/

    .savings-zone ul li span.straight::before {
        top: 50%; /*tweak this to adjust the vertical position if it's off a bit due to your font family */
        background: red; /*this is the color of the line*/
        opacity: .7;
        content: '';
        width: 110%;
        position: absolute;
        height: .1em;
        border-radius: .1em;
        left: -5%;
        white-space: nowrap;
        display: block;
        transform: rotate(-15deg);
        transform: rotate(0deg);
        left: -1%;
        width: 102%;
        top: 8px;
    }
.to-chalk-teal-100 {
    --tw-gradient-to: #befffd var(--tw-gradient-to-position);
}

.rate--box {
    width: 100%;
    justify-content: center;
    max-width: 500px;
}
    .rate--box div:first-child {
        border-right: 1px solid var(--vz-gold);
    }



.form-control.input-otp {
    margin: 0 auto;
    max-width: 200px;
    font-size: 30px;
    padding: 6px !important;
    height: auto;
    min-height: auto;
    font-weight: bolder;
    letter-spacing: 19px;
    text-align: center !important;
}
    .form-control.input-otp:hover {
        background-color: rgba(var(--vz-light-rgb), var(--vz-bg-opacity)) !important;
        background: rgba(var(--vz-light-rgb), var(--vz-bg-opacity)) !important;
    }
    .line-height-4 {
        line-height: 1.8 !important;
    }
.goldBrekup-desc {
    background: #00bbb4;
    border-radius: 6px;
}
    .goldBrekup-desc .product-name {
    }
    .goldBrekup-desc .coin-box {
        background: #fff;
    }
    .goldBrekup-desc .border-bottom {
        border-color: #fff !important;
        border-width: 2px !important;
    }



.md-stepper-horizontal {
    display: table;
    width: 100%;
    margin: 0 auto;
    background-color: #FFFFFF;
}

    .md-stepper-horizontal .md-step {
        display: table-cell;
        position: relative;
        padding: 24px;
    }

        .md-stepper-horizontal .md-step:hover,
        .md-stepper-horizontal .md-step:active {
            background-color: rgba(0,0,0,0.04);
        }

        .md-stepper-horizontal .md-step:active {
            border-radius: 15% / 75%;
        }

        .md-stepper-horizontal .md-step:first-child:active {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        .md-stepper-horizontal .md-step:last-child:active {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        .md-stepper-horizontal .md-step:hover .md-step-circle {
            background-color: #757575;
        }

        .md-stepper-horizontal .md-step:first-child .md-step-bar-left,
        .md-stepper-horizontal .md-step:last-child .md-step-bar-right {
            display: none;
        }

        .md-stepper-horizontal .md-step .md-step-circle {
            width: 30px;
            height: 30px;
            margin: 0 auto;
            background-color: transparent;
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
            font-size: 16px;
            font-weight: 600;
            color: #FFFFFF;
            border: 1px solid #00bbb4;
        }

    .md-stepper-horizontal.green .md-step.active .md-step-circle {
        background-color: #00bbb4;
    }

    .md-stepper-horizontal.orange .md-step.active .md-step-circle {
        background-color: #00bbb4;
    }

    .md-stepper-horizontal .md-step.active .md-step-circle {
        background-color: rgb(33,150,243);
    }

    .md-stepper-horizontal .md-step.done .md-step-circle:before {
        font-family: 'FontAwesome';
        font-weight: 100;
        content: "\f00c";
    }

    .md-stepper-horizontal .md-step.done .md-step-circle *,
    .md-stepper-horizontal .md-step.editable .md-step-circle * {
        display: none;
    }

    .md-stepper-horizontal .md-step.editable .md-step-circle {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
    }

        .md-stepper-horizontal .md-step.editable .md-step-circle:before {
            font-family: 'FontAwesome';
            font-weight: 100;
            content: "\f040";
        }

    .md-stepper-horizontal .md-step .md-step-title {
        margin-top: 15px;
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 10px;
    }

    .md-stepper-horizontal .md-step .md-step-title,
    .md-stepper-horizontal .md-step .md-step-optional {
        text-align: center;
        color: rgba(0,0,0,.26);
    }

    .md-stepper-horizontal .md-step.active .md-step-title {
        font-weight: 400;
        color: #00bbb4;
    }

    .md-stepper-horizontal .md-step.active.done .md-step-title,
    .md-stepper-horizontal .md-step.active.editable .md-step-title {
        font-weight: 400;
    }

    .md-stepper-horizontal .md-step .md-step-optional {
        font-size: 12px;
    }

    .md-stepper-horizontal .md-step.active .md-step-optional {
        color: rgba(0,0,0,.54);
    }

    .md-stepper-horizontal .md-step .md-step-bar-left,
    .md-stepper-horizontal .md-step .md-step-bar-right {
        position: absolute;
        top: 88px;
        height: 1px;
        border-top: 1px solid #DDDDDD;
    }

    .md-stepper-horizontal .md-step .md-step-bar-right {
        right: 0;
        left: 50%;
        margin-left: 20px;
    }

    .md-stepper-horizontal .md-step .md-step-bar-left {
        left: 0;
        right: 50%;
        margin-right: 20px;
    }


.margin-t-20 {
    margin-top: 20px;
}
.btn-height--50 {
    height: 50px !important;
}
.alert-warning ul, .alert-warning ul li {
    list-style-type: disc;
}


.right-5 {
    right: 5px !important;
}
.right-10 {
    right: 10px !important;
}

.mobile {
    display: none;
}
.desktop {
    display: flex;
}

.isl-header {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 768px) {
    .checkout_form {
        animation: down ease 2s forwards;
        /*z-index: -1;*/
        /* height: 100%; */
        position: inherit;
        /*left: 62px;*/
        min-height: 300px;
        /* max-height: 100%; */
        background-size: auto;
    }
    .mobile {
        display: flex;
    }

    .desktop {
        display: none;
    }
}