.divider .divider-text small {
    font-weight: 600 !important;
    text-transform: none !important;
    color: blueviolet !important;
    font-size: 16px !important;
}

.wizard-step-title span.font-weight-bold.fs-14 {
    font-weight: 600 !important;
}

div#payment .login-title,
h3.text-center.login-title.mb-2,
h3.text-center.login-title.mb-2 a {
    text-shadow: unset !important;
    color: blueviolet !important;
    font-size: 28px;
    font-weight: 600;
}

div#payment p.fs-12.text-muted.text-center.mb-8,
div#registration-prices p.fs-12.text-muted.text-center.mb-8 {
    font-size: 14px !important;
    color: #1b1b1b !important;
}

form#payment-form .checkout-wrapper-box label.form-label.fs-11.font-weight-semibold {
    font-weight: 500 !important;
    font-size: 13px !important;
}

form#payment-form .checkout-wrapper-box .input-box .form-control,
form#registration-form .input-box .form-control,
.input-box .form-control {
    border: 1px solid #8a2bed7d !important;
    background-color: #F6F3F2 !important;
    border-radius: 8px !important;
}

form#payment-form .checkout-wrapper-box .awselect,
form#registration-form .awselect .front_face>.bg {
    border: 1px solid #8a2bed7d;
    background-color: #F6F3F2;
    border-radius: 8px !important;
}

.btn-primary,
#payment a.fs-12.font-weight-bold.text-primary.special-action-sign {
    background: linear-gradient(to right, #8A2BE2, #DA70D6) !important;
    border: none !important;
    font-weight: 500 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease;
    text-transform: none !important;
}

.btn-primary:hover,
#payment a.fs-12.font-weight-bold.text-primary.special-action-sign:hover {
    background: linear-gradient(to right, #DA70D6, #8A2BE2) !important;
}

#payment a.fs-12.font-weight-bold.text-primary.special-action-sign {
    padding: 10px 25px !important;
    color: white !important;
    border-radius: 8px !important;
    font-size: 16px;
}

button#payment-button {
    font-size: 16px;
}

.checkout-title {
    font-size: 16px !important;
    font-weight: 600 !important;
}

form#payment-form p.fs-12.p-family span.checkout-cost.text-info {
    font-size: 18px !important;
    color: blueviolet !important;
}

.tabs-menu ul li .active {
    background: blueviolet !important;
    font-size: 14px !important;
}

a.btn.btn-primary-pricing {
    background-color: blueviolet !important;
    border-color: blueviolet !important;
}

a.btn.btn-primary-pricing:hover {
    background-color: #ff7733 !important;
    border-color: #ff7733 !important;
}

.tabs-menu-body .card .plan-cost {
    color: #ff7733 !important;
}

.tabs-menu-body .card:hover .plan-cost,
.tabs-menu-body .card:focus .plan-cost,
.card-body h3.text-center.login-title span {
    color: blueviolet !important;
}

/*
.checkout-wrapper-box label.gateway:hover,
.checkout-wrapper-box label.gateway:focus {
    border: 1px solid blueviolet !important;
}
*/
.checkout-wrapper-box label[aria-expanded=true] {
    border-color: blueviolet !important;
}

.custom-switch-input:checked~.custom-switch-indicator {
    background: blueviolet !important;
}

.checkout-wrapper-box p.plan-cost {
    visibility: hidden !important;
}

form#payment-form .checkout-wrapper-box .plan {
    display: none !important
}

.checkout-wrapper-box {
    padding: 1.5rem 1.2rem 3rem !important;
}

#phone-number {
    padding-left: 15px !important;
}

.checkout-wrapper-box label.gateway {
    display: flex !important;
    width: 100% !important;
    align-items: center;
    justify-content: flex-start;
}

.payment-image,
.payment-image-braintree {
    width: 40% !important;
}

.payment-image-stripe {
    width: 85% !important;
}

@media only screen and (max-width: 767px) {
    .payment-image-stripe {
        width: 80% !important;
    }
}

img[alt="Wallet"] {
    width: 15% !important;
}

/* Hide the default radio button*/
input.gateway-radio {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 24px;
    height: 24px;
    border: 2px solid #999;
    border-radius: 50%;
    background-color: #fff;
    outline: none;
    cursor: pointer;
    position: relative;
    margin: 0 5px;
}

/* Create a circle inside to represent the selected state*/
input.gateway-radio:checked::before {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    background-color: blueviolet;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: background-color 0.3s;
}

/*Hover effect*/
input.gateway-radio:hover {
    border-color: #007bff;
}