@tailwind base;
@tailwind components;
@tailwind utilities;

* {
    font-family: "Nunito", sans-serif;
    font-weight: 400;
}

html, body {
    background-color: #F6F6FA;
}

body {
    font-family: "Nunito", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    color: #000;
    background-color: #F6F6FA;
}

a {
    text-decoration: unset;
}


.loginContainer {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    height: calc(100vh - 200px);
    margin-bottom: 100px;
}


.loginContainer form {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    height: 500px;
    justify-content: center;
    margin-top: auto;
    margin-bottom: auto;
    min-width: 500px;
    align-items: center;
    border-radius: 5px;
    border: 1px solid #d2d2d2;
    text-align: center;
}

.titluFormular {
    margin-bottom: 40px;
    font-size: 18px;
    font-weight: 600;
}

.loginContainer form > *:not(.btnWrapper) {
    width: 70%;
}

.passWrapper {
    position: relative;
}

#toggle-password {
    position: absolute;
    right: 13px;
    top: 17px;
}

#password {
    width: 100%;
}

.loginContainer form input {
    width: 100%;
    height: 48px;
    border: 1px solid #7990FB;
    outline: none;
    color: #807182;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif !important;
    border-radius: 8px;
    padding: 0 20px;
}

.generalBtn {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background-color: #FF6027;
    padding: 0 70px;
    width: 100%;
    height: 50px;
    border-radius: 8px;
    border: 1px solid #FF6027;
    font-size: 14px;
    font-weight: 500;
    color: red;
    cursor: pointer;
}

.customButton {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background-color: #FF6027;
    padding: 0 70px;
    width: 100%;
    height: 50px;
    border-radius: 8px;
    border: 1px solid #FF6027;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
}

.loginContainer form span {
    text-align: left;
    color: red;
    width: 70%;
    display: block;
}

.clientRow {
    display: flex;
    column-gap: 30px;
    align-items: center;
}

.dashboardContainer {
    min-height: calc(100vh - 60px);
    margin: 30px;
    background: #F6F6FA;
}

.menuDashboard {
    width: 230px;
    height: 100%;
    /* background-color: #565656; */
    border-radius: 15px;
    padding: 28px 15px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.header-wrapper:not(.show) .menuDashboard {
    width: 50px;
}

.header-wrapper:not(.show) .header-container {
    width: 50px;
}

.header-wrapper.show .menuDashboard {
    padding: 28px 25px;
}

.menuLinks {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    margin-top: 40px;
    height: 100%;
}

.dashboardContainer {
    display: flex;
    column-gap: 10px;
}

/* .dashboardContainer:has(.header-wrapper:not(.show)) .rightDashboard{
  margin-left: 70px;
} */
.rightDashboard {
    width: 100%;
    margin-bottom: 40px;
}

.clientRow, .clientsHeaders {
    padding: 10px 25px;
}

/* .clientRow:nth-of-type(2n){
  background-color: #e3e3e3;
}
.clientRow:nth-of-type(2n+1){
  background-color: white;
} */
.clientRow {
    border-top: 0.5px solid #E2E8F0;
}

.clientsHeaders {
    display: flex;
    column-gap: 30px;
    background-color: white;
    padding-top: 0px;
}

.clientsHeader:not(:has(.ascDescFilter)) {
    display: flex;
    flex-direction: column;
    row-gap: 18px;
}

.clientsHeader:nth-of-type(1), .clientRow > div:nth-of-type(1) {
    width: 10%;
    text-align: center;
}

.clientsHeader:nth-of-type(2), .clientRow > div:nth-of-type(2) {
    width: 24%;
}

.clientsHeader:nth-of-type(3), .clientRow > div:nth-of-type(3) {
    width: 10%;
}

.clientsHeader:nth-of-type(4), .clientRow > div:nth-of-type(4) {
    width: 15%;
}

.clientsHeader:nth-of-type(5), .clientRow > div:nth-of-type(5) {
    width: 10%;
}

.clientsHeader:nth-of-type(6), .clientRow > div:nth-of-type(6) {
    width: 10%;
}

.clientsHeader:nth-of-type(7), .clientRow > div:nth-of-type(7) {
    width: 10%;
}

.clientRow > div:nth-of-type(6), .clientRow > div:nth-of-type(7) {
    text-align: center;
}

.menuLinks a {
    padding: 15px 15px;
    /* margin-bottom: 15px; */
    color: white !important;
    transition: 300ms;
    margin-left: -15px;
    margin-right: -15px;
    display: flex;
    column-gap: 10px;
    font-size: 14px;
}

.header-wrapper.show .menuLinks a {
    padding: 15px 25px;
    margin-left: -25px;
    margin-right: -25px;
}

.header-wrapper:not(.show) .menuGroupItem a span {
    display: none;
}

.header-wrapper.show .menuGroupItem a span {
    display: block;
}

.menuLinks a:hover {
    background-color: white;
    color: #565656 !important;
}

.menuLinks a img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.menuLinks a:hover img {
    filter: brightness(0) saturate(100%) invert(34%) sepia(4%) saturate(14%) hue-rotate(336deg) brightness(91%) contrast(85%);
    -webkit-filter: brightness(0) saturate(100%) invert(34%) sepia(4%) saturate(14%) hue-rotate(336deg) brightness(91%) contrast(85%);
}

.clientsTitle {
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 25px;
    padding-top: 15px;
}

nav[role="navigation"] {
    margin-top: 40px;
    text-align: right;
}

.bluePag img {
    filter: brightness(0) saturate(100%) invert(23%) sepia(70%) saturate(4793%) hue-rotate(217deg) brightness(97%) contrast(114%);
    -webkit-filter: brightness(0) saturate(100%) invert(23%) sepia(70%) saturate(4793%) hue-rotate(217deg) brightness(97%) contrast(114%);
}

.loginContainer form > img {
    max-width: 215px;
    height: 100px;
    object-fit: cover;
}

.clientsFilters {
    display: flex;
    align-items: center;
    column-gap: 30px;
    margin-bottom: 35px;
}

/* .clientFilter{
  display: flex;
    align-items: center;
    column-gap: 10px;
    position: relative;
    width: max-content;
} */
.clientFilter .selectedCity {
    flex-shrink: 0;
}

.clientFilter select, .clientFilter .citySearch, .statusCard select, .offerAgent select {
    width: 100%;
    height: 34px;
    border: 1px solid #7990FB;
    outline: none;
    color: #807182;
    font-size: 14px;
    border-radius: 8px;
    padding: 0 20px;
    position: relative;
    display: flex;
    align-items: center;
    transition: all .3s;
}

.clientFilter .citySearch {
    margin-right: 20px;
}

.clientFilter select, .addClientForm select, .statusCard select, .offerAgent select {
    appearance: none;
    -webkit-appearance: none;
}

.clientFilter:has(.countryClients)::after, .inputWrap:has(select)::after, .statusCard:has(select)::after, .offerAgent:has(select)::after {
    content: '';
    background-image: url(../images/arrow-down.svg);
    width: 15px;
    height: 8px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    position: absolute;
    right: 20px;
    top: 21px;
}

.inputWrap:has(select)::after {
    top: 50px;
}

.list-group {
    max-height: 400px;
    overflow-y: scroll;
}

.selectedCity {
    background-color: #FF6027;
    padding: 8px 15px;
    border-radius: 5px;
    color: white;
    font-size: 12px;
    cursor: pointer;
}

.selectedCity::after {
    content: 'x';
}

.searchDiv {
    position: absolute;
    z-index: 100;
    top: 48px;
    width: 100%;
}

.addClientButton {
    background-color: #FF6027;
    width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    height: 48px;
    color: white;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    position: absolute;
    top: 2px;
    right: 0px;
    column-gap: 5px;
}

.addClientButton:hover {
    color: white;
}

.submitClient {
    background-color: #FF6027;
    width: 275px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    height: 50px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
    position: absolute;
    bottom: 30px;
}

.addClientForm .submitClient {
    position: relative;
    bottom: 0px;
}

.clientRec, .generateAwb {
    background-color: #FF6027;
    width: 175px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    height: 48px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.stergeComanda {
    background-color: red;
    border: unset;
    outline: unset;
}

.addBtnContainer {
    width: fit-content;
    display: inline-flex;
}

.addClientForm input:not(.dropdown-container), .addClientForm select, .awbForm input, .awbForm select {
    width: 100%;
    height: 50px;
    border: 1px solid #D0D0D5;
    outline: none;
    color: #807182;
    font-size: 14px;
    border-radius: 8px;
    padding: 0 20px;
    position: relative;
    display: flex;
    align-items: center;
    transition: all .3s;
    background-color: white !important;
}

.addClientForm select:disabled {
    background-color: #dbdbdb !important;
}

.addClientForm .select2, .addClientForm .select2-selection {
    min-height: 50px !important;
    border: 1px solid #D0D0D5;
    outline: none;
    color: #807182;
    font-size: 14px;
    border-radius: 8px;
    position: relative;
    padding-bottom: 0px;

}

.addClientForm .select2-selection {
    display: flex;
    align-items: center;
    padding: 0 20px;
}

.addClientForm .select2Wrapper span {
    padding-bottom: 0px;
}

.addClientForm .select2Wrapper .select2-container .select2-selection {
    padding-right: 45px;
    padding-left: 15px;
    overflow-x: auto;
}

.addClientForm .select2Wrapper .select2-container .select2-selection .select2-search {
    padding-top: 10px;
}

.addClientForm .select2Wrapper .select2-search {
    display: flex;
    height: 50px;
    align-items: center;
}

.addClientForm .select2-container .select2-search--inline .select2-search__field {
    margin-top: 0px;
}

body .clientOrdersFilters .labelAndSearch input, body .clientCommunicationFilters .labelAndSearch input {
    width: 100%;
    height: 35px;
    border: 1px solid #D0D0D5;
    outline: none;
    color: #807182;
    font-size: 14px;
    border-radius: 8px;
    padding: 0 10px;
    position: relative;
    display: flex;
    align-items: center;
    transition: all .3s;
}

.addClientForm form, .clientAddress {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    column-gap: 2%;
    row-gap: 10px;
}

.addClientForm form {
    height: 100%;
    align-content: flex-start;
}

.clientAddress > span {
    width: 100%;
    padding-top: 40px;
    padding-bottom: 15px;
    font-size: 18px;
    font-weight: 400;
}

.addClientForm label {
    margin-bottom: 5px;
}

.dashboardContent {
    position: relative;
}

.dashboardHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 85%;
    margin: 0;
}

@media (max-width: 1400px) {
    .dashboardHeader {
        width: 50%;
    }
}

.addClientForm {
    background: white;
    padding: 30px;
    border-radius: 5px;
    margin-bottom: 40px;
    z-index: 9;
}

.awbForm {
    background: white;
    padding: 30px;
    border-radius: 5px;
    margin-bottom: 40px;
    z-index: 9;
    position: absolute;
    height: calc(100vh - 60px);
    top: 0px;
    width: 100%;
}

.addClientForm.edit {
    height: 100%;
    padding-left: 0px;
    padding-right: 0px;
    background-color: transparent;
}

.errorsList {
    display: flex;
    flex-direction: column;
    row-gap: 2px;
    margin-bottom: 20px;
    color: red;
    width: 100%;
}

.clientAddress .clientFilter, .clientAddress .clientFilter * {
    width: 100%;
}

.clientAddress .clientFilter .selectedCity {
    width: auto
}

.clientEdit {
    cursor: pointer;
}

.closeButton img {
    position: absolute;
    right: 25px;
    width: 30px;
    /* top: 15px; */
    top: 25px;
    cursor: pointer;
    z-index: 999;
}

.editContainer {
    position: absolute;
    height: calc(100vh - 60px);
    top: 0px;
    width: 100%;
}

/* Pagination */
.table-pagination {
    position: absolute;
    bottom: -35px;
    right: 0px;

}

.pagination-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.pagination-container {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.pag-left-arrow,
.pag-right-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 7px;
    background-color: transparent;
    border-radius: 100px;
    transition: all .3s;
    cursor: pointer;
}

.pag-left-arrow:hover,
.pag-right-arrow:hover {
    background-color: #e1e5fc;
}

.pag-left-arrow span,
.pag-right-arrow span {
    display: inline-block;
    width: 10px;
    height: 5px;
    cursor: pointer;
    filter: invert(41%) sepia(94%) saturate(0%) hue-rotate(177deg) brightness(101%) contrast(99%);
}

.pag-left-arrow span {
    background: url('../images/arrow-down.svg') center no-repeat;
    rotate: 90deg;
}

.pag-right-arrow span {
    background: url('../images/arrow-down.svg') center no-repeat;
    rotate: -90deg;
}

.pagination-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* gap: 10px; */
    margin: 0 10px;
}

