.order-list .table {
    border-spacing: 0px 15px;
    border-collapse: separate;
}

.order-list .table tr th {
    font-weight: 400;
    font-size: 14px;
    white-space: nowrap;
    border: none;
}
.whitespace-nowrap{
    white-space: nowrap;
}

.order-list .table tr td {
    font-weight: 400;
    font-size: 13px;
    vertical-align: middle;
    border-top: 1px solid #BECAF0;
    border-bottom: 1px solid #BECAF0;
    color: #A09F9F;
}

.order-list .table tr td:first-child {
    border-left: 1px solid #BECAF0;
    border-radius: 6px 0px 0px 6px;
}

.order-list .table tr td:last-child {
    border-right: 1px solid #BECAF0;
    border-radius: 0px 6px 6px 0px;
}

.bg-mixed {
    background-color: #A2B4ED;
}


.ordered-products img {
    width: 50px;
    height: 50px;
    border: 1px solid #BECAF0;
    border-radius: 4px;
    object-fit: cover;
    object-position: 50% top;
    margin-right: 10px;
}

.ordered-products h4 {
    white-space: nowrap;
    margin: 0;
    color: #A09F9F;
    text-overflow: ellipsis;
    font-weight: 400;
    font-size: 14px;
}

.order-list .table tbody tr {
    border-radius: 7px;

}

.order-badges,
.payment-badges {
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-block;
    color: #FFFFFF;
    font-weight: 500;
    font-size: 13px;
}

.bg-green {
    background-color: #37A005;
    border: 1px solid #37A005;
}

.bg-red {
    background-color: #FF0707;
    border: 1px solid #FF0707;
}

.bg-blue {
    background-color: #3B82F6;
    border: 1px solid #3B82F6;
}

.bg-dark-green {
    background-color: #206300;
    border: 1px solid #206300;
}

.bg-purple {
    background-color: #9905DF;
    border: 1px solid #9905DF;
}

.bg-light-green {
    background-color: #5DD5DD;
    border: 1px solid #5DD5DD;
}

.view-btn {
    padding: 7px 30px;
    font-weight: 500;
    font-size: 14px;
    color: #55ACD3;
    border: 1px solid #55ACD3;
    background-color: rgba(158, 212, 238, 0.21);
    border-radius: 4px;
}

.view-btn:hover {
    color: #55ACD3;
}

.invoice-details {
    margin-bottom: 30px;
}

.p-20 {
    padding: 20px;
}

.profile-img {
    width: 20%;
}

.profile-text {
    width: 80%;
}

input[type=radio] {
    accent-color: rgb(38, 78, 202) !important;
    ;
}

.lh-24 {
    line-height: 24px;
}

.sticky-xxl-top,
.sticky-xl-top,
.sticky-lg-top {
    z-index: 10;
}

.accordion-button:not(.collapsed) {
    color: var(--bs-accordion-active-color);
    background-color: transparent !important;
    box-shadow: transparent !important;
}

.accordion-button:focus {
    z-index: 3;
    border-color: transparent !important;
    outline: 0;
    box-shadow: none !important;
}

.accordion-item {
    color: var(--bs-accordion-color);
    background-color: var(--bs-accordion-bg);
    border: transparent;
}


.accordion-button::after {
    background-size: 16px;
}
.white-wrap{
    white-space: nowrap;
}


.accordion-body {
    padding: 0px !important;
}

.text-14 {
    font-size: 14px;
}

.py-13 {
    padding-top: 13px;
    padding-bottom: 13px;
}

.resize-none {
    resize: none;
}

.border-blue {
    border: 1px solid #264ECA !important;
}




.w-49 {
    width: 99%;
}

.scrollableDiv {
    width: 300px;
    overflow-x: scroll;

}

.pe-custom {
    padding-right: 200px !important;
}

pre {
    margin: 0;
}

.scrollList {
    border-radius: 20px;
    padding: 2px 15px;
    box-sizing: border-box;
    cursor: pointer;
}
.scrollList >pre {
    font-weight: 500;
}


@media only screen and (min-width: 556px) {
    .profile-img {
        width: 10%;
    }

    .scrollableDiv {
        width: 400px;
    }

    .profile-text {
        width: 80%;
    }



    .profileButton {
        padding: 9px 10px;

    }

    .profileButton>span {
        font-size: 17px !important;

    }




    .w-49 {
        width: 99%;
    }



}

@media only screen and (min-width: 768px) {
    .profile-img {
        width: 10%;
    }

    .scrollableDiv {
        width: 600px;
    }

    .order-badges,
    .payment-badges {
        padding: 4px 1px;
    }

    .profile-text {
        width: 80%;
    }

    .w-49 {
        width: 49%;
    }





}

@media only screen and (min-width: 992px) {
    .profile-img {
        width: 30%;
    }

    .scrollableDiv {
        width: 600px;
    }

    .order-badges,
    .payment-badges {
        padding: 4px 4px;
    }

    .profile-text {
        width: 70%;
    }

    .profile-text>div>p {
        font-size: 15px !important;
    }

    .profile-text>div>h3 {
        font-size: 13px !important;
    }

    .accordion-button {

        padding: var(--bs-accordion-btn-padding-y) 5px;

    }

    .text-14 {
        font-size: 12px;
    }






}

@media only screen and (min-width: 1200px) {
    .profile-img {
        width: 25%;
    }
        .scrollableDiv {
            width: 770px;
        }
    
        .order-badges,
        .payment-badges {
            padding: 4px 7px;
        }

    .text-14 {
        font-size: 14px;
    }

    .profile-text {
        width: 75%;
    }

    .text-2xl {
        font-size: 17px !important;
    }

    .text-base {
        font-size: 15px !important;
    }

    .accordion-button {
        padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);

    }




}

@media only screen and (min-width: 1400px) {
    .profile-img {
        width: 21%;
    }
         .scrollableDiv {
             width: 900px;
         }
    
         .order-badges,
         .payment-badges {
             padding: 4px 7px;
         }

    .profile-text {
        width: 79%;
    }

    .text-2xl {
        font-size: 20px !important;
    }



}

@media only screen and (min-width: 1500px) {
    .profile-img {
        width: 21%;
    }
        .scrollableDiv {
            width: 1060px;
        }

    .profile-text {
        width: 79%;
    }
}