input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

input[type="number"]::-ms-clear {
    display: none;
}

@media screen and (min-width: 1098px) {
    .checkout {
        width: 100%;
        margin-top: 50px;
    }

    .checkoutdiv {
        width: 75%;
        margin: auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
        padding: 10px 0px;
    }

    /* Checkout Left */
    .checkoutleft {
        width: 100%;
    }

    .leftdiv {
        width: 85%;
        margin: auto;
    }

    .leftct h3 {
        font-weight: var(--fw-xl);
        font-size: 18px;
        margin-bottom: 10px !important;
        color: var(--text-secondary);
    }

    .leftct h4 {
        font-weight: var(--fw-xxl);
        font-size: 25px;
        text-decoration: 3px underline var(--main);
        margin-bottom: 10px !important;
    }

    .leftct h6 {
        color: var(--text-secondary);
        font-weight: var(--fw-md);
        font-size: 15px;
        line-height: 20px;
        text-align: justify;
        margin-bottom: 10px !important;
    }

    .leftpay h5 {
        color: var(--text-secondary);
        font-size: 15px;
        font-weight: var(--fw-xl);
        margin-bottom: 5px !important;
    }

    .leftpay h2 {
        color: var(--text-primary);
        font-size: 30px;
        font-weight: var(--fw-xl);
    }

    .leftpay .table .amttxt {
        text-align: right;
    }

    .leftpay .row h6,
    .leftpay .table td h6 {
        color: var(--text-secondary);
        font-size: 13px;
        font-weight: var(--fw-lg);
    }

    .leftpay .row h5,
    .leftpay .table td h5 {
        color: var(--text-primary);
        font-size: 18px;
        font-weight: var(--fw-xl);
    }


    /* Checkout Right */
    .checkoutright {
        width: 100%;
    }

    .rightdiv {
        width: 85%;
        margin: 0 auto;
    }

    .rightdiv h4 {
        font-weight: var(--fw-xl);
        font-size: 18px;
        margin-bottom: 20px !important;
    }

    .rightdiv h6 {
        color: var(--text-secondary);
        font-weight: var(--fw-xl);
        font-size: 15px;
        margin-bottom: 10px !important;
    }

    .rightdiv .container .contactinfo .row .col-md-12 {
        width: 100%;
        display: grid;
        grid-template-columns: 10% 90%;
        align-items: center;
        justify-content: space-between;
        border: 1px solid var(--light);
    }

    .rightdiv .container input,
    .rightdiv .container select {
        font-size: 15px;
    }

    .rightdiv .container .row .col-md-12 i {
        border-right: 1px solid var(--light);
    }

    .rightdiv .container .cardinfo .row .col-md-12 {
        width: 100%;
        display: grid;
        grid-template-columns: 75% 25%;
        align-items: center;
        justify-content: space-between;
        border: 1px solid var(--light);
    }

    .rightdiv .container .cardinfo .row .col-md-6 {
        border: 1px solid var(--light);
    }

    .rightdiv .container .personalinfo .row .col-md-12,
    .rightdiv .container .personalinfo .row .col-md-6 {
        border: 1px solid var(--light);
    }
}

