/* Add here all your CSS customizations */
textarea
{
    /* resize: none !important;
    overflow: hidden; */
    resize: none;
}

.text-right-custom {
    text-align: right !important;
}
.ship_title
{
    background-color:#f0f0f0;
    padding: 10px;
    font-weight: bold;
}

.ship_small_title
{
    font-weight: bold;
}
.bol
{
    color: rgb(84, 186, 230);
}
input::placeholder {
    font-size: 13px; /* Adjust the size as needed */
}
.table-ecommerce-simple {
    width: 100%;
    border-collapse: collapse;
}

.table-ecommerce-simple th, .table-ecommerce-simple td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.table-ecommerce-simple td {
    overflow-wrap: break-word;
}

/* Make table responsive */
@media screen and (max-width: 1024px) {
    .table-ecommerce-simple thead {
        display: none;
    }
    .table-ecommerce-simple, .table-ecommerce-simple tbody, .table-ecommerce-simple tr, .table-ecommerce-simple td {
        display: block;
        width: 100%;
    }
    .table-ecommerce-simple tr {
        margin-bottom: 15px;
        border-bottom: 2px solid #ddd;
    }
    .table-ecommerce-simple td {
        text-align: left;
        font-size:10px;
        padding-left: 49%;
        position: relative;
        word-wrap: break-word;
    }
    .table-ecommerce-simple td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 48%; /* Decreased width for the label */
        padding-right: 10px;
        white-space: nowrap;
        font-weight: bold;
        text-align: left;
        padding-left: 10px;
        background: #f4f4f4; /* Optional: Background for better readability */
    }
    .table-ecommerce-simple td[colspan="4"] {
        text-align: left;
        padding-bottom: 10px;
    }
    .left-aligned {
        font-size: 16px;
        color: #1eb2ca;
        padding-bottom: 10px;
        text-align: left !important;
        padding-left: 50%;
        position: relative;
    }
}
.status_submit
{
background-color:#1eb2ca; 
padding:8px; 
color:white; 
font-size: 13px;
}
.status_waiting
{
background-color:#a07415; 
padding:8px; 
color:white; 
font-size: 13px;
}

    .flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.flex-item {
    flex: 1 1 30%; /* Adjust the basis as needed */
    box-sizing: border-box;
}

.bol-text {
    font-size: 16px;
    color: #1eb2ca;
}

.status-badge {
    padding:4px 8px;
    background-color: #17a2b8; /* bg-info in Bootstrap */
    color: white;
    border-radius: 4px;
}

@media (max-width: 768px) {
    .flex-item {
        flex: 1 1 100%; /* Full width on small screens */
        margin-bottom: 4px; /* Space between items */
    }
}
.pagination-wrapper .pagination {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap onto the next line */
    justify-content: center; /* Center the pagination items */
    gap: 1px; /* Add some space between items */
}



/* Optional: Further styling for small screens */
@media (max-width: 576px) {
    .pagination-wrapper .pagination .page-item {
        min-width: 40px; /* Adjust minimum width for smaller screens */
    }

    .pagination-wrapper .pagination .page-link {
       /* Reduce padding slightly on smaller screens */
        font-size: 13px; /* Adjust font size for better fit */
    }
}