/*#payment-form * {*/
/*    margin: 0;*/
/*    padding: 0;*/
/*    box-sizing: border-box;*/
/*    list-style: none;*/
/*    !*font-family: 'Roboto', sans-serif*!*/
/*}*/
#payment-form .bg-white{
    background-color:white;
}
#payment-form .dc-docpostcontent,
#payment-form .dc-searchvtwo{
    padding:0px;
}
#payment-form{
    margin:0px auto;
    padding:30px 0px;
    text-align:left;
    background-color:white;
}
#payment-form>div{
    border-radius:4px;

}

#payment-form body {
    padding: 5px
}

#payment-form p {
    margin: 0%
}

#payment-form .container {
    margin: 20px auto;
    overflow: hidden
}

#payment-form .box-1 {
    max-width: 350px;
    padding: 10px 40px;
    user-select: none
}

#payment-form .box-1 img.pic {
    width: 20px;
    height: 20px;
    object-fit: cover
}

#payment-form .box-1 img.mobile-pic {
    width: 100%;
    height: 200px;
    object-fit: cover
}

#payment-form .box-1 .name {
    font-size: 11px;
    font-weight: 400
}

#payment-form .dis {
    font-size: 12px;
    font-weight: 500
}

#payment-form .box-2 {
    padding: 10px 40px
}
#payment-form input,
#payment-form select{
    font-size: 12px;
    font-weight: 400;
    padding-left:4px!important;
    padding-right:4px!important;
}
#payment-form .box-2 .box-inner-2 input.form-control {
    font-size: 12px;
    font-weight: 400
}

#payment-form .box-2 .box-inner-2 .inputWithIcon {
    position: relative
}

#payment-form .box-2 .box-inner-2 .inputWithIcon span {
    position: absolute;
    left: 15px;
    top: 8px
}

#payment-form .box-2 .box-inner-2 .inputWithcheck {
    position: relative
}

#payment-form .box-2 .box-inner-2 .inputWithcheck span {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: green;
    font-size: 12px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 15px;
    top: 6px
}

#payment-form .form-control:focus, .form-select:focus {
    box-shadow: none;
    outline: 1px;
    border: 1px solid #00c1e5
}

#payment-form .border:focus-within {
    border: 1px solid #00c1e5 !important

}

#payment-form .box-2 .card-atm .form-control {
    border: none;
    box-shadow: none;
}

#payment-form .form-select {
    border-radius: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px
}

#payment-form .address .form-control.zip {
    border-radius: 0;
    border-bottom-left-radius: 10px;
}

#payment-form .address .form-control.state {
    border-radius: 0;
    border-bottom-right-radius: 10px;
}
#payment-form .form-control.zip{
    margin-right:6px;
}
#payment-form .country .form-control.country {
    border-radius: 0;
    border-bottom-right-radius: 10px
}

#payment-form .box-2 .box-inner-2 .btn.btn-outline-primary {
    width: 120px;
    padding: 10px;
    font-size: 11px;
    padding: 0% !important;
    display: flex;
    align-items: center;
    border: none;
    border-radius: 0;
    background-color: whitesmoke;
    color: black;
    font-weight: 400
}

#payment-form .box-2 .box-inner-2 .btn.btn-primary {
    background-color: #00c1e5;
    color: rgb(255, 255, 255);
    font-size: 14px;
    display: flex;
    align-items: center;
    font-weight: 400;
    justify-content: center;
    border: none;
    padding: 10px
}

#payment-form .box-2 .box-inner-2 .btn.btn-primary:hover {
    background-color: rgba(0, 193, 229, 0.49)
}

#payment-form .box-2 .box-inner-2 .btn.btn-primary .fas {
    font-size: 13px !important;
    color: whitesmoke
}

#payment-form .carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%
}

#payment-form .carousel-inner {
    width: 100%;
    height: 200px
}

#payment-form .carousel-item img {
    object-fit: cover;
    height: 100%
}

#payment-form .carousel-control-prev {
    transform: translateX(-50%);
    opacity: 1
}

#payment-form .carousel-control-prev:hover .fas.fa-arrow-left {
    transform: translateX(-5px)
}

#payment-form .carousel-control-next {
    transform: translateX(50%);
    opacity: 1
}

#payment-form .fas.fa-arrow-left, .fas.fa-arrow-right {
    font-size: 0.8rem;
    transition: all .2s ease
}

#payment-form .icon {
    width: 30px;
    height: 30px;
    background-color: #f8f9fa;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transform-origin: center;
    opacity: 1
}


#payment-form ::placeholder {
    font-size: 12px;
    text-indent: 5px
}

#payment-form .couponCode {
    text-transform: uppercase;
    font-size: 0.7rem
}

#payment-form #code {
    pointer-events: none;
    font-weight: 400
}

#payment-form .close {
    cursor: pointer
}
#payment-form #totals-div{
    padding-top:12px;
}
#payment-form #card-input .fa-credit-card{
    margin-left:6px;
    margin-right:6px;
}
@media (max-width: 992px) {
    #payment-form .box-1 {
        max-width: 100%;
    }

    #payment-form .img-details{
        display:none;
    }
}
@media (max-width: 768px) {
    #payment-form .box-1 {
        max-width: 100%;
    }
    #payment-form .container {
        margin: 10px auto
    }
    #payment-form .box-2 {
        max-width: 100%;
        padding: 10px 10px
    }
    #payment-form{
        padding:0px;
    }

#payment-form .box-1{
    padding: 20px 12px 12px;
}

#payment-form .box-2 {
        padding: 12px 12px 20px;
    }



}

@media (max-width: 426px) {
    #payment-form .box-1, .box-2 {
        padding: 20px 10px
    }

    #payment-form::placeholder {
        font-size: 9px;
        text-indent: 5px

    }
}