body {
	background: #fff;
	margin: 10px;
}
.modal-content {
        border: none;
        border-radius: 10px;
        max-width: 480px;
    }

    /* 
    font-family: "Inter", sans-serif; 
    font-family: "Lato", sans-serif;
    font-family: "DM Sans", sans-serif;
    */
    .tone-popup {
        border-radius: 10px;
        background: #fff;
        position: relative;
        overflow: hidden;
    }

    .tone-back,
    .tone-close {
        position: absolute;
        top: 15px;
    }

    .tone-back:focus,
    .tone-close:focus {
        outline: none;
        box-shadow: none;
    }

    .tone-back {
        left: 15px;
    }

    .tone-back:hover {
        left: 15px;
    }

    .tone-close {
        right: 15px;
    }

    .tone-popup__header {
        background: #F0EFFF;
        text-align: center;
        padding: 40px 30px;

    }

    .tone-popup__header .tone-price {
        font-family: "Lato", sans-serif;
        font-size: 48px;
        color: #6C63FF;
        margin-bottom: 10px;
        font-weight: 500;
    }

    .tone-popup__header .tone-text {
        font-family: "Inter", sans-serif;
        font-size: 22px;
        color: #000;
        font-weight: 600;
    }

    .tone-popup__body {
        padding: 50px 50px 40px;
    }

    .tone-popup__coupon {
        text-align: center;
        position: relative;
        height: 45px;
        width: 100%;
        display: block;
        background: #f8f9fa;
    }

    .tone-popup__coupon .placeholder {
        font-family: "Inter", sans-serif;
        font-size: 14px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        cursor: pointer;
        z-index: 1;
    }

    .tone-popup__coupon input {
        border: none;
        width: 100%;
        height: 100%;
        padding: 10px;
        text-align: center;
        position: absolute;
        left: 0;
        right: 0;
        background: transparent;
        z-index: 2;
    }

    .tone-popup__coupon input:focus {
        outline: none;
        box-shadow: none;
    }

    .tone-popup__coupon input:focus+.placeholder,
    .tone-popup__coupon input[value=""]:focus+.placeholder,
    .not-empty+.placeholder {
        display: none;
    }

    .tone-popup__body-heading {
        text-align: center;
        font-family: "DM Sans", sans-serif;
        font-weight: 600;
        font-size: 18px;
        margin-bottom: 40px;
    }

    .tone-popup__body-heading .text {
        margin-bottom: 4px;
    }

    .tone-popup__body-heading .link {
        text-align: center;
        color: #4C58E3;
        text-decoration: none;
    }

    .tone-popup__quantity {
        max-width: 150px;
        margin: 0 auto;
        background: #f7f7f7;
        border-radius: 5px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 7px 0px;
    }

    .tone-popup__quantity button {
        border: none;
    }

    .tone-popup__quantity .btn {
        padding: 2px 12px;
        margin-bottom: 4px;
    }

    .tone-popup__quantity .form-control {
        font-family: "Inter", sans-serif;
        font-size: 14px;
        text-align: center;
        width: 70px;
        height: 23px;
        padding: 4px;
        border: 1px solid #DEE2E6;
        border-radius: 5px !important;
    }

    .tone-popup .form-control:focus,
    .tone-popup button:focus {
        outline: none;
        box-shadow: none;
    }

    .tone-popup .btn-purple {
        width: 100%;
        height: 60px;
        background: #A14CFF;
        color: #fff;
        text-align: center;
        font-size: 18px;
        font-weight: 500;
        font-family: "DM Sans", sans-serif;
        margin-top: 15px;
        border-radius: 7px;
        border: 1px solid #A14CFF;

    }

    .tone-popup .btn-purple:hover {
        background: #fff;
        color: #A14CFF;
    }

    @media (max-width:480px) {
        .tone-popup__header {
            padding: 70px 20px;
            padding-bottom: 50px;
        }

        .tone-popup__body {
            padding: 25px 20px 25px;
        }

        .tone-popup__body-heading {
            margin-bottom: 30px;
        }

        .tone-popup__body-heading .text {
            margin-bottom: 0;
        }

        .tone-popup__header .tone-text {
            font-size: 18px;
            max-width: 300px;
            margin: 0 auto;
        }

        .tone-popup__header .tone-price {
            font-size: 42px;
        }
    }



    .tone-popup__card input::-webkit-outer-spin-button,
    .tone-popup__card input::-webkit-inner-spin-button {
        /* display: none; <- Crashes Chrome on hover */
        -webkit-appearance: none;
        margin: 0;
        /* <-- Apparently some margin are still there even though it's hidden */
    }

    .tone-popup__card input[type=number] {
        -moz-appearance: textfield;
        /* Firefox */
    }

    .tone-popup__card .input-group {
        border-radius: 7px;
        border: 1px solid #EFF0F6;
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        box-shadow: 1px 2px 4px #EFF0F6;
        padding: 10px 20px;
        height: 60px;
    }

    .tone-popup__card .input-group-text {
        border: none;
        background: transparent;
        padding: 0;
    }

    @media (min-width: 576px) {
        .tone-popup__card .col-sm-6:first-child {
            padding-right: calc(var(--bs-gutter-x)* .35);
        }

        .tone-popup__card .col-sm-6:last-child {
            padding-left: calc(var(--bs-gutter-x)* .35);
        }
    }

    .tone-popup__card .container {
        padding: 0;
    }

    .tone-popup__card .container .input-group {
        margin: 0;
    }

    .tone-popup input {
        color: #000;
        font-family: "DM Sans", sans-serif;
        font-size: 18px;
    }

    .tone-popup input::-webkit-input-placeholder {
        color: #787777;
        font-family: "DM Sans", sans-serif;
        font-size: 18px;
    }

    .tone-popup input::-moz-placeholder {
        color: #787777;
        font-family: "DM Sans", sans-serif;
        font-size: 18px;
    }

    .tone-popup input:-ms-input-placeholder {
        color: #787777;
        font-family: "DM Sans", sans-serif;
        font-size: 18px;
    }

    .tone-popup input:-moz-placeholder {
        color: #787777;
        font-family: "DM Sans", sans-serif;
        font-size: 18px;
    }

    .tone-popup__card .form-control {

        cursor: pointer;
        border: none;
    }

    @media (max-width:480px) {
        .tone-popup__card .input-group {
            margin-bottom: 10px;
        }

        .tone-popup__card .row {
            gap: 10px;
        }
    }

    .tone__payment-item {
        border-radius: 7px;
        border: 1px solid #EFF0F6;
        height: 60px;
        display: flex;
        align-items: center;
        padding: 10px 18px;
        margin-bottom: 15px;
        box-shadow: 1px 2px 4px #EFF0F6;
        cursor: pointer;
    }

    .tone__payment-item:hover {
        box-shadow: none
    }

    .tone__payment-item .text {
        font-family: "DM Sans", sans-serif;
        font-size: 18px;
        margin-left: 25px;
    }

    .tone__payment-item .img-after {
        margin-left: auto;
    }

    @media (max-width:480px) {
        .tone__payment-item {
            height: 50px;
            padding: 10px 13px;
            margin-bottom: 10px;
        }

    }