@media screen and (min-width: 768px) and (max-width: 1098px) {
    .checkout {
        width: 100%;
    }

    .checkoutdiv {
        width: 100%;
        margin: auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
        padding: 10px 0px;
    }

    /* Checkout Left */
    .checkoutleft {
        width: 100%;
    }

    .leftdiv {
        width: 90%;
        margin: auto;
    }

    .leftct h3 {
        font-weight: var(--fw-xl);
        font-size: 22px;
        margin-bottom: 20px !important;
    }

    .leftct h6 {
        color: var(--text-secondary);
        font-weight: var(--fw-md);
        font-size: 13px;
        line-height: 20px;
        text-align: justify;
        margin-bottom: 10px !important;
    }

    .leftpay h5 {
        color: var(--text-secondary);
        font-size: 13px;
        font-weight: var(--fw-xl);
        margin-bottom: 5px !important;
    }

    .leftpay h2 {
        color: var(--text-primary);
        font-size: 25px;
        font-weight: var(--fw-xl);
    }

    .leftpay .row h6 {
        color: var(--text-secondary);
        font-size: 13px;
        font-weight: var(--fw-lg);
    }

    .leftpay .row h5 {
        color: var(--text-primary);
        font-size: 18px;
        font-weight: var(--fw-xl);
    }


    /* Checkout Right */
    .checkoutright {
        width: 100%;
    }

    .rightdiv {
        width: 90%;
        margin: 0 auto;
    }

    .rightdiv h4 {
        font-weight: var(--fw-xl);
        font-size: 15px;
        margin-bottom: 20px !important;
    }

    .rightdiv h6 {
        color: var(--text-secondary);
        font-weight: var(--fw-xl);
        font-size: 13px;
        margin-bottom: 10px !important;
    }

    .rightdiv .container .contactinfo .row .col-md-12 {
        width: 100%;
        display: grid;
        grid-template-columns: 10% 90%;
        align-items: center;
        justify-content: space-between;
        border: 1px solid var(--light);
    }

    .rightdiv .container input,
    .rightdiv .container select {
        font-size: 13px;
    }

    .rightdiv .container .row .col-md-12 i {
        border-right: 1px solid var(--light);
    }

    .rightdiv .container .cardinfo .row .col-md-12 {
        width: 100%;
        display: grid;
        grid-template-columns: 75% 25%;
        align-items: center;
        justify-content: space-between;
        border: 1px solid var(--light);
    }

    .rightdiv .container .cardinfo .row .col-md-12 div img {
        height: 20px !important;
    }

    .rightdiv .container .cardinfo .row .col-md-6 {
        border: 1px solid var(--light);
    }

    .rightdiv .container .personalinfo .row .col-md-12,
    .rightdiv .container .personalinfo .row .col-md-6 {
        border: 1px solid var(--light);
    }
}

@media screen and (max-width: 768px) {
    .checkout {
        width: 100%;
    }

    .checkoutdiv {
        width: 100%;
        margin: auto;
        padding: 10px 0px;
    }

    /* Checkout Left */
    .checkoutleft {
        width: 100%;
    }

    .leftdiv {
        width: 90%;
        margin: auto;
    }

    .leftct h3 {
        font-weight: var(--fw-xl);
        font-size: 22px;
        margin-bottom: 20px !important;
    }

    .leftct h6 {
        color: var(--text-secondary);
        font-weight: var(--fw-md);
        font-size: 13px;
        line-height: 20px;
        text-align: justify;
        margin-bottom: 10px !important;
    }

    .leftpay h5 {
        color: var(--text-secondary);
        font-size: 13px;
        font-weight: var(--fw-xl);
        margin-bottom: 5px !important;
    }

    .leftpay h2 {
        color: var(--text-primary);
        font-size: 25px;
        font-weight: var(--fw-xl);
    }

    .leftpay .row {
        display: grid;
        grid-template-columns: 15% 60% 25%;
    }

    .leftpay .row h6 {
        color: var(--text-secondary);
        font-size: 12px;
        font-weight: var(--fw-lg);
    }

    .leftpay .row h5 {
        color: var(--text-primary);
        font-size: 15px;
        font-weight: var(--fw-xl);
    }

    .leftpay .row img {
        height: 30px !important;
    }


    /* Checkout Right */
    .checkoutright {
        width: 100%;
        margin-top: 50px;
    }

    .rightdiv {
        width: 90%;
        margin: 0 auto;
    }

    .rightdiv h4 {
        font-weight: var(--fw-xl);
        font-size: 15px;
        margin-bottom: 20px !important;
    }

    .rightdiv h6 {
        color: var(--text-secondary);
        font-weight: var(--fw-xl);
        font-size: 13px;
        margin-bottom: 10px !important;
    }

    .rightdiv .container .contactinfo .row .col-md-12 {
        width: 100%;
        display: grid;
        grid-template-columns: 10% 90%;
        align-items: center;
        justify-content: space-between;
        border: 1px solid var(--light);
    }

    .rightdiv .container input,
    .rightdiv .container select {
        font-size: 13px;
    }

    .rightdiv .container .row .col-md-12 i {
        border-right: 1px solid var(--light);
    }

    .rightdiv .container .cardinfo .row .col-md-12 {
        width: 100%;
        display: grid;
        grid-template-columns: 70% 30%;
        align-items: center;
        justify-content: space-between;
        border: 1px solid var(--light);
    }

    .rightdiv .container .cardinfo .row .col-md-12 div img {
        height: 20px !important;
    }

    .rightdiv .container .cardinfo .row .col-md-6 {
        border: 1px solid var(--light);
    }

    .rightdiv .container .personalinfo .row .col-md-12,
    .rightdiv .container .personalinfo .row .col-md-6 {
        border: 1px solid var(--light);
    }
}