@import url("product_parts/_sortimente.css");
/* start modal order details */

.order-details-header {
    position: relative;
    display: inline-block;
}

.user-assigned .dropdown-container,
.status-table .dropdown-container,
.order-status-item .dropdown-container {
    position: absolute;
    background-color: #fff;
    z-index: 1;
    width: 100%;
    box-shadow: 1px 1px 3px #838383;
    border-radius: 5px;
    top: 38px;
}

.user-assigned .dropdown-container {
    top: 36px;
    left: 0;
}

.user-assigned .dropdown-container .item,
.status-table .dropdown-container .item {
    font-size: 14px;
    cursor: pointer;
    position: relative;
}

.user-assigned .dropdown-container .item:hover,
.status-table .dropdown-container .item:hover {
    background-color: #eee;
}




.user-assigned .dropdown-container .item .status-label,
.status-table .dropdown-container .item .status-label,
.order-status-item .dropdown-container .item .status-label {
    padding: 10px;
}

.order-details-header .order-status {
    padding: 10px 25px 10px 10px;
    font-size: 14px;
    border-radius: 5px;
    font-weight: 600;
    min-width: 100px;
    text-align: center;
    position: relative;
    display: inline-block;
}

.order-details-header .order-status.disabled {
    cursor: not-allowed;
    opacity: .5;
}

.order-details-header .dropdown-container .item.old-status:after {
    width: calc(100% - 10px);
    height: 1px;
    background-color: #aaa;
    position: absolute;
    content: " ";
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 0;
}


/* .order-details-header .order-status.livrata .editable i,
.order-details-header .order-status.livrata,
.order-details-header .order-status.anulata .editable i,
.order-details-header .order-status.anulata,
.order-details-header .order-status.respinsa .editable i,
.order-details-header .order-status.respinsa {
    opacity: .7;
    cursor: not-allowed;
} */

.order-details-header .order-status .editable {
    position: absolute;
    right: 5px;
    color: inherit;
    top: 5px;
    padding: 5px;
    border-radius: 5px;
}

.client-details-header .editable:hover,
.delivery-details-header .editable:hover {
    background-color: #eee;
}

.order-details-header .order-status .editable i {
    cursor: pointer;
}

.order-details-header:after {
    clear: both;
    content: " ";
    display: block;
}

.order-table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
    background-color: transparent
}

table tbody tr,
table thead tr {
    border: 1px solid transparent;
}

.order-table td,
.order-table th {
    padding: .75rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}

.order-table thead th {
    vertical-align: top;
    border-bottom: 2px solid #dee2e6;
    font-size: 14px;
    text-align: left;
    color: #000;
}

.order-table thead th.column-price {
    width: 110px;
}

.order-table thead th.column-total {
    width: 70px;
}

.order-table thead th.column-quantity {
    width: 70px;
}

.order-table thead th:first-of-type {
    width: 80px;
}

.order-table tbody+tbody {
    border-top: 2px solid #dee2e6
}

.order-table {
    background-color: #fff;
    margin-top: 10px;
    margin-bottom: 5px;
}

.order-product-details-container {
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
    position: relative;
    z-index: 2;
}

.order-table td {
    vertical-align: top;
    text-align: left;
    color: #333;
    font-size: 14px;
}


.order-table .item-image-column {
    width: 82px;
}

.order-table .item-name-column {
    width: 45%;
}

.order-table .product-image {
    width: 100%;
    border-radius: 5px;
    box-shadow: 1px 1px 6px #c1c1c1;
    max-width: 130px;
}

.order-table .product-name {
    font-size: 16px;
    color: #000;
    font-weight: 600;
    position: relative;
}

.order-table .product-item.generic .product-name {
    display: inline-block;
}


.order-table .product-name a:hover {
    text-decoration: underline;
}

.order-table .product-description {
    margin-top: 10px;
    position: relative;
    display: inline-block;
}

.order-table .product-item.generic .product-description {
    display: inline-block;
}

.order-table .product-description .item {
    font-size: 14px;
    margin-bottom: 5px;
    color: #666;
}

.order-table .last-row {
    position: relative;
}

.order-table [data-action=remove-item] {
    position: absolute;
    top: 5px;
    right: 0;
    margin: 0;
    color: #ec6262;
    font-size: 16px;
    padding: 0;
    background-color: transparent;
}

.order-table [data-action=remove-item]:hover {
    color: #d62727;
}

.order-table .product-quantity,
.order-table .product-cost-item {
    position: relative;
    display: inline-block;
}

.order-table .product-quantity input,
.order-table .product-cost-item input {
    float: left;
    max-width: 50px;
    position: relative;
    top: -10px;
    left: -5px;
}

.order-table .product-quantity select {
    float: left;
    max-width: 65px;
    position: relative;
    top: -10px;
    left: -5px;
}

.order-table .item-quantity-column {
    text-indent: 10px;
}

.status-table .payment-status-header,
.status-table .invoice-status-header,
.status-table .user-status-header {
    display: inline-block;
    position: relative;
}

.order-status-item .payment-status-header,
.order-status-item .invoice-status-header {
    display: block;
    position: relative;
    max-width: 150px;
}

.order-status-item .user-status-header {
    display: block;
    position: relative;
    width: calc(100% - 50px);
}

.status-table .user-assigned,
.status-table .paid-status,
.status-table .invoice-status,
.order-status-item .user-assigned,
.order-status-item .paid-status,
.order-status-item .invoice-status {
    padding: 10px 25px 10px 10px;
    font-size: 14px;
    border-radius: 5px;
    font-weight: 600;
    min-width: 100px;
    text-align: center;
    display: inline-block;
    position: relative;
    background-color: #eee;
    border: 1px solid #eee;
    color: #333;
}

.order-status-item .user-assigned,
.order-status-item .paid-status,
.order-status-item .invoice-status {
    display: block;
    padding: 10px;
}

.data-productie-container,
.notify-client-container,
.status-table .payment-type-container {
    position: absolute;
    background-color: #fff;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 2px 1px 7px #b9b9b9;
    top: 32px;
    left: 0;
    z-index: 2;
}

.data-productie-container {
    min-width: 165px;
}


.notify-client-container {
    min-width: 220px;
}

.client_notified {
    margin-right: 5px;
}

.productie-notes-notification-container {
    margin-right: 10px;
    position: relative;
    cursor: pointer;
}

.modal-dialog .productie-notes-notification-container {
    margin-right: 5px;
}

.productie-notes-notification-container.has-notes:after {
    width: 8px;
    height: 8px;
    position: absolute;
    content: " ";
    background-color: #ff0001;
    border-radius: 50%;
    left: -6px;
    top: -6px;
    box-shadow: 2px 2px 0px #5d0000;
    font-size: 9px;
    line-height: 11px;
}

.order-status .data-productie {
    position: absolute;
    right: -110px;
    color: #7c7c7c;
    font-size: 13px;
    top: 12px;
}

.order-status-item .order-status .data-productie {
    top: unset;
    font-size: 13px;
}

.modal-dialog .order-status .data-productie {
    right: -110px;
}

.order-status .data-productie i {
    margin-right: 5px;
}

.data-productie-container [data-viewport=label],
.notify-client-container [data-viewport=label] {
    font-weight: normal;
}

.status-table .user-assigned.unassigned {
    background-color: #eee;
    border: 1px solid #eee;
}

.status-table {
    padding-bottom: 10px;
    position: relative;
    z-index: 3;
}

.status-table .order-status-item {
    vertical-align: top;
    font-size: 14px;
    text-align: left;
    color: #000;
    width: 21.3%;
    float: left;
}

.status-table .order-status-item:first-of-type {
    width: 35%;
}

.status-table .order-status-header {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 560;
}

.status-table tr:first-of-type td {
    vertical-align: top;
}

.status-table td {
    vertical-align: top;
    text-align: left;
    color: #333;
    font-size: 14px;
    vertical-align: middle;
    padding-top: 10px;
}


.status-table .user-assigned .editable,
.status-table .invoice-status .editable,
.status-table .paid-status .editable {
    position: absolute;
    right: 5px;
    color: #000;
    top: 5px;
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
}

.status-table .editable:hover {
    color: inherit;
    opacity: .8;
}

.status-table:after {
    clear: both;
    display: block;
    content: " ";
}

.order-product-details-container .total-price-container {
    text-align: right;
    font-size: 14px;
    border-top: 1px solid #ccc;
    padding-top: 20px;
}

.order-product-details-container .total-price-container .value {
    font-weight: 600;
    color: #000;
    width: 153px;
    display: inline-block;
    margin-left: 55px;
    text-align: left;
}

.order-product-details-container .total-price-container label.inline {}


.data-productie-container .title,
.payment-type-container .title {
    font-size: 16px;
    margin-top: 5px;
    margin-bottom: 10px;
}

.data-productie-container .type {
    margin-top: 5px;
    text-align: left;
    position: relative;
}

.data-productie-container #ui-datepicker-div {
    left: 0 !important;
    top: 25px !important;
    display: block !important;
    position: absolute !important;
}

.data-productie-container .buttons {
    margin-top: 10px;
    text-align: right;
}

.payment-type-container .type {
    margin-top: 5px;
}

.data-productie-container .type input,
.data-productie-container .type label {
    color: #7c7c7c;
    cursor: pointer;
}

.payment-type-container .type input[type=radio],
.payment-type-container .type label {
    cursor: pointer;
}

[data-viewport=payment-date] {
    margin-top: 10px;
}

.payment-type-container .buttons {
    margin-top: 10px;
}

.payment-type-container .buttons:after {
    clear: both;
    display: block;
    content: " ";
}

.notify-client-container .buttons {
    display: inline-block;
}

.notify-client-container .buttons button,
.payment-type-container .buttons button {
    text-align: center;
}

.data-productie-container .buttons button,
.notify-client-container .buttons button {
    border-color: transparent;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 10px;
    font-family: inherit;
    font-weight: 600;
    color: #333;
}

.data-productie-container .buttons button[data-action=save],
.notify-client-container .buttons button[data-action=save],
.payment-type-container button[data-action=save] {
    background-color: #ced9bd;
    color: #000;
}

.data-productie-container button.disabled,
.notify-client-container button.disabled,
.payment-type-container button.disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* end modal order details */

/* add product */
.add-product-container {
    float: left;
    position: relative;
    top: -27px;
    z-index: 1;
}

.add-product-container:after {
    clear: both;
    content: " ";
    display: block;
}

.add-product-container [data-viewport=body] {
    position: relative;
}

.autocomplete-product-container {
    display: inline-block;
    min-width: 220px;
}

.autocomplete-product-container .lds-ring {
    right: -3px;
    top: -1px;
    left: unset;
}

.autocomplete-product-container [data-action=product-search] {
    width: 100%;
}

.autocomplete-product-container [data-action=close-autocomplete] {
    position: absolute;
    right: 0;
    top: 2px;
    background-color: #ced9bd;
    height: 33px;
    width: 30px;
    border-radius: 0 5px 5px 0;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 34px;
    cursor: pointer;
    color: #333;
}

.product-description textarea {
    width: 387px;
    max-width: 387px;
    min-width: 387px;
    height: 80px;
    max-height: 80px;
    min-height: 80px;
}

.select-tip-produs-container {
    display: block;
    width: 134px;
    position: absolute;
    left: 10px;
    box-shadow: 1px 1px 3px #838383;
    border-radius: 5px;
    overflow: hidden;
}

.select-tip-produs-container button {
    margin: 0 !important;
    background-color: #fff;
    display: block;
    width: 100%;
    border-radius: 0 !important;
}

.add-product-container button.disabled {
    opacity: .3;
    cursor: not-allowed;
}

.select-tip-produs-container button:hover {
    background-color: #eee;
}

@keyframes animProdusGeneric {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

.select-tip-produs-container.animate {
    animation: .5s animProdusGeneric forwards;
}

[data-viewport=autocomplete-list] {
    position: absolute;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    background-color: #fff;
    box-shadow: 0px 1px 5px #b1afaf;
    border-radius: 5px;
    min-width: 450px;
}

[data-viewport=autocomplete-list] .list-item {
    padding: 5px 5px 5px 5px;
    font-size: 14px;
    cursor: pointer;
    border-bottom: 1px solid #ccc;
    display: block;
    background-color: #fff;
    transition: all .2s;
}

[data-viewport=autocomplete-list] .list-item:hover {
    background-color: #eee;
}

[data-viewport=autocomplete-list] .list-item:after {
    clear: both;
    content: " ";
    display: block;
}

[data-viewport=autocomplete-list] .list-item img {
    float: left;
    width: 60px;
    height: auto;
}

[data-viewport=autocomplete-list] .list-item .value {
    margin-left: 10px;
    width: calc(100% - 70px);
    float: right;
    padding-top: 2%;
    text-transform: capitalize;
}

[data-viewport=autocomplete-list] .list-item .price {
    margin-left: 10px;
    width: calc(100% - 70px);
    float: right;
    padding-top: 2%;
    font-weight: 600;
}

[data-viewport=autocomplete-list] .list-item .price .price-description {
    margin-left: 10px;
    font-size: 12px;
}

.item-variation {
    float: left;
    font-size: 12px;
    padding: 5px !important;
    margin-left: 5px !important;
    margin-bottom: 5px;
}


#ui-datepicker-div {
    z-index: 11 !important;
}