#customerClientLoginIn {position: relative;}
.tab-container{}
#customerClientLoginIn .tab-content {position: unset;display: none;padding: 20px;}
#details, #orders {background: #fff;}
#details h1, #orders h1 {font-size: 25px;color: var(--background-menu);text-align: left;text-align: center;margin-bottom: 35px;width: 100%;}
.updateDataCustomer.top-button {margin-bottom: 40px;}
.updateDataCustomer {background: var(--background-menu);width: 100%; max-width: 320px;display: block;margin-left: auto;margin-right: auto;border-radius: 10px;color: #fff;border: 0px;padding: 10px;}
.customer-details, .customer-address, .customer-tax, #customer-order-in {background-color: rgba(0,0,0,0.1) !important;padding: 20px;margin: 10px;margin-bottom: 30px;border-radius: 10px;}
#details label {display: block;text-align: left;margin-top: 10px;cursor: pointer;}
#details input:not([type="radio"]):not([type="checkbox"]) {width: 100%;border: 1px solid rgba(0, 0, 0, 0.1);padding: 5px;border-radius: 5px;background: #fff;}
#details select {width: 100%;border: 1px solid rgba(0, 0, 0, 0.1);padding: 5px;border-radius: 5px;background: #fff;}
.tab-button.active {background-color: var(--background-menu);color: #fff;}
.tab-button {padding: 10px 20px;border: none;background: rgba(0, 0, 0, 0.1);cursor: pointer;font-size: 16px;}
.tab-button.logout:hover{background-color: red;color: #fff;}
.filters-container{margin-top: 10px;}
.filters-container form{display: flex;flex-wrap: wrap;width: 100%;max-width: 1080px;}
.filters-container label{display: block;text-align: left;font-size: 15px;margin-bottom: 5px;}
.filters-container input{border: 1px solid rgba(0, 0, 0, 0.1);padding: 5px;border-radius: 10px; background: #fff;width: 100%;}
.orders-table {width: 100%;text-align: center;margin-top: 30px;}
.orders-table thead {background-color: var(--background-menu);color: #fff;}
.orders-table thead tr th {padding: 10px;font-weight: bold;}
.orders-table .order-row {background: #fff;border-bottom: 1px solid rgba(0,0,0,0.5);}
.orders-table .order-row td {padding: 5px;}
.orders-table .view-btn {border: 0px;background: unset;}
.main-details-order {color: var(--background-menu);}
#pagination-order {display: block; width: 100%;max-width: 420px;margin-left: auto;margin-right: auto;margin-top: 30px;text-align: center;}
#pageIndicator {color: var(--background-menu);padding: 10px;}
#pagination-order button {background: var(--background-menu);border-radius: 25px;color: #fff;border: 0px;padding: 5px;width: 150px;}
.filters-container button {background: var(--background-menu);border-radius: 10px;color: #fff;border: 0px;padding: 5px;width: 150px;margin-top: 28px;}
#orderModal {display: none;position: fixed;top: 15%;left: 50%;transform: translate(-50%, 0%);z-index: 99999999;background-color: #fff;width: 95%;max-width: 1320px;padding: 20px;border-radius: 8px;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);}
#orderModal .modal-content {max-height: 95vh;overflow: auto;padding-bottom: 100px;}
#orderModal .close-btn {position: absolute;left: 0px;font-size: 20px;background: var(--background-menu);width: 20px;height: 20px;color: #fff;text-align: center;border-radius: 180pc;line-height: 20px;overflow: hidden;cursor: pointer;}
#orderModal h3 {display: block;margin-left: 30px;margin-top: -2px;margin-bottom: 15px;font-weight: bold;font-size: 20px;color: var(--background-menu);}
#fullcart-order .cart-responsive-table {width: 100%;float: unset;}
.pluss-cart {float: left;width: 20px;box-sizing: border-box;text-align: center;cursor: pointer;}
.quick-cart-qnt {width: 60%;float: left;box-sizing: border-box;border: 0px;text-align: center;}
.order-details {display: flex;flex-wrap: wrap;margin-top: 30px;}
.order-details h4 {font-size: 20px;color:var(--background-menu);}
.order-details p {padding: 0px;margin: 0px;font-size: 16px;}
.order-details p span{font-weight:bold;}
.sum-order-details p span {float: right;font-weight: bold;}
#massage-customer{position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 9999999999999;background: #fff;color: red;display: none;width: 100%;max-width: 500px;padding: 20px;min-height: 450px;cursor: pointer;border-radius: 20px;box-shadow: 4px 3px 7px rgba(0, 0, 0, 0.3);padding-top: 50px;}
#massage-customer.error-active {display: block;}
#massage-customer::before {content: "x";display: block;position: absolute;left: 15px;top: 15px;background:var(--background-menu);width: 20px;height: 20px;text-align: center;color: #fff;line-height: 17px;font-size: 14px;font-weight: bold;border-radius: 360px;}


@media screen and (max-width: 900px) {

#detailsCustomerForm .row-2,#customer-order-in .row-4{flex-basis: calc(100%);max-width: 100%;margin-bottom:10px;}
.filters-container button {width: 100%;margin-top: 10px;}
#pagination-order button {display: block;margin-left:auto;margin-right:auto;}
#prevBtn{margin-bottom:10px;}
#nextBtn{margin-top:10px;}
.orders-table thead {display: none;}
.orders-table, .orders-table tbody, .orders-table tr, .orders-table td {display: block;width: 100%;}
.orders-table tr {margin-bottom: 20px;border: 1px solid var(--black-transparent-2);background: #fff;overflow: hidden;}
.orders-table td {text-align: right;padding: 12px 15px;padding-left: 45%;position: relative;border-bottom: 1px solid var(--black-transparent-2);;min-height: 40px;display: flex;align-items: center;justify-content: flex-end;}
.orders-table td::before {content: attr(data-label);position: absolute;left: 15px;top: 50%;transform: translateY(-50%);width: 40%;text-align: left;font-weight: 700;color: #555;font-size: 13px;}  
}