.pagination {
    font-size: 12px;
    color: #808080;
    cursor: pointer;
    padding: 2px 5px;
}

.pagination.pagination-active {
    color: #000;
    font-weight: 700;
}

.menuDashboard img {
    width: 100%;
}

.menuDashboard > a > img {
    max-width: 55px;
    height: 55px;
    object-fit: contain;
}

.header-wrapper.show .menuDashboard > a > img {
    max-width: unset;
}

.menuGroupTitle {
    font-size: 14px;
    color: white;
    margin-bottom: 21px;
}

.menuLinks > a {
    margin-top: auto;
}

.menuLinkGroup:not(:first-of-type) {
    margin-top: 25px;
}

/* Dropdown */
.dropdown-input-search-container {
    width: 100%;
    padding: 0px 15px;
    margin-bottom: 10px;
}

.dropdown-input-search {
    width: 100%;
    height: 34px;
    border: 1px solid #7990FB;
    outline: none;
    color: #807182;
    font-size: 13px;
    border-radius: 8px;
    padding: 0px 13px;
}

.dropdown-container, .editableInput {
    width: 10rem;
    height: 34px;
    border: 1px solid #B3BDCC;
    outline: none;
    color: #000000;
    font-size: 14px;
    border-radius: 4px;
    padding: 0px 13px;
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all .3s;
}

.dropdown-input-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.dropdown-img {
    background: url('/siteStorage/icons/arrow-down.svg') center no-repeat;
    width: 15px;
    height: 8px;
}

.dropdown_list {
    position: absolute;
    right: 0;
    left: 0;
    top: 54px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 325px;
    padding: 7px 0px;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0px 0px 10px 0px #0000001A;
    z-index: 99999;
}

.list-item {
    width: 100%;
    transition: all .3s;
    padding: 5px 15px;
    text-align: left;
}

.list-item:hover {
    background-color: #e1e5fc;
}

/* end of dropdown */

.clientsHeader:has(.ascDescFilter) {
    display: flex;
    align-items: flex-start;
    column-gap: 10px;
    justify-content: center;
}

.descFilter, .ascFilter {
    cursor: pointer;
}

.clientsList {
    background: white;
    padding-top: 25px;
    padding-bottom: 25px;
}

.ascDescFilter > div {
    height: 8px;
}

.ascDescFilter {
    margin-top: -6px;
    display: flex;
    flex-direction: column;
    row-gap: 5px;
}

.clientsHeader span, .clientsHeader:has(.ascDescFilter), .clientsHeader:last-of-type {
    font-size: 14px;
    color: #98A6BA;
}

.clientCountry, .clientCity {
    color: #1B89FC;
}

.clientRow > div {
    font-size: 16px;
}

.clientRow > div:first-of-type, .clientRow > div:nth-of-type(2), .clientRow > div:nth-of-type(3) {
    font-weight: 600;
}

.clientActions {
    display: flex;
    justify-content: center;
    column-gap: 10px;
    align-items: center;
}

.clientEdit img, .clientEdit i {
    border: 1px solid #FF6027;
    border-radius: 10px;
    padding: 8px;
    width: 42px;
    height: 42px;
    font-size: 24px;
    color: #FF6027;
    text-align: center;
}

.clientsList {
    border-radius: 5px;
}

.notificationsContainer {
    position: absolute;
    top: 15px;
    right: 20px;
    display: flex;
    flex-direction: column;
    row-gap: 15px;
}

.notification {
    background-color: white;
    padding: 12px 20px;
    border-radius: 5px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    transition: opacity 0.5s ease;
}

.notification.hidden {
    opacity: 0;
    display: none;
}

.clientContainer .editContainer > .closeButton {
    display: none;
}

.notification a {
    color: #FF6027;
}

.clientTop {
    font-size: 25px;
    font-weight: 700;
    display: flex;
    column-gap: 30px;
    align-items: center;
    margin-bottom: 25px;
}

.clientTopInfo {
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    column-gap: 10px;
}

.clientCard {
    width: 15%;
    border-radius: 6px;
    background: white;
    padding: 10px 15px;
}

.clientCardTop {
    font-size: 14px;
    font-weight: 600;
}

.clientCardValue {
    font-size: 22px;
    font-weight: 800;
    margin-top: 10px;
    margin-bottom: 5px;
    line-height: 22px;
}

.clientCardValue span {
    font-size: 12px;
    font-weight: 700;
}

.clientCardDetails {
    display: flex;
    flex-direction: column;
    color: #A1A1A1;
    font-size: 14px;
}

.clientCardDetails span {
    font-size: 11px;
    color: #0E9A21;
    font-weight: 500;
}

.clientCards {
    display: flex;
    column-gap: 20px;
    margin-bottom: 20px;
}

.clientCardBigger {
    width: 19%;
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.clientPhone, .clientEmail {
    height: 52px;
    background: white;
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 10px 15px;
    column-gap: 12px;
}

.clientCardBigger * {
    font-size: 16px;
    font-weight: 700;
    color: #010102;
    cursor: pointer;
}

.checkLivrate.active .checkWrapper {
    background-color: #FF6027;
    border-color: #FF6027;
}

.checkWrapper {
    width: 30px;
    height: 30px;
    background-color: white;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 300ms;
    border: 1px solid #B3BDCC;
}

.clientOrdersTable {
    /*width: 72%;*/
    background: white;
    padding-bottom: 20px;
    display: inline-flex;
    flex-direction: column;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.clientCommunication {
    width: 100%;
    display: inline-flex;
    flex-direction: column;
    background: white;
    padding-bottom: 30px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.clientOrdersTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* column-gap: 25px; */
    column-gap: 2rem;
    background: #DFDFDF;
    padding: 15px 25px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    width: 100%;
    height: 60px;
}

.checkLivrate {
    display: flex;
    column-gap: 10px;
    align-items: center;
}

.clientOrders {
    position: relative;
    width: 100%;
    padding-bottom: 30px;
}

.clientOrders .table-pagination {
    bottom: -10px;
    right: 10px;
}

.clientOrder {
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: 0.5px solid #E2E8F0;
    padding-left: 25px;
    padding-right: 25px;
}

.clientOrder:last-of-type {
    margin-bottom: 30px;
}

.labelAndSearch {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.clientOrdersFilters > div:first-of-type, .clientOrder > div:first-of-type {
    width: 11%;
}

.clientOrdersFilters > div:nth-of-type(2), .clientOrder > div:nth-of-type(2) {
    width: 7%;
}

.clientOrdersFilters > div:nth-of-type(3), .clientOrder > div:nth-of-type(3) {
    width: 12%;
}

.clientOrdersFilters > div:nth-of-type(4), .clientOrder > div:nth-of-type(4) {
    width: 10%;
}

.clientOrdersFilters > div:nth-of-type(5), .clientOrder > div:nth-of-type(5) {
    width: 9%;
}

.clientOrdersFilters > div:nth-of-type(6), .clientOrder > div:nth-of-type(6) {
    width: 4%;
    text-align: center;
    position: relative;
}

.clientOrdersFilters > div:nth-of-type(7), .clientOrder > div:nth-of-type(7) {
    width: 11%;
}

.clientOrdersFilters > div:nth-of-type(8), .clientOrder > div:nth-of-type(8) {
    width: 10%;
}

.clientOrdersFilters > div:nth-of-type(9), .clientOrder > div:nth-of-type(9) {
    width: 10%;
}

.clientOrdersFilters, .samplesFilters {
    display: flex;
    column-gap: 30px;
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: 0.5px solid #E2E8F0;
    width: max-content;
}

.clientOrdersFilters {
    column-gap: 20px;
}

.color {
    width: 20px;
    height: 20px;
    border-radius: 50px;
}

.statusWrap {
    padding: 5px 15px;
    width: fit-content;
    border-radius: 5px;
    font-size: 14px;
}

.clientOrder {
    display: flex;
    /* column-gap: 30px; */
    column-gap: 20px;
    align-items: center;
}

.tooltipColor, .tooltipCanal, .tooltipActions, .tooltipInteractions {
    display: none;
}

div:has(.hiddenContent) {
    padding-bottom: 0px;
    height: fit-content;
}

div:has(.hiddenContent) > .clientOrdersTop {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.hideClientOrders img {
    transition: 300ms;
    cursor: pointer;
}

.hideClientOrders {
    margin-left: auto;
}

.ordersAndCommunication {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.clientCommunicationFilters, .historyOffer {
    display: flex;
    column-gap: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

.clientCommunicationFilters > div:first-of-type, .historyOffer > div:first-of-type {
    width: 132px;
}

.clientCommunicationFilters > div:nth-of-type(2), .historyOffer > div:nth-of-type(2) {
    width: 100px;
}

.clientCommunicationFilters > div:nth-of-type(3), .historyOffer > div:nth-of-type(3) {
    width: 190px;
}

.clientCommunicationFilters > div:nth-of-type(4), .historyOffer > div:nth-of-type(4) {
    width: 85px;
    text-align: right;
    justify-content: flex-end;
}

.clientCommunication .table-pagination {
    bottom: -10px;
    position: relative;
}

.clientCommunication .table-pagination .pagination-wrapper {
    justify-content: flex-end;
}

.historyOffer {
    padding-top: 10px;
    border-bottom: 0.5px solid #E2E8F0;
    padding-bottom: 10px;
    align-items: center;
}

.clientCommunicationFilters {
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: 0.5px solid #E2E8F0;
}

.clientCommunicationFilters .labelAndSearch {
    font-size: 14px;
    color: #98A6BA;
}

.clientCommunicationFilters input {
    font-size: 12px;
    color: #98A6BA;
}

.clientOrdersTitle {
    font-size: 18px;
    font-weight: 700;
    margin-right: auto;
}

.historyCanal {
    color: #3B86FF;
    /* border: 1px solid #3B86FF; */
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    text-align: center;
    padding: 4px;
}

.historyMore {
    display: flex;
    column-gap: 3px;
}

.historyMore img {
    cursor: pointer;
}

.clientCommunicationFilters > div:nth-of-type(4) {
    justify-content: flex-start;
}

.historyOffer > div:first-of-type {
    font-size: 14px;
}

.clientOrder > div:first-of-type {
    color: #1B89FC;
    font-size: 15px;
    font-weight: 600;
}

.clientOrder > div:nth-of-type(2) {
    font-size: 15px;
    font-weight: 600;
}

.clientOrder > div:nth-of-type(3) {
    font-size: 14px;
}

.clientOrder > div:nth-of-type(4) {
    font-size: 16px;
    font-weight: 600;
    color: #FF6027;
}

.offerColor, .sampleColor, .historyCanal, .showInteractions {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tooltipColor, .tooltipCanal, .tooltipActions, .tooltipInteractions {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -120%);
    width: max-content;
    background: white;
    box-shadow: 0px 0px 10px 0px #0000001A;
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
}

.containerClientDetails {
    width: 100%;
    display: flex;
    flex-direction: row;
    column-gap: 2%;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-bottom: 40px;
}

.containerClientDetails .hideClientOrders {
    margin-left: auto;
}

.containerClientDetails form {
    padding: 20px 25px;
    background: white;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    height: auto;
}

.buttonWrap {
    width: 100%;
}

.buttonWrap .submitClient {
    position: unset;
}

.oneAddress > div:first-of-type {
    width: 14%;
}

.oneAddress > div:nth-of-type(2) {
    width: 11.7%;
}

.oneAddress > div:nth-of-type(3) {
    width: 7.88%;
}

.oneAddress > div:nth-of-type(4) {
    width: 13.5%
}

.oneAddress > div:nth-of-type(5) {
    width: 52%
}

.oneAddress {
    display: flex;
    padding: 25px;
    align-items: center;
    height: 80px;
    background-color: white;
}

.oneAddress:nth-of-type(2n+1) {
    background-color: #F3F9FF;
}

.addressesAndForm {
    width: 100%;
    background-color: white;
}

.addressesAndForm .searchDiv {
    top: 80px;
}

.addressesContainer .buttonWrap {
    padding-top: 25px;
    padding-bottom: 30px;
    padding-left: 25px;
    padding-right: 25px;
}

.addressActions {
    display: flex;
    width: max-content;
    column-gap: 10px;
}

.addressActions div {
    width: 100%;
}

.addressActions img {
    cursor: pointer;
}

.offerManual img {
    width: 25px;
    height: 25px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(59%) sepia(90%) saturate(4434%) hue-rotate(202deg) brightness(100%) contrast(103%);
    -webkit-filter: brightness(0) saturate(100%) invert(59%) sepia(90%) saturate(4434%) hue-rotate(202deg) brightness(100%) contrast(103%);
    cursor: pointer;
}

.offerManual .tooltipColor {
    flex-direction: column;
    row-gap: 7px;
    transform: translate(-50%, -95%);
    padding: 15px 30px;
}

.tooltipColor a img {
    width: 20px;
    height: 20px;
}

.historyContext {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.historyContext > p {
    margin-bottom: 0px;
}

.historyContext.expandedContext {
    display: block;
    width: 100% !important;
}

.historyOffer:has(.expandedContext) .historyMore .arrowMore {
    transform: rotate(0deg) !important;
}

.addClientForm:not(.edit) {
    display: none;
}

.deleteConfirm {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    position: absolute;
    background-color: #ffffff;
    border: 1px solid #ccc;
    padding: 10px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 999;
}

.deleteConfirm.show {
    opacity: 1;
    transform: translateY(0);
}

.sampleRow, .prospectRow {
    display: flex;
    column-gap: 30px;
    align-items: center;
    /* border-top: 0.5px solid #E2E8F0; */
    padding: 10px 25px;
    height: 70px;
    position: relative;
    width: max-content;
}

.prospectName {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    white-space: normal;
}


.clientRow .clientOrders {
    padding-bottom: 0px;
}

.sampleHeader:nth-of-type(1), .sampleRow > div:nth-of-type(1) {
    width: 75px;
}

.sampleHeader:nth-of-type(2), .sampleRow > div:nth-of-type(2) {
    width: 150px;
}

.sampleHeader:nth-of-type(3), .sampleRow > div:nth-of-type(3) {
    width: 250px;
}

.sampleHeader:nth-of-type(4), .sampleRow > div:nth-of-type(4) {
    width: 200px;
}

.sampleHeader:nth-of-type(5), .sampleRow > div:nth-of-type(5) {
    width: 175px;
}

.sampleHeader:nth-of-type(6), .sampleRow > div:nth-of-type(6) {
    width: 200px;
}

.sampleHeader:nth-of-type(7), .sampleRow > div:nth-of-type(7) {
    width: 275px;
}

.sampleHeader:nth-of-type(8), .sampleRow > div:nth-of-type(8) {
    width: 175px;
}

.sampleHeader:nth-of-type(9), .sampleRow > div:nth-of-type(9) {
    width: 225px;
}

.sampleHeader:nth-of-type(10), .sampleRow > div:nth-of-type(10) {
    width: 30rem;
    /* text-align: center; */
}

.sampleHeader:nth-of-type(11), .sampleRow > div:nth-of-type(11) {
    width: 175px;
}

.sampleHeader:nth-of-type(12), .sampleRow > div:nth-of-type(12) {
    width: 150px;
    min-height: 20px;
}

.sampleHeader:nth-of-type(12), .sampleRow > div:nth-of-type(12) {
    width: 160px;
    /* text-align: center; */
}

.sampleHeader:nth-of-type(13), .sampleRow > div:nth-of-type(13) {
    width: 190px; /* delivery date */
}

.sampleHeader:nth-of-type(14), .sampleRow > div:nth-of-type(14) {
    width: 190px; /* recontact #1 */
}

.sampleHeader:nth-of-type(15), .sampleRow > div:nth-of-type(15) {
    width: 190px; /* recontact #2 */
}

.offersTable .sampleHeader:nth-of-type(2), .offersTable .sampleRow > div:nth-of-type(2) {
    width: 150px;
}

.offersTable .sampleHeader:nth-of-type(3), .offersTable .sampleRow > div:nth-of-type(3) {
    width: 250px;
}

.offersTable .sampleHeader:nth-of-type(4), .offersTable .sampleRow > div:nth-of-type(4) {
    width: 150px;
}

.offersTable .sampleHeader:nth-of-type(5), .offersTable .sampleRow > div:nth-of-type(5) {
    width: 250px;
    text-align: unset;
}

.offersTable .sampleHeader:nth-of-type(6), .offersTable .sampleRow > div:nth-of-type(6) {
    width: 250px;
}

.offersTable .sampleHeader:nth-of-type(7), .offersTable .sampleRow > div:nth-of-type(7) {
    width: 150px;
}

.offersTable .sampleHeader:nth-of-type(8), .offersTable .sampleRow > div:nth-of-type(8) {
    width: 200px;
    display: flex;
    column-gap: 10px;
}

.offersTable .sampleHeader:nth-of-type(9), .offersTable .sampleRow > div:nth-of-type(9) {
    width: 200px;
}

.offersTable .sampleHeader:nth-of-type(10), .offersTable .sampleRow > div:nth-of-type(10) {
    width: 15rem;
    text-align: left;
}

.offersTable .sampleHeader:nth-of-type(11), .offersTable .sampleRow > div:nth-of-type(11) {
    width: 150px;
    text-align: unset;
}

.offersTable .sampleHeader:nth-of-type(12), .offersTable .sampleRow > div:nth-of-type(12) {
    width: 200px;
}

.samplesTable, .prospectsTable {
    /* padding-top: 25px; */
    background-color: white;
    border-radius: 5px;
    /* max-width: 1612px; */
    max-width: unset;
}

.sampleHeader {
    font-size: 14px;
    color: #98A6BA;
    padding-bottom: 10px;
    /* flex-shrink: 0; */
}

.statusCard {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border-radius: 5px;
    font-size: 14px;
    min-width: 110px;
    width: fit-content;
    height: 34px;
}

.statusCard * {
    height: 100% !important;
}

.prospectEmail {
    width: 100%;
}

.prospectEmail * {
    color: #1B89FC;
}

.prospectPhone {
    display: flex;
    align-items: center;
    column-gap: 10px;
}

.prospectPhone * {
    color: #FF6027;
}

.prospectPhone .tooltipInteractions {
    transform: translate(55%, -80%);
}

.sampleType {
    color: #FF6027;
}

.samplesTable .clientOrdersTop {
    margin-bottom: 5px;
}

.sampleColors {
    display: flex;
    column-gap: 15px;
}

.offerAttachment img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(59%) sepia(90%) saturate(4434%) hue-rotate(202deg) brightness(100%) contrast(103%);
    -webkit-filter: brightness(0) saturate(100%) invert(59%) sepia(90%) saturate(4434%) hue-rotate(202deg) brightness(100%) contrast(103%);
}

.awbForm form {
    display: flex;
    flex-wrap: wrap;
    column-gap: 2%;
    margin-top: 30px;
}

.awbFormWrap {
    height: calc(100% - 80px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.awbForm .clientsTitle {
    padding-left: 0px;
    padding-top: 0px;
}

.awbForm select {
    appearance: none;
    -webkit-appearance: none;
}

.awbForm label {
    margin-bottom: 5px;
}

.actionsAwb > *, .actionsOffer > * {
    cursor: pointer;
}

.actionsAwb, .actionsOffer {
    display: flex;
    flex-direction: row;
    column-gap: 10px;
}

.offerAgent {
    cursor: pointer;
}

.statusCard:has(select), .offerAgent:has(select) {
    background-color: unset !important;
    padding: 0px !important;
    position: relative;
}

.statusCard:has(select)::after, .offerAgent:has(select)::after {
    right: 10px;
    top: 14px;
}

.prospectsTable .prospectHeader:nth-of-type(1), .prospectRow > div:nth-of-type(1) {
    width: 22%;
}

.prospectsTable .prospectHeader:nth-of-type(2), .prospectRow > div:nth-of-type(2) {
    width: 20%;
}

.prospectsTable .prospectHeader:nth-of-type(3), .prospectRow > div:nth-of-type(3) {
    width: 22%;
}

.prospectsTable .prospectHeader:nth-of-type(4), .prospectRow > div:nth-of-type(4) {
    width: 30%;
}

.offersFiltersAndOffer {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* max-height: 685px; */
    /* overflow-y: auto; */
}

/* .sampleRow > div{
  flex-shrink: 0;
} */
.lineSep {
    position: absolute;
    bottom: 0px;
    border-bottom: 0.5px solid #E2E8F0;
    width: 100% !important;
    left: 0px;
}

.sampleRow > div {
    width: max-content;
    flex-shrink: 0;
}

.sampleHeader {
    width: max-content;
    flex-shrink: 0;
}

.prospectsTable .samplesFilters, .prospectsTable .prospectRow {
    width: 100%;
}

.ordersAndCommunication .clientOrdersFilters, .ordersAndCommunication .samplesFilters {
    width: auto;
}

/* modified menu */

/* Heaedr */
.header-wrapper {
    position: fixed;
    top: 15px;
    /* left: -240px; */
    left: 10px;
    bottom: 15px;
    transition: all 0.3s ease-in-out;
    z-index: 9999;
}

.header-wrapper.show {
    left: 10px;
}

.menuGroupTitle {
    visibility: hidden;
    width: max-content;
}

.header-wrapper.show .menuGroupTitle {
    visibility: visible;
    width: auto;
}

.header-wrapper:not(.show) .menuLinks > a > span {
    display: none;
}

.no-transition .header-wrapper {
    transition: none !important;
}

.header-arrow {
    position: absolute;
    top: 50px;
    right: -50px;
    width: 30px;
    height: 30px;
    background-color: #FF6027;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.header-arrow span {
    display: inline-block;
    background: url(../images/arrow-down.svg) center no-repeat;
    filter: invert(0%) sepia(1%) saturate(0%) hue-rotate(299deg) brightness(212%) contrast(101%);
    width: 15px;
    height: 15px;
    rotate: -90deg;
}

.header-wrapper.show .header-arrow {
    rotate: 180deg;
}

.header-container {
    position: relative;
    /* top: 15px; */
    /* left: 10px; */
    /* bottom: 15px; */
    width: 230px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* padding: 30px 20px 20px; */
    border-radius: 15px;
}

.no-transition .dashboardContainer {
    transition: none !important;
}

body.showMenu .dashboardContainer {
    margin-left: 280px;
}

body .dashboardContainer {
    margin-left: 100px;
}

.dashboardContainer.container-no-left {
    margin-left: 0;
}

.prospectAddress {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    width: 30rem;
    overflow-x: auto;
    overflow-y: hidden;
}

/* .addClientCommunication{
  text-align: center;
  padding-top: 20px;
  padding-bottom: 30px;
  color: #1B89FC;
  cursor: pointer;
} */
.addClientCommunication {
    /* text-align: center; */
    color: white;
    cursor: pointer;
    background-color: #FF6027;
    font-size: 12px;
    /* width: max-content; */
    height: 60px;
    display: flex;
    align-items: center;
    width: 135px;
    text-align: left;
    padding-left: 10px;
    margin-left: auto;
    margin-right: 1rem;
}

.interactionWrap {
    display: flex;
    flex-direction: column;
    row-gap: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

.interactionInput {
    display: flex;
    flex-direction: column;
    row-gap: 5px;
}

#interactionClient {
    width: 100%;
    border: 1px solid #D0D0D5;
    outline: none;
    color: #807182;
    font-size: 14px;
    border-radius: 8px;
    padding: 10px 20px;
    transition: all .3s;
    min-height: 70px;
}

.createButton {
    background-color: #FF6027;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    height: 48px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: auto;
}

.genericModal {
    position: fixed;
    width: 500px;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px #0000001A;
    background: white;
    z-index: 99;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.modalAddress, .modalColors, .modalMessages, .modalChats, .modalMesaje {
    position: fixed;
    width: 300px;
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px #0000001A;
    background: white;
    z-index: 99;
    row-gap: 10px;
    padding-top: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-bottom: 35px;
}

.modalAddress {
    width: 600px;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 2%;
}

.modalAddress > input {
    width: 48%;
}

.modalMessages, .modalChats, .modalMesaje {
    width: 600px;
    min-height: 400px;
    cursor: default;
}

.modalChats .closeButton img {
    top: 30px;
}

.modalColors {
    flex-direction: row;
    column-gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 60px;
    padding-bottom: 60px;
    width: 600px;
    min-height: 400px;
    row-gap: 20px;
}

.modalColors .sampleColor {
    flex-direction: column;
    row-gap: 5px;
    width: 48%;
}

.modalColors .closeButton {
    display: contents;
}

.noColors {
    display: flex;
    align-items: center;
}

.addColors, .addFiles {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 30px;
    color: #1B89FC;
    cursor: pointer;
}

.modalColors .select2 {
    width: 100%;
}

.select2Wrapper, .addColors {
    width: 100%;
}

.addSampleForm .select2Wrapper, .addSampleForm .addColors {
    width: 59%;
}

.addSampleForm .select2-selection__rendered {
    display: flex !important;
    flex-shrink: 0;
}

.addSampleForm .select2-selection {
    display: flex !important;
    align-items: baseline;
}

.addSampleForm .inputWrap {
    height: 100px;
}

.inputWrap:has(.select2Wrapper) {
    margin-bottom: 20px;
}

.colorText {
    color: white;
    text-shadow: 1px 1px 3px black;
    padding: 10px;
    border-radius: 5px;
    width: 100%;
    text-align: center;
}

.butonCulori {
    background: #1B89FC;
    padding: 8px 20px;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    width: fit-content;
}

.butonFisiere {
    padding: 0px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.offerId {
    color: #1B89FC;
}

.modalMessages textarea {
    height: 150px;
    width: 100%;
    border: 1px solid #B3BDCC;
    outline: none;
    color: #98A6BA;
    font-size: 12px;
    border-radius: 4px;
    padding: 0px 13px;
    position: relative;
    display: flex;
    align-items: center;
    transition: all .3s;
    padding-top: 10px;
}

.modalMessages label {
    color: black;
    font-size: 18px;
    font-weight: 600;
}

.saveMessage {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background-color: #FF6027;
    padding: 0 50px;
    width: max-content;
    height: 50px;
    border-radius: 8px;
    border: 1px solid #FF6027;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    margin-top: 30px;
    align-items: center;
    display: flex;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

.messageSingle {
    display: flex;
    column-gap: 3px;
    color: black;
    margin-bottom: 5px;
}

.messageLeft {
    font-weight: 700;
    flex-shrink: 0;
}

.allMessages {
    margin-top: 30px;
}

.offerIdText {
    cursor: pointer;
}

.allMessages {
    max-height: 250px;
    overflow: auto;
}

.fullAddress {
    font-weight: 600;
    font-size: 16px;
    width: 100%;
}

.descriptionAddress {
    font-weight: 500;
    font-size: 14px;
    width: 100%;
}

.dashboardTitle {
    font-weight: 700;
    font-size: 18px;
}

.tooltipCanal {
    color: #3B86FF;
}

.addClientForm .searchDiv {
    top: 78px;
}

.addFileContainer {
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 15px;
    justify-content: center;
}

.addFileInputs {
    display: flex;
    align-items: center;
    column-gap: 2%;
    justify-content: center;
}

.addFileInputs > div {
    width: 48%;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 2px;
}

.addFileInputs input, .inputFilePlaceholder {
    width: 100%;
    height: 34px;
    border: 1px solid #B3BDCC;
    outline: none;
    color: #98A6BA;
    font-size: 12px;
    border-radius: 4px;
    padding: 0px 13px;
    position: relative;
    display: flex;
    align-items: center;
    transition: all .3s;
}

.inputFilePlaceholder {
    cursor: pointer;
}

.numeFisiser {
    color: #FF6027;
}

.addFileContainer button {
    background: #FF6027;
    border: unset;
    height: 40px;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    color: white;
    border-radius: 5px;
    outline: none;
    font-size: 16px;
    margin-top: 20px;
}

.numeFisiser {
    height: 48px;
    border: 1px solid #FF6027;
    padding: 10px;
    border-radius: 5px;
    color: #FF6027 !important;
    display: flex;
    align-items: center;
    column-gap: 5px;
    width: calc(50% - 20px);
    justify-content: center;
}

.numeFisiser img {
    filter: brightness(0) saturate(100%) invert(45%) sepia(55%) saturate(2297%) hue-rotate(343deg) brightness(100%) contrast(103%);
    -webkit-filter: brightness(0) saturate(100%) invert(45%) sepia(55%) saturate(2297%) hue-rotate(343deg) brightness(100%) contrast(103%);
}

.fisiereContainer {
    display: flex;
    flex-direction: row;
    column-gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    height: fit-content;
    row-gap: 20px;
}

.actionsAwb img, .actionsOffer img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.actionAwb {
    position: relative;
    min-width: 2rem;
}

.user-list {
    overflow: auto;
    height: 200px;
}

.user-list li {
    cursor: pointer;
}

.hoverAction {
    cursor: pointer;
}

.whatsappIcon {
    background-color: #25D366;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    cursor: pointer;
}

.whatsappIcon .fa-whatsapp {
    color: white;
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.modalAddress.whatsappModal {
    min-height: 400px;
    align-content: center;
    row-gap: 20px;
    column-gap: 4%;
    padding-top: 70px;
}

.whatsappModal .closeButton {
    display: contents;
}

.whatsappModal .editableInput {
    height: 40px;
}

.whatsappModal textarea.editableInput {
    height: 100px;
    padding: 15px 20px;
}

.prospectAddress .editableInput::placeholder {
    color: #2c2c2c;
}

.prospectAddress .editableInput {
    font-size: 14px;
    color: #2c2c2c;
}

.sendWhatsapp {
    display: flex;
    background: #25D366;
    color: white;
    width: 130px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    height: 40px;
    align-items: center;
    border-radius: 5px;
    margin-top: 25px;
    cursor: pointer;
}

.tooltipInteractions {
    flex-direction: column;
    font-size: 16px;
    row-gap: 10px;
    min-width: 185px;
    transform: translate(45%, -72%);
    border: 1px solid black;
    z-index: 99;
}

.tooltipInteractions::before {
    content: "";
    position: absolute;
    bottom: 1px;
    right: calc(100% - 11px);
    transform: translateY(-50%) rotate(45deg);
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent white white;
    z-index: -1;
}

.tooltipInteractions::after {
    content: "";
    position: absolute;
    bottom: 1px;
    right: calc(100% - 9px);
    transform: translateY(-50%) rotate(45deg);
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent black black;
    z-index: -2;
}

.grey, .grey * {
    color: grey !important;
}

.actionAwb .fa-whatsapp {
    color: #25D366;
    font-size: 30px;
}

.allChats {
    height: 300px;
    overflow-y: auto;
}

.mesajeChat {
    display: flex;
    flex-direction: column;
    row-gap: 5px;
    max-height: 500px;
    overflow-y: auto;
}

.mesajeChat .mesaj {
    width: 48%;
    background: #1B89FC;
    padding: 5px 10px;
    font-size: 14px;
    color: white;
    border-radius: 5px;
    position: relative;
    text-align: left;
}

.mesajeChat .mesaj a {
    color: white !important;
    width: 100%;
    display: flex;
    word-break: break-all;
    text-decoration: underline;
}

.mesajeChat .mesajAgent {
    width: 48%;
    text-align: right;
    margin-left: auto;
    background: #DFDFDF;
    padding: 5px 10px;
    border-radius: 5px;
    color: black;
    position: relative;
}

.mesajeChat .mesaj::before {
    content: "";
    position: absolute;
    bottom: -1px;
    left: calc(100% - 9px);
    transform: translateY(-50%) rotate(45deg);
    border-width: 7px;
    border-style: solid;
    border-color: #1B89FC #1B89FC transparent transparent;
    z-index: -1;
}

.mesajeChat .mesajAgent::before {
    content: "";
    position: absolute;
    bottom: -1px;
    right: calc(100% - 9px);
    transform: translateY(-50%) rotate(45deg);
    border-width: 7px;
    border-style: solid;
    border-color: transparent transparent #DFDFDF #DFDFDF;
    z-index: -1;
}

.modalMesajeTitle {
    text-align: center;
    font-weight: 600;
    margin-bottom: 10px;
}

.chat {
    color: #FF6027;
    cursor: pointer;
}

#mesajChat {
    width: 100%;
    height: 40px;
    border: 1px solid #B3BDCC;
    outline: none;
    color: #98A6BA;
    font-size: 12px;
    border-radius: 4px;
    padding: 0px 13px;
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all .3s;
}

.sendMessageBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 150px;
    background-color: #FF6027;
    color: white;
    height: 50px;
    border-radius: 5px;
    margin-top: 20px;
    cursor: pointer;
}

.modalColors:not(:has(.fisiereContainer > *)) {
    align-items: center;
}

.fisiereContainer:not(:has(*)) {
    display: none;
}

.greyBack {
    background-color: #cbcbcb;
}

.fisiereContainer {
    width: 100%;
}

.grey {
    color: #cbcbcb !important
}

.numeFisiser img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.actionAwb .hoverAction.grey {
    pointer-events: none;
}

.fl-scrolls[data-orientation=horizontal] {
    left: 50% !important;
    transform: translateX(-50%) !important;
}

.disabledAwb {
    filter: brightness(0) invert(0.8);
    -webkit-filter: brightness(0) invert(0.8);
}

.sampleAwb {
    color: #1B89FC;
}

.modalChats .closeButton {
    display: block;
}

.wappAndCall {
    display: flex;
    align-items: center;
    column-gap: 10px;
}

.clientCardBigger .clientPhone.showInteractions {
    justify-content: flex-start;
    width: max-content;
}

.wappAndCall .tooltipInteractions::after {
    top: 0px;
    bottom: auto;
    right: calc(100% - 34px);
    transform: translateY(-50%) rotate(135deg);
}

.wappAndCall .tooltipInteractions::before {
    top: 1px;
    bottom: auto;
    right: calc(100% - 34px);
    transform: translateY(-50%) rotate(135deg);
}

.wappAndCall .tooltipInteractions {
    transform: translate(-50%, 54%);
}

.wappContent * {
    font-size: 12px;
    margin-bottom: 0px;
}

.wappContent {
    display: flex;
    flex-direction: column;
    row-gap: 5px;
}

.sampleDetails, .clientDetails, .offerDetails {
    display: flex;
    flex-wrap: wrap;
    column-gap: 2%;
    row-gap: 10px;
    width: 100%;
}

.sampleDetails span, .clientDetails span, .offerDetails span {
    width: 100%;
    padding-bottom: 15px;
    font-size: 18px;
    font-weight: 400;
}

.addSampleForm .clientAddress > span {
    padding-top: 0px;
}

.inputWrap:has(.select2Wrapper) {
    width: 100%;
}

.addSampleForm form {
    row-gap: 5px;
}

.addSampleForm .inputWrap:has(textarea) {
    display: flex;
    flex-direction: column;
}

.addSampleForm .inputWrap textarea {
    height: 50px;
    border: 1px solid rgb(208, 208, 213);
    outline: none;
    color: rgb(128, 113, 130);
    font-size: 14px;
    border-radius: 8px;
    padding: 0px 20px;
    line-height: 50px;
    overflow: hidden;
    resize: none;
}

.addSampleForm {
    width: 100%;
}

.addSampleForm .inputFilePlaceholder {
    height: 50px;
}

.messageSingle .messageLeft {
    display: flex;
    flex-direction: column;
    align-items: end;
}

.messageSingle .messageLeft span {
    font-weight: 700;
    line-height: 16px;
}

.globalSearchContainer {
    display: inline-flex;
    margin-left: 20px;
    padding-bottom: 15px;
}

.globalSearch input {
    width: 270px;
    height: 48px;
    border: 1px solid #B3BDCC;
    outline: none;
    color: #000000;
    font-size: 14px;
    border-radius: 5px;
    padding: 0px 13px;
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all .3s;
}

.globalSearch {
    display: flex;
    align-items: center;
    column-gap: 10px;
}

.butonCautare {
    background: #FF6027;
    width: 65px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    font-size: 12px;
}

.error {
    color: red;
    font-size: 12px;
}

.inputError {
    border: 1px solid red;
}

.butonExport {
    background: #FF6027;
    width: 125px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 40px;
    border-radius: 4px;
    color: white;
    cursor: pointer;
}

.buton {
    padding: 1rem;
    background: #FF6027;
    min-width: 3rem;
    gap:0.3rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 40px;
    border-radius: 4px;
    color: white;
    cursor: pointer;
}

.globalSearch .errorsList {
    margin-bottom: 0px;
}

.globalSearch .errorsList span {
    width: max-content;
}

.searchResults .dropdown-container, .searchResults .dropdown-input-search {
    display: none;
}

.searchResults .sampleHeader {
    padding-bottom: 0px;
    justify-content: center;
}

.searchResults > .clientOrdersTable {
    max-width: unset;
    width: 100%;
}

.searchResults .ordersContainer .clientOrdersFilters > div:first-of-type, .searchResults .ordersContainer .clientOrder > div:first-of-type {
    width: 125px;
}

.searchResults .ordersContainer .clientOrdersFilters > div:nth-of-type(2), .searchResults .ordersContainer .clientOrder > div:nth-of-type(2) {
    width: 100px;
}

.searchResults .ordersContainer .clientOrdersFilters > div:nth-of-type(3), .searchResults .ordersContainer .clientOrder > div:nth-of-type(3) {
    width: 150px;
}

.searchResults .ordersContainer .clientOrdersFilters > div:nth-of-type(4), .searchResults .ordersContainer .clientOrder > div:nth-of-type(4) {
    width: 175px;
}

.searchResults .ordersContainer .clientOrdersFilters > div:nth-of-type(5), .searchResults .ordersContainer .clientOrder > div:nth-of-type(5) {
    width: 200px;
}

.searchResults .ordersContainer .clientOrdersFilters > div:nth-of-type(6), .searchResults .ordersContainer .clientOrder > div:nth-of-type(6) {
    width: 100px;
}

.searchResults .ordersContainer .clientOrdersFilters > div:nth-of-type(7), .searchResults .ordersContainer .clientOrder > div:nth-of-type(7) {
    width: 200px;
}

.searchResults .ordersContainer .clientOrdersFilters > div:nth-of-type(8), .searchResults .ordersContainer .clientOrder > div:nth-of-type(8) {
    width: 125px;
}

.searchResults .ordersContainer .clientOrdersFilters > div:nth-of-type(9), .searchResults .ordersContainer .clientOrder > div:nth-of-type(9) {
    width: 150px;
}

.ordersContainer .clientOrdersTable {
    width: 100%;
}

.searchResults .ordersContainer .clientOrder {
    width: max-content;
}

.ordersContainer .clientOrdersTable div:has(.clientOrders) {
    overflow-x: auto;
    padding-bottom: 25px;
    overflow-y: hidden;
}

.samplesContainer,
.offersContainer,
.prospectsContainer,
.clientsContainer,
.ordersContainer {
    position: relative;
    padding-bottom: 40px;
}

.searchResults > div:not(.ordersContainer) .table-pagination {
    bottom: -5px;
}

.samplesContainer .hideClientOrders, .offersContainer .hideClientOrders,
.clientOrdersTable .hideClientOrders {
    margin-left: 10px;
}

.searchResults {
    row-gap: 30px;
}

div:has(>.hiddenContent) .hideClientOrders img {
    transform: rotate(180deg) !important;
}

.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999; /* Ensure it covers the entire page */
}

.spinner {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #FF6027; /* Blue */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.submitClient.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.toggleInteractionsButton {
    background-color: #f0f0f0; /* Default background */
    border: none;
    margin-left: 4px;
    padding: 4px; /* Smaller padding to make the button smaller */
    width: 18px; /* Set width for circular shape */
    height: 18px; /* Set height for circular shape */
    font-size: 14px;
    cursor: pointer;
    border-radius: 50%; /* Makes the button circular */
    display: inline-flex; /* Centers the icon */
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
}

.toggleInteractionsButton i {
    color: #333; /* Default icon color */
}

.toggleInteractionsButton.button-active {
    background-color: #007bff; /* Change color when pressed */
}

.toggleInteractionsButton:focus {
    outline: none;
}

.toggleInteractionsButton:hover {
    background-color: #e0e0e0;
}

.dateInput {
}

.modalMessages {
    min-height: 40rem;
}

.awb-modal-container {
    position: fixed;
    width: 60rem;
    height: 40rem;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 15px 0px #0000001A;
    background: white;
    z-index: 99;
    row-gap: 10px;
    padding-top: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-bottom: 35px;
}

.choose-colors-modal {
    position: fixed;
    width: 30rem;
    height: 30rem;
    display: grid;
    grid-template-columns: 1fr;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px #0000001A;
    background: white;
    z-index: 99;
    row-gap: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 50px 20px 35px;
}

.whatsapp-messages-modal {
    position: fixed;
    width: 40rem;
    height: 40rem;
    display: grid;
    grid-template-columns: 1fr;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px #0000001A;
    background: white;
    z-index: 99;
    row-gap: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 50px 20px 35px;
}

.search-colors {
    width: 100%;
}

.awb-form {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 10px;
    row-gap: 10px;
}

/* AWB modal form styles */
.awb-modal-container {
    --surface: #ffffff;
    --surface-contrast: #0f172a; /* slate-900 */
    --muted: #64748b;            /* slate-500 */
    --border: #e2e8f0;           /* slate-200 */
    --ring: #6366f1;             /* indigo-500 */
    --error: #dc2626;            /* red-600 */

    max-width: 720px;
    margin: 0 auto;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(2, 6, 23, 0.08);
}

.awb-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem; /* space between fields */
}

/* Two columns on medium+ screens */
@media (min-width: 768px) {
    .awb-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.awb-form .inputWrap {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.awb-form label {
    font-size: 0.925rem;
    font-weight: 600;
    color: var(--surface-contrast);
}

.awb-form input[type="text"],
.awb-form input[type="number"],
.awb-form select {
    appearance: none;
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--surface-contrast);
    line-height: 1.4;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.awb-form input[type="text"]::placeholder {
    color: var(--muted);
    opacity: 0.75;
}

.awb-form input[type="text"]:focus,
.awb-form input[type="number"]:focus,
.awb-form select:focus {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 4px rgb(99 102 241 / 0.15);
}

/* Livewire dirty/error helpers */
.awb-form .inputError,
.awb-form input.inputError {
    border-color: var(--error) !important;
    box-shadow: 0 0 0 4px rgb(220 38 38 / 0.1) !important;
}

.awb-form .error {
    color: var(--error);
    font-size: 0.85rem;
}

/* Make the submit row span full width and align right */
.awb-form > div:last-child {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.generalBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    border: 0;
    border-radius: 10px;
    background: #2563eb; /* blue-600 */
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 80ms ease, filter 120ms ease, box-shadow 120ms ease;
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.25);
}
.generalBtn:hover { filter: brightness(1.05); }
.generalBtn:active { transform: translateY(1px); }
.generalBtn:disabled,
.generalBtn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}

.close-modal-button {
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
    background-color:#ffffff;
    border-radius:8px;
    border:1px solid #dcdcdc;
    display:inline-block;
    cursor:pointer;
    color:#666666;
    font-size:20px;
    font-weight:bold;
    padding:6px 13px;
    text-decoration:none;
    text-shadow:0px 1px 0px #ffffff;
}
.close-modal-button:hover {
    background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
    background-color:#f6f6f6;
}
.close-modal-button:active {
    position:relative;
    top:1px;
}

     /* Compact icon button for table actions */
 .icon-btn {
     -webkit-appearance: none;
     appearance: none;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 32px;
     height: 32px;
     margin-right: 0.5rem;
     border: 1px solid #e2e8f0; /* slate-200 */
     border-radius: 8px;
     background: #f8fafc;        /* slate-50 */
     color: #0f172a;             /* slate-900 */
     cursor: pointer;
     transition: transform 80ms ease, box-shadow 120ms ease, background-color 120ms ease, border-color 120ms ease, color 120ms ease;
 }
.icon-btn:hover { background: #eef2ff; border-color: #c7d2fe; }
.icon-btn:focus { outline: none; box-shadow: 0 0 0 4px rgba(99,102,241,.18); border-color: #6366f1; }
.icon-btn:active { transform: translateY(1px); }
.icon-btn:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }

/* Edit-specific variant */
.icon-btn--edit { color: #1d4ed8; }
.icon-btn--edit:hover { color: #1e40af; }

.address-form {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

.field > label {
    display: flex;
    align-items: center;
    justify-content: start;
}

.actionsAwb .tps-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: block;
    flex: 0 0 auto;
}


/* Utility classes for Add Sample component refactor */
.panel-white {
    background-color: #ffffff;
    padding: 2rem;
}

.relative {
    position: relative;
}

.visuallyHiddenFile {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

/* Standalone styles to replace .addClientForm dependencies for Add Sample */
.tps-form input:not(.dropdown-container), .tps-form select {
    width: 100%;
    height: 50px;
    border: 1px solid #D0D0D5;
    outline: none;
    color: #807182;
    font-size: 14px;
    border-radius: 8px;
    padding: 0 20px;
    position: relative;
    display: flex;
    align-items: center;
    transition: all .3s;
    background-color: white !important;
}

.tps-form select:disabled {
    background-color: #dbdbdb !important;
}

.tps-form .select2, .tps-form .select2-selection {
    min-height: 50px !important;
    border: 1px solid #D0D0D5;
    outline: none;
    color: #807182;
    font-size: 14px;
    border-radius: 8px;
    position: relative;
    padding-bottom: 0px;
}

.tps-form .select2-selection {
    display: flex;
    align-items: center;
    padding: 0 20px;
}

.tps-form .select2Wrapper span {
    padding-bottom: 0px;
}

.tps-form .select2Wrapper .select2-container .select2-selection {
    padding-right: 45px;
    padding-left: 15px;
    overflow-x: auto;
}

.tps-form .select2Wrapper .select2-container .select2-selection .select2-search {
    padding-top: 10px;
}

.tps-form .select2Wrapper .select2-search {
    display: flex;
    height: 50px;
    align-items: center;
}

.tps-form .select2-container .select2-search--inline .select2-search__field {
    margin-top: 0px;
}

.tps-form form {
    height: 100%;
    align-content: flex-start;
}

.tps-form label {
    margin-bottom: 5px;
}

/* Offset search dropdown for this form */
.tps-form .searchDiv {
    top: 78px;
}

/* Keep submit button non-absolute inside this form */
.tps-form .submitClient {
    position: relative;
    bottom: 0px;
}

/* Ported from .addSampleForm to .tps-form */
.tps-form .select2Wrapper, .tps-form .addColors {
    width: 59%;
}

.tps-form .select2-selection__rendered {
    display: flex !important;
    flex-shrink: 0;
}

/* Prefer baseline alignment for tag chips */
.tps-form .select2-selection {
    display: flex !important;
    align-items: baseline;
}

.tps-form .inputWrap {
    height: 100px;
}

.tps-form .clientAddress > span {
    padding-top: 0px;
}

.tps-form form {
    row-gap: 5px;
}

.tps-form .inputWrap:has(textarea) {
    display: flex;
    flex-direction: column;
}

.tps-form .inputWrap textarea {
    height: 50px;
    border: 1px solid rgb(208, 208, 213);
    outline: none;
    color: rgb(128, 113, 130);
    font-size: 14px;
    border-radius: 8px;
    padding: 0px 20px;
    line-height: 50px;
    overflow: hidden;
    resize: none;
}

.tps-form {
    width: 100%;
}

.tps-form .inputFilePlaceholder {
    height: 50px;
}