* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* outline: 1px solid red; */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
html, body {
    height: var(--full-height);
    overflow-y: auto;
    overflow-x: hidden;
}
body {
    font-family: "Nunito", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    color: #33353E;
    background-color: #F6F6FA;
}
a,
a:link,
a:visited,
a:hover,
a:active {
    color: #33353E;
    text-decoration: none;
    transition: all .3s;
}
a:hover {
    opacity: 80%;
}
.btn-opacity {
    transition: all .3s;
    cursor: pointer
}
.btn-opacity:hover {
    opacity: 80%;
}
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #d1d1d132;
}
::-webkit-scrollbar-thumb {
    background: #A3A7AB;
    border-radius: 7px;
}
::-webkit-scrollbar-thumb:hover {
    background: #A3A7AB;
}
input {
    font-family: 'Nunito', sans-serif !important;
    touch-action: manipulation !important;
}


.container {
    padding: 50px 30px;
    height: 100vh;
    margin-left: 0;
    /* margin-bottom: 50px; */
    transition: margin-left 0.3s ease-in-out;
}
.second-container {
    padding: 0 0 15px 0;
}
.no-transition .container {
    transition: none !important;
}
body.showMenu .container {
    margin-left: 240px;
    width: calc(100% - 240px);
}
.container.container-no-left {
    margin-left: 0;
}
/* .content-container {
} */
.cursor-pointer {
    transition: all .3s;
    cursor: pointer;
}
.cursor-pointer:hover {
    opacity: 80%;
}
.text-semi-14 {
    font-size: 14px;
    font-weight: 600;
    color: #232323;
}

/* Heaedr */
.header-wrapper {
    position: fixed;
    top: 15px;
    left: -240px;
    bottom: 15px;
    transition: all 0.3s ease-in-out;
    z-index: 9999;
}
.header-wrapper.show {
    left: 10px;
}
.no-transition .header-wrapper {
    transition: none !important;
}
.header-arrow {
    position: absolute;
    top: 50px;
    right: -50px;
    width: 30px;
    height: 30px;
    background-color: #7990FB;
    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(/siteStorage/icons/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%;
    background-color: #fff;
    box-shadow: 0px 0px 10px 0px #0000001A;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px 20px 20px;
    border-radius: 15px;
}
.header_logo {
    width: 120px;
    height: 45px;
    margin: 0 auto 35px;
}
.header_logo img{
    width: 100%;
    height: 100%;
}
.header_menu-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 270px);
    width: 100%;
    overflow-y: auto;
    margin-top: 16px;
    padding-left: 15px;
}
.header_menu-title {
    font-size: 14px;
    font-weight: 600;
    color: #232323;
    margin-bottom: 10px;

}
.header_menu {
    display: flex;
    flex-direction: column;
    padding: 0 6px;
    margin-bottom: 20px;
}
.header_menu-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.header_menu-item .img {
    display: inline-block;
    width: 20px;
    height: 20px;
}
.header_menu-item.roles .img {
    background: url('/siteStorage/icons/roles-img.svg') center no-repeat;
}
.header_menu-item.orders .img {
    background: url('/siteStorage/icons/order-img.svg') center no-repeat;
}
.header_menu-item.partners .img {
    background: url('/siteStorage/icons/partner-img.svg') center no-repeat;
}
.header_menu-item.users .img {
    background: url('/siteStorage/icons/users-img.svg') center no-repeat;
}
.header_menu-item.clients .img {
    background: url('/siteStorage/icons/user.svg') center no-repeat;
    filter: invert(42%) sepia(91%) saturate(1563%) hue-rotate(343deg) brightness(100%) contrast(102%);
}
.header_menu-item .text {
    color: #000;
    font-size: 14px;
    padding: 8px 5px;
}

/* Login/Recover */
.popup-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    max-width: 500px;
    height: 100vh;
    margin: 50px auto 0;
}
.logo-img {
    background: url('/siteStorage/icons/logo.svg') center no-repeat;
    width: 171px;
    height: 109px;
    flex-shrink: 0;
}
.popup-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    padding: 50px 70px;
    border-radius: 20px;
    /* max-width: 500px;
    height: 100vh;
    margin: 0 auto; */
}
.popup-content-container {
    width: 100%;
}
.popup-title {
    font-size: 20px;
    font-weight: 700;
    color: #040B13;
    margin-bottom: 45px;
}
.form-first-row {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}
.signup-msg-container {
    width: 47%;
    display: flex;
    flex-direction: row;
    gap: 16px;
}
.field {
    position: relative;
}
.field.general-field {
    max-width: 300px;
}

.addClient-container .dropdown-container,
.dropdown-field .dropdown-container,
.field select,
.field input,
.field textarea {
    width: 100%;
    height: 48px;
    border: 1px solid #D0D0D5;
    outline: none;
    color: #43425D;
    font-size: 14px;
    font-family: 'Nunito', sans-serif !important;
    border-radius: 8px;
    padding: 0 20px;
}
.field textarea {
    height: 200px;
    width: 100%;
    resize: none;
    padding: 10px 15px;
}
.field.readonly input,
.field.readonly textarea,
.field.readonly select {
    background-color: #eeeeee !important;
    border: 1px solid #dfdfdf !important;
    pointer-events: none !important;
}
.new-order-dropdown.readonly .dropdown-container ,
.panel-input.dropdown-field .field.readonly {
    background-color: #eeeeee !important;
    border-color: #dfdfdf !important;
    pointer-events: none !important;
    border-radius: 8px;
}
.new-order-dropdown.readonly .dropdown-container .dropdown-input-search {
    background-color: #eeeeee !important;
}
.dropdown-field .dropdown-container .dropdown_list {
    width: 100%;
}
span.validation-error {
    position: absolute;
    left: 7px;
    bottom: -16px;
    color: red;
    font-size: 11px;
}
.input-text {
    font-size: 14px;
    font-weight: 500;
    color: #232323;
    margin-bottom: 15px;
}
.field.showPass {
    position: relative;
}
.show-pass {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    background: url('/siteStorage/icons/eye.svg') center no-repeat;
    width: 19px;
    height: 19px;
    cursor: pointer;
}
.show-pass.show-pass-active {
    filter: invert(0%) sepia(3%) saturate(0%) hue-rotate(212deg) brightness(3%) contrast(104%);
}


.checkbox-custom {
    display: block;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    height: 20px;
    width: 20px;

}
.checkbox-custom input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
    height: 20px;
    width: 20px;
}
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    border: 2px solid #888888;
    border-radius: 6px;
}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    width: 11px;
    height: 11px;
    border-radius: 1px;
    background: url('/siteStorage/icons/bifa.svg') center no-repeat;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.checkbox-custom input:checked ~ .checkmark {
    background-color: #FF6027;
    border-color: #FF6027;
}
.checkbox-custom input:checked ~ .checkmark:after {
    display: block;
}
.role-permissions-list {
    background-color: #fff;
    border-radius: 10px;
}
.role-permissions-list form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.role-permissions-title-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 25px 20px 20px 20px;
}
.role-permissions-title-container .field.general-field {
    max-width: 500px;
}
.roles-container {
    display: flex;
    flex-direction: row;
    gap: 10px;
    background-color: #fff;
    overflow: auto;
    border-top: 1px solid #CECECE;
    border-bottom: 1px solid #CECECE;
}
.roles-name-container {
    display: flex;
    flex-direction: column;
    width: 300px;
    border-right: 1px solid #CECECE;
}
.roles-name {
    font-size: 16px;
    padding: 15px 20px;
    border-bottom: 1px solid #CECECE;
    cursor: pointer;
}
.roles-name:last-of-type {
    border-bottom: none;
}
.roles-name.active {
    color: #fff;
    background-color: #3B86FF;
}
.role-permissions-wrapper {
    padding: 10px 0;
}
.role-permissions-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.role-permission {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.role-permission-check-text {
    font-size: 16px;
    font-weight: 500;
    color: #33353E;
}
.signin-haveAccount-container {
    margin-bottom: 20px;
}
.signup-form-btn-container {
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    gap: 10px;
    margin-bottom: 10px;
}
.signin-haveAccount-item-cp{
    font-weight: 500;
    color: #232323;
    text-decoration: underline;
    cursor: pointer;
    transition: all .3s;
}
.forgotpass-btn {
    font-weight: 300;
    color: #000;
    cursor: pointer;
    transition: all .3s;
    text-align: center;
}
.signup-form-btn {
    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;
    font-family: "Nunito", sans-serif;
}
.action-btn-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding-left: 15px;
    cursor: pointer;
    transition: all .3s;
}
.action-btn-container:hover {
    opacity: 80%;
}
.action-btn-img-logout {
    display: inline-block;
    background: url('/siteStorage/icons/account-logout.svg') center no-repeat;
    width: 20px;
    height: 20px;
}

.login-lang-container {
    position: fixed;
    right: 20px;
    top: 20px;
}
.lang-container {
    width: fit-content;
    position: relative;
}
.lang_dropdown {
    position: absolute;
    right: 0;
    top: 35px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    background: #fff;
    width: 86px;
    padding: 7px 12px;
    border-radius: 6px;
    box-shadow: 0px 0px 10px 0px #0000001A;
    z-index: 1;
}
.lang_dropdown-item-cont {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}
.lang-img {
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.lang-img-ro {
    background: url('/siteStorage/icons/ro-flag.svg') center no-repeat;
}
.lang-img-en {
    background: url('/siteStorage/icons/en-flag.svg') center no-repeat;
}
.lang-img-fr {
    background: url('/siteStorage/icons/fr-flag.svg') center no-repeat;
}
.lang-img-de {
    background: url('/siteStorage/icons/de-flag.svg') center no-repeat;
}
.lang-img-bg {
    background: url('/siteStorage/icons/bg-flag.svg') center no-repeat;
}
.lang-img-ru {
    background: url('/siteStorage/icons/ru-flag.svg') center no-repeat;
    background-size: cover; /* This will make the image cover the entire container */
    width:30px;
    height: 30px;
}
.lang-img-es {
    background: url('/siteStorage/icons/es-flag.svg') center no-repeat;
}
.lang-img-it {
    background: url('/siteStorage/icons/it-flag.svg') center no-repeat;
}

.role-permissions-save {
    width: 200px;
    margin-left: 15px;
}
.add-cotainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #FF6027;
    padding: 15px 20px;
    border-radius: 10px;
    width: 100%;
    cursor: pointer;
}
.addNewRole .add-cotainer {
    background-color: #FF6027;
    padding: 15px 50px;
}
.add-img {
    background: url('/siteStorage/icons/plus-circle.svg') center no-repeat;
    width: 16px;
    height: 16px;
}
.add-text {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}

/* Page Header */


.page-header-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 50px;
    margin-bottom: 50px;
}
.header-add-btn-container {
    width: 200px;
}
.user-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: fit-content;
    min-width: 170px;
    padding: 10px 15px;
    z-index: 9999;
    background-color: #fff;
    border: 1px solid #1B89FC;
    border-radius: 20px;
}
.user-container span {
    display: inline-block;
    background: url('/siteStorage/icons/arrow-down.svg') center no-repeat;
    filter: invert(51%) sepia(1%) saturate(0%) hue-rotate(354deg) brightness(97%) contrast(90%);
    width: 15px;
    height: 15px;
    transition: all .3s;
    margin-left: auto;
}
.user-container-icon {
    background: url('/siteStorage/icons/user-color.svg') center no-repeat;
    width: 25px;
    height: 25px;
}
.user-container-text p {
    font-size: 14px;
    color: #000;
    line-height: 1.2;
}
.addNewUserContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
.addNewUser {
    width: 100px;
}
.addNewRole {
    width: fit-content;
    margin: 10px 0 25px 10px;
}
.addNewUser .add-cotainer{
    padding: 7px 0px;
}
.addNewUser-selectList {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}
.addNewUser-selectList .addNewUser-filter {
    width: 400px;
}
/* .users-table-wrapper {} */
.users-table-container {
    background-color: #fff;
    /* border: 1px solid #e6e6e7; */
    border-radius: 10px;
    overflow: auto;
}
.users-table-header,
.users-table-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 0 10px 0;
}
.users-table-body.even {
    background-color: #F3F9FF;
}
.role-list .users-table-header {
    padding-left: 20px;
}

.role-list .users-table-body {
    padding-left: 20px;
}
.bodyCell {
    border-bottom: 1px solid #E2E8F0;
    border-right: 5px solid #fff;
}
.role-list .bodyCell {
    border-right: none;
    border-bottom: none;
}
.users-table-header {
    background-color: #DFDFDF;
    width: fit-content;
    min-width: 100%;
}
.headerCell,
.bodyCell {
    display: flex;
    align-items: center;
    min-width: 217px;
    flex: 1;
    font-size: 14px;
    font-weight: 800;
    color: #33353E;
    overflow-y: auto;
    text-wrap: nowrap;
    padding-right: 10px;
}
.headerCell {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.headerCell span {
    font-size: 13px;
    color: #33353E;
    font-weight: 600;
}
.bodyCell {
    height: 35px;
}
.headerCell:last-of-type,
.bodyCell:last-of-type {
    border-right: none;
}

.headerCell::-webkit-scrollbar,
.bodyCell::-webkit-scrollbar {
    display: none;
}
.headerCell.idCell,
.bodyCell.idCell {
    min-width: 100px;
    max-width: 100px;
    padding-left: 10px;
}
.bodyCell.idCell {
    justify-content: center;
}
.headerCell.actionCell {
    justify-content: center;
}
.headerCell.actionCell,
.bodyCell.actionCell {
    min-width: 100px;
    max-width: 100px;
}
.partner-container .headerCell.actionCell,
.partner-container .bodyCell.actionCell {
    min-width: 90px;
    max-width: 90px;
}
.partner-container .bodyCell.actionCell .users-table-action-container{
    width: 100%;
    justify-content: space-evenly;
}
.users-table-action-container {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    width: 100%;
}
.action-btn {
    outline: none;
    background-color: transparent;
    border: none;
}
.icon-edit,
.icon-delete,
.icon-authenticate {
    display: inline-block;
    width: 20px;
    height: 20px;
    cursor: pointer;
}
.icon-edit {
    background: url('/siteStorage/icons/edit-solid.svg') center no-repeat;
}
.icon-delete {
    background: url('/siteStorage/icons/delete.svg') center no-repeat;
}
.icon-authenticate {
    background: url('/siteStorage/icons/switch-user.svg') center no-repeat;
    filter: invert(70%) sepia(0%) saturate(191%) hue-rotate(146deg) brightness(91%) contrast(94%);
}



.account_dropdown-wrapper {
    position: relative;
}
.account_dropdown {
    display: flex;
    flex-direction: column;
    padding: 10px 0px;
    border-radius: 10px;
    background-color: #fff;
    position: absolute;
    right: 0;
    top: 60px;
    z-index: 9999;
    box-shadow: 0px 0px 10px 0px #0000001A;
    text-wrap: nowrap;
}
.account_dropdown > * {
    padding: 10px 15px;
}
.account_dropdown > *:hover {
    background-color: #f6f6fa;
}
/* .account_dropdown .action-btn-container {
    padding: 10px 15px;
} */
.dropdown-item {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.account_dropdown .action-btn-img-logout,
.account_dropdown .action-btn-img-leaveImpersonation,
.dropdown-item span {
    display: inline-block;
    width: 20px;
    height: 20px;
}
.dropdown-item span,
.account_dropdown .action-btn-img-logout,
.account_dropdown .action-btn-img-leaveImpersonation {
    filter: invert(51%) sepia(1%) saturate(0%) hue-rotate(354deg) brightness(97%) contrast(90%);
}
.dropdown-item.data span {
    background: url('/siteStorage/icons/user.svg') center no-repeat;
}
.dropdown-item.password span {
    background: url('/siteStorage/icons/lock.svg') center no-repeat;
}
.action-btn-img-leaveImpersonation {
    display: inline-block;
    background: url('/siteStorage/icons/switch-user-reverse.svg') center no-repeat;
}
.account_dropdown .action-btn-text,
.dropdown-item p {
    font-size: 14px;
    color: #000;
}
.user-name {
    max-width: 200px;
    min-width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.no-notif-img{
    width: 21px;
    height: 26px;
}
.notif-img{
    width: 21px;
    height: 21px;
}

/* Table */
.table-filter-wrapper {
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-bottom: 20px;
}
.table-title {
    font-size: 20px;
    font-weight: 600;
    color: #040B13;
    margin-left: 25px;
}
.table-filter-dropdown {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}
.table-filter-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    overflow-y: auto;
}
.filter-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    text-wrap: nowrap;
}
.table-wrapper {
    position: relative;
}
.table-container {
    background-color: #fff;
    border-radius: 10px;
    padding: 15px 15px 50px 15px;
    overflow: auto;
    min-height: 500px;
}
.table-cell-2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.table-arrow {
    display: inline-block;
    width: 18px;
    height: 18px;
    cursor: pointer;
}
.arrow-up {
    background: url('/siteStorage/icons/arrow-full-up.svg') center no-repeat;
}
.arrow-down {
    background: url('/siteStorage/icons/arrow-full-up.svg') center no-repeat;
    rotate: 180deg;
}
.table {
    width: 100%;
}
.table-header-row {
    margin-bottom: 19px;
}
.table-row-data {
    margin-bottom: 15px;
}
.table-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}
.table-cell {
    min-width: 150px;
    max-width: 150px;
}
.table-cell-header span {
    height: 27px;
}
.table-cell.offerTps {
    min-width: 110px;
    max-width: 110px;
}
.table-cell.price {
    min-width: 130px;
    max-width: 130px;
}
.table-cell.weight {
    min-width: 100px;
    max-width: 100px;
}
.table-cell.city {
    min-width: 120px;
    max-width: 120px;
}
.table-cell.blue-color {
    color:#1B89FC;
}
.table-header-row .table-cell {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 12px;
    color: #98A6BA;
}
.table-cell-middle {
    text-align: center;
}
.table-row-data .table-cell{
}
.awb-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    height: 45px;
    padding: 0 15px;
    border: 1px solid #B3BDCC;
    border-radius: 10px;
}
.awb-container.readonly {
    border: 1px solid transparent;
    padding: 0;
}
.awb-container input {
    font-size: 14px;
    color: #33353E;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    height: 100%;
    border: 0;
    outline: none;
}
.awb-container input:focus {
    outline: none;
    border: 0;
}
.copy-icon {
    display: inline-block;
    background: url('/siteStorage/icons/copy.svg') center no-repeat;
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}
.copy-icon.copy-icon-active {
    filter: invert(0%) sepia(3%) saturate(0%) hue-rotate(212deg) brightness(3%) contrast(14%);
}
.status-text-container {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 8px;
    padding: 5px 17px;
    width: fit-content;
    border-radius: 5px;
}
/* .status-text-container.client {
    background-color: transparent;
    border: 1px solid #8795f8;
} */
/* .status-text-container.client .status-name {
    color: #8795f8;
} */
.status-name {
    font-size: 14px;
    font-weight: 600;
    /* color: #fff; */
    text-transform: capitalize;
}
.color-bg {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}
.status-date {
    font-size: 11px;
    color: #807182;
    font-weight: 600;
}
.price-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 45px;
}
.price-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    width: 100%;
    gap: 10px;
    /* border: 1px solid #7990FB; */
    padding: 0 10px;
    border-radius: 10px;
}
.price-currency {
    font-size: 12px;
    font-weight: 500;
    color: #807182;
}
.price-img {
    background: url('/siteStorage/icons/price-file.svg') center no-repeat;
    width: 20px;
    height: 21px;
    flex-shrink: 0;
}
.price-img.price-img-active {
    filter: invert(45%) sepia(0%) saturate(6%) hue-rotate(695deg) brightness(153%) contrast(100%);
}
.ramburs-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.ramburs-container .img-active {
    filter: invert(45%) sepia(0%) saturate(6%) hue-rotate(694deg) brightness(153%) contrast(130%);
}
.ramburs-container .img-1 {
    background: url('/siteStorage/icons/ramburs-img-1.svg') center no-repeat;
    width: 30px;
    height: 17px;
}
.ramburs-container .img-2 {
    background: url('/siteStorage/icons/ramburs-img-2.svg') center no-repeat;
    width: 22px;
    height: 22px;
}
.action-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.action-img {
    width: 30px;
    height: 30px;
}
.action-img-duplicate {
    background: url('/siteStorage/icons/duplicate-img.svg') center no-repeat;
}
.action-img-edit {
    background: url('/siteStorage/icons/edit-solid.svg') center no-repeat;
    filter: invert(42%) sepia(91%) saturate(1563%) hue-rotate(337deg) brightness(96%) contrast(108%);
    transform: scale(0.8); /* Scale down the icon to 80% of its original size */
    transform-origin: center; /* Ensure the scaling occurs from the center */
}
.action-img-info {
    background: url('/siteStorage/icons/table-img-info.svg') center no-repeat;
}

/* Dropdown */
.dropdown-product-color {
    display: inline-block;
    height: 15px;
    width: 15px;
    border-radius: 3px;
}
.dropdown-input-search-container {
    width: 100%;
    padding: 0px 15px;
    margin-bottom: 10px;
}
.dropdown-input-search {
    width: 100%;
    height: 38px;
    border: 1px solid #D0D0D5;
    outline: none;
    color: #807182;
    font-size: 13px;
    border-radius: 8px;
    padding: 0px 13px;
}
.dropdown-input-search.active {
    border: 1px solid #1B89FC;
}
.dropdown-container .dropdown-input-search {
    border: none;
    padding: 0px;
    height: 32px;
}
.new-order-container {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px 25px;
}
.new-order-dropdown-wrapper {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
}
.bg-container.msg  .new-order-dropdown-container {
    width: 100%;
    max-width: unset;
}
.new-order-dropdown-wrapper .new-order-dropdown-container {
    max-width: 300px;
    flex: 1;
}
.new-order-container .line {
    width: calc( 100% - -50px);
    margin-left: -25px;
}
.panels-container .line {
    margin: 0 0 20px 0;
}
.line {
    width: 100%;
    height: 1px;
    background-color: #CECECE;
    margin: 20px 0;
}
.new-order-dropdown-container .field input,
.dropdown-container {
    width: 100%;
    height: 38px;
    border: 1px solid #D0D0D5;
    outline: none;
    color: #43425D;
    background-color: #fff;
    font-size: 13px;
    border-radius: 8px;
    padding: 0px 13px;
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all .3s;
}
.addUserContainer .dropdown-container {
    height: 48px;
}
.dropdown-input-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.dropdown-img {
    background: url('/siteStorage/icons/arrow-full-up.svg') center no-repeat;
    width: 15px;
    height: 15px;
    rotate: 180deg;
}
.dropdown_list {
    position: absolute;
    right: 0;
    left: 0;
    top: 54px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 300px;
    padding: 7px 0px;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0px 0px 10px 0px #0000001A;
    z-index: 99999;
    }
.list-item-container {
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
}
.list-item {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    transition: all .3s;
    padding: 5px 15px;
    text-align: left;
}
.list-item:hover {
    background-color: #e1e5fc;
}
.list-item-nothing {
    width: 100%;
    transition: all .3s;
    padding: 5px 15px;
    text-align: left;
    cursor: unset;
    pointer-events: none;
}

/* Pagination */
.table-pagination {
    position: absolute;
    bottom: 20px;
    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('/siteStorage/icons/arrow-down.svg') center no-repeat;
    rotate: 90deg;
}
.pag-right-arrow span {
    background: url('/siteStorage/icons/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;
}


/* DatePicker */
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange {
    background: #ff8052!important;
    border-color: #ff8052!important;
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
    -webkit-box-shadow: -10px 0 0 #ff8052 !important;
    box-shadow: -10px 0 0 #ff8052 !important;
}

/* Reset Pass Page */
.resset-pass-page-container {
    max-width: 500px;
}

/* New order */
.new-order-dropdown-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.edit-order-page-wrapper .new-order-dropdown-container {
    width: 300px;
}
.new-order-dropdown-text {
    font-size: 14px;
    font-weight: 500;
    color: #000;
    /* width: 200px; */
    height: 30px;
}
.new-order-add-new-client-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.new-order-dropdown {
    /* width: 300px; */
    position: relative;
}
.new-order-dropdown-container .dropdown_list {
    top: 40px;
}

.small-message {
    display: block;
    color: #555;
    font-size: 12px;
}

/* Order Steps */
.steps-action-btn-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}
.steps-action-back-btn .add-cotainer {
    background-color: transparent;
    border: 1px solid #8290F8;
}
.steps-action-back-btn .add-text {
    color: #8290F8;
}

.steps-action-btn {
    width: 200px;
}

.steps-action-btn.sendOrder {
    margin: 20px 10px 0 auto;
    border-color: black;
    background-color: #FF6027;
    color: white;
    font-weight: 700;
    padding: 10px 36px;
    border-radius: 10px;
    cursor: pointer;
}

.steps-header-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 20px 0 0 0;
    width: fit-content;
    gap: 10px;
}
.steps-header-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #E7E7E7;
    width: fit-content;
    padding: 8px 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.steps-header-btn.active {
    background-color: #FF6027;
}
.steps-header-btn.save-panel-btn {
    background-color: #ffc000;
}
.steps-header-btn-img {
    display: inline-block;
    background: url('/siteStorage/icons/download-img.svg') center no-repeat;
    filter: invert(79%) sepia(60%) saturate(452%) hue-rotate(147deg) brightness(91%) contrast(84%);
    width: 20px;
    height: 15px;
}
.steps-header-btn.save-panel-btn  .steps-header-btn-text{
    color: #fff;
}

.steps-header-btn.active .steps-header-btn-text {
    color: #fff;
}
.steps-header-btn-text {
    font-size: 13px;
    font-weight: 500;
    color: #000;
}
.panel-container {
    /* border: 1px solid #000; */
}
.panel-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: #DFDFDF;
    padding: 15px 20px;
}
.panel-title {
    font-size: 15px;
    font-weight: 700;
    color: #33353E;
}
.panel-header-btn-container {
    display: flex;
    align-items: center;
    gap: 8px;
}
.panel-delete-btn {
    background: url('/siteStorage/icons/delete.svg') center no-repeat;
    filter: invert(50%) sepia(28%) saturate(5350%) hue-rotate(343deg) brightness(99%) contrast(103%);
    width: 20px;
    height: 20px;
}
.panel-body {
    display: flex;
    flex-direction: row;
}
.panel-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px 20px;
    width: 50%;
}
.panel-input-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}
.panel-input {
    width: 100%;
}
.panel-input-title,
.panel-checkmark-text {
    font-size: 14px;
    font-weight: 500;
    color: #000;
}
.panel-checkmark {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}
.panel-checkmark .checkmark {
    border-width: 1px;
}
.list-inventory-container {
    display: flex;
    flex-direction: row;
    width: 50%;
    overflow-x: auto;
    gap: 0;
}
.list-inventory-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-shrink: 0;
    flex-grow: 1;
    flex-basis: 0;
    text-align: center;
    min-width: 130px;
    background-color: #013512;
}
.list-inventory-item:nth-child(1) {
    background-color: #da6a00;
}
.list-inventory-item:nth-child(2) {
    background-color: #ee9b01;
}
.list-inventory-item:nth-child(3) {
    background-color: #e08b00;
}
.list-inventory-item:nth-child(4) {
    background-color: #68904d;
}
.list-inventory-item:nth-child(5) {
    background-color: #5b7e3d;
}
.list-inventory-item:nth-child(6) {
    background-color: #4a7539;
}
.list-inventory-item:nth-child(7) {
    background-color: #2d6b3b;
}
.list-inventory-item:nth-child(8) {
    background-color: #14471e;
}
.list-inventory-item:nth-child(9) {
    background-color: #094119;
}
.list-inventory-item-text {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}
.new-panel-btn {
    background-color: #fff;
    border: 1px solid #8290F8;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: fit-content;
    height: 50px;
    padding: 0px 25px;
    border-radius: 5px;
    margin: 20px 25px;
}
.new-panel-btn .text {
    font-size: 14px;
    font-weight: 500;
    color: #8290F8;
}
.new-panel-btn .img {
    background: url('/siteStorage/icons/plus-icon.svg') center no-repeat;
    filter: invert(51%) sepia(74%) saturate(582%) hue-rotate(198deg) brightness(103%) contrast(95%);
    width: 21px;
    height: 21px;
}


/* Order Details */
.detail-offer-container {
    display: flex;
    flex-direction: column;
    /* gap: 20px; */
    margin-bottom: 5px;
}
.detail-offer-first-container {
    display: flex;
    flex-direction: row;
    gap: 20px;
}
.detail-offer-first-container .offer-type-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.edit-order-page-container {
    background-color: #fff;
    padding: 20px 0 10px 0;
    border-radius: 10px;
}
.bg-wrapper {
    /* border-radius: 5px; */
    /* overflow: hidden; */
}
.bg-title-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: #DFDFDF;
    padding: 13px 20px;
}
.bg-title {
    font-size: 16px;
    font-weight: 700;
    color: #33353E;
}
.bg-image {
    background: url('/siteStorage/icons/arrow-full-up.svg') center no-repeat;
    width: 20px;
    height: 20px;
}
.panel-img {
    height: 100%;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bg-image.rotate {
    rotate: 180deg;
}

.bg-container {
    background-color: #FFF;
    /* box-shadow: 0px 0px 10px 0px #0000001A; */
    padding: 20px;
    width: 100%;
    height: fit-content;
}
.bg-container.calcule {
    padding: 20px 0;
}
.client-container-package-detail {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.client-container-package-detail .new-order-dropdown-container {
    width: 100%;
}
.new-order-generic-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 7px 10px;
    border-left: 4px solid;
    border-top:1px solid ;
    border-right:1px solid ;
    border-bottom:1px solid ;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    width: fit-content;
}
.new-order-generic-btn .text {
    font-size: 14px;
    font-weight: 500;
}
.steps-action-back-btn.save-msg {
    margin-left: auto;
}
.steps-action-back-btn.save-msg .add-cotainer {
    border-color: #FF6027;
}
.steps-action-back-btn.save-msg .add-text {
    color: #FF6027;
}
/* .new-order-generic-btn.save-msg {
    border-color: #5eaf2f;
    margin-left: auto;
}
.new-order-generic-btn.save-msg .text {
    color: #5eaf2f;
} */
/* .bg-container.msg {
    max-height: 500px;
} */
.new-order-message-container {
    display: flex;
    flex-direction: row;
    gap: 20px;
}
.new-order-message-area-container {
    width: 50%;
}
.message-list-container {
    width: 50%;
    height: 500px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: 5px;
    padding: 10px;
    margin-top: 14px;
    overflow-y: auto;
}
.msg-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    background-color: #DDE0FC;
    padding: 15px 20px;
    border-radius: 5px;
}
.msg-name-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.msg-date {
    font-size: 14px;
    font-weight: 700;
    color: #000;
}
.msg-text {
    font-size: 15px;
    font-weight: 500;
    color: #000;
}
/* .detail-offer-second-container .bg-container {
    padding: 10px 0 0 0 ;
} */
.detail-offer-second-container {
    max-width: 1830px;
}
.newOrder-table-container {
    position: relative;
}
.newOrder-table {
    overflow: auto;
    width: 100%;
    min-height: 300px;
    padding-bottom: 50px;
}
.header-text {
    font-size: 13px;
    font-weight: 600;
    color: #98A6BA;
}
.newOrder-table-header,
.table-items-container {
    display: inline-flex;
    flex-direction: row;
    /* border-bottom: 1px solid #d3d3d4; */
    width: 100%;
}
.newOrder-table-header {
    height: 40px;
}
.table-items-container.even {
    background-color: #F3F9FF;
}
.table-items-container.second {
    border-bottom: 1px solid transparent;
}
.newOrder-table-body {
    display: flex;
    flex-direction: column;
}
.table-item {
    width: 200px;
    flex-shrink: 1;
    min-height: 60px;
    margin-left: 10px;
}
.newOrder-table-body .table-item {
    display: flex;
    align-items: center;
}
.table-item.grey-line {
    width: 10px;
}
.table-item.grey-line .body-item.line{
    background-color: #d3d3d4;
    height: 100%;
    width: 100%;
}
.table-item.first-cell {
    width: 20px;
    margin-left: 20px;
    width: 50px;
}
.table-items-container.second .table-item.first-cell {
    border-right: 1px solid transparent;
}
.table-item.product-name {
    width: 100%;
    flex-shrink: unset;
    flex-grow: 1;
}
.newOrder-table-body .field input{
    width: 100%;
    height: 40px;
    color: #000;
}
.table-items-line {
    width: calc(100% - -20px);
    margin-left: -10px;
    height: 1px;
    background-color: #d3d3d4;
}
.newOrder-table-total-container {
    position: absolute;
    bottom: 0;
    right: 0;
    padding-bottom: 10px;
}
.table-total-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 57px;
}
.table-total-item .text {
    font-size: 14px;
    font-weight: 700;
    color: #000;
}
.table-total-item .text.price {
    width: 100px;
}
.table-total-item .text.price.final-price {
    border: 1px solid #000;
    padding: 2px 5px;
}
.body-item p {
    font-size: 14px;
    font-weight: 600;
    color: #000;
    line-height: 1.1;
}

.offer-detail-container {
    display: flex;
    flex-direction: row;
    gap: 20px;
}
.offer-detail-container-1{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}
.new-offer-awb-container {
    margin-bottom: 20px;
}
.awb-container-1 {
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.awb-sub-container-1 {
    width: 100%;
}
.newOrder-header-actionBtn-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    margin: 0 15px 20px 15px;
}
.new-order-dropdown-container.obs {
    width: 100%;
}
.newOrder-header-actionBtn {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 7px 10px;
    border-left: 4px solid;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    width: fit-content;
    background-color: #ff6027;
    color: white;
    box-shadow: 0px 0px 10px 0px #0000001A;
}
.newOrder-header-actionBtn .text {
    font-size: 14px;
    font-weight: 500;
}
.action-buttons-wrapper {
    position: relative;
}
.back-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px #0000001A;
    padding: 7px 15px;
}
.download-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px #0000001A;
    padding: 7px 15px;
}
.f-text {
    font-size: 14px;
    font-weight: 700;
}
.f-img {
    display: inline-block;
    background: url(/siteStorage/icons/arrow-full-up.svg) center no-repeat;
    width: 15px;
    height: 15px;
    rotate: 180deg;
}
.f-img.rotate {
    rotate: 0deg;
}
.action-buttons-container {
    position: absolute;
    top: calc(100% + 5px);
    width: 300px;
    z-index: 1;

    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px #0000001A;
}
.action-button-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}
.action-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    transition: all .3s;
}
.action-button:hover {
    background-color: #e1e5fc;
}
.action-button .text {
    font-size: 14px;
    font-weight: 500;
    color: #3179b7;
}
.action-button-img {
    display: inline-block;
    width: 15px;
    height: 15px;
}
.action-button-delete {
    background: url('/siteStorage/icons/delete-icon.svg') center no-repeat;
    width: 15px;
    height: 15px;
}
.action-button-img.download-pdf {
    background: url('/siteStorage/icons/download-img.svg') center no-repeat;
    filter: invert(36%) sepia(92%) saturate(526%) hue-rotate(168deg) brightness(95%) contrast(79%);
}
.action-button-img.add {
    background: url('/siteStorage/icons/plus-icon.svg') center no-repeat;
    filter: invert(36%) sepia(92%) saturate(526%) hue-rotate(168deg) brightness(95%) contrast(79%);
}
.newOrder-header-actionBtn.offerPdf,
.newOrder-header-actionBtn.acceptedOffer {
    border-color: #67ccd8;
}
.newOrder-header-actionBtn.proformPdf {
    border-color: #fead19;
}
.newOrder-header-actionBtn.panelOrderPdf {
    border-color: #5eaf2f;
}
.newOrder-header-actionBtn.sendOrder {
    border-color: #7990fb;
}
.newOrder-header-actionBtn.sendOrder .text {
    font-weight: 700;
}

.mentionable-users-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #7990fb;
    height: 250px;
    overflow-y: auto;
    border-radius: 5px;
    z-index: 10;
}

.mentionable-user-item {
    padding: 5px;
    cursor: pointer;
    font-weight: 500;
}

.mentionable-user-item:hover {
    background-color: #eee;
}


.addClient-wrapper {
}
.addClient-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;
}
.addClient-container {
    background-color: #fff;
    z-index: 99999;
    width: 700px;
    height: 500px;
    padding: 20px;
    border-radius: 10px;
    overflow-y: auto;
}
.addClient-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}
.addClient-header h2 {
    font-size: 20px;
    font-weight: 600;
    color: #000;
}
.addClient-header .close-btn {
    width: 24px;
    height: 24px;
    font-size: 20px;
    text-align: center;
    border: none;
    background-color: transparent;
}
.addClient-btn {
    background: url('/siteStorage/icons/plus-icon.svg') center no-repeat;
    filter: invert(78%) sepia(53%) saturate(2878%) hue-rotate(345deg) brightness(97%) contrast(93%);
    width: 30px;
    height: 30px;
}
.addClientComponent.readonly {
    filter: invert(90%) sepia(74%) saturate(68%) hue-rotate(330deg) brightness(117%) contrast(87%);
    pointer-events: none !important;
}


.addClientPage-container .form-first-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
}
.addClientPage-container .form-sections {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.addClientPage-container .form-section {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 2px rgba(16,24,40,0.06), 0 1px 3px rgba(16,24,40,0.10);
}
.addClientPage-container .form-section__header {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 12px;
    color: #232323;
}
.addClientPage-container .form-first-row .field,
.addClientPage-container .form-first-row .new-order-dropdown-container {
    width: 300px;
}
.addClientPage-container .dropdown-container {
    height: 48px;
}
.addClientPage-container .dropdown-container .dropdown_list {
    top: 53px;
}
.addClientPage-container .form-first-row .dropdown-container .dropdown-input-search {
    height: 45px;
}
.addClientPage-container .field.chck-container {
    display: flex;
    flex-direction: row;
    gap: 20px;
    width: 100%;
}
.field.chck-container .new-order-dropdown-text {
    padding-left: 30px;
}
.addClientPage-container .signup-form-btn-container {
    width: 300px;
}
.addClientPage-container .form-first-row .clientAdress-edit {
    width: 100%;
}

.upload-box {
    width: 100%;
    height: 350px;
}

.upload-box.drag-active {
    border: 1px solid blue;
}
.upload-box form {
    width: 100%;
    height: 100%;
}


.hidden-input {
    /* opacity: 0; */
    display: none;
    /* width: 100%;
    height: calc(100% - 50px); */
}


.upload-label {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    flex-direction: row;
    align-items: center;
    gap: 10px;

}
.upload-icon-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* width: 100%;
    height: 100%; */
}
.upload-icon {
    background: url('/siteStorage/icons/DocIcon.svg') center no-repeat;
    display: inline-block;
    width: 49px;
    height: 49px;
    cursor: pointer;
}
.upload-text {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    text-align: center;
}
.upload-button {
    background-color: #6d9333;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}
.file-list {
    margin-top: 20px;
    list-style: none;
    padding: 0;
}
.file-list li {
    margin-bottom: 5px;
}
.alert-success {
    color: green;
    margin-bottom: 20px;
}
.error {
    color: red;
}

.orderInfo-page-wrapper {
    max-width: 1400px;
    margin:0 auto;
    padding: 0 20px 50px 20px;
}
.orderInfo-page-container {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
}
.orderInfo-header {
    display: flex;
    flex-direction: column;
}
.orderInfo-header img {
    width: 200px;
    height: 60px;
    margin-bottom: 10px;
}
.orderInfo-header-text-1 {
    font-size: 18px;
    font-weight: 700;
    color: #4D4F5C;
    margin-bottom: 2px;
}
.orderInfo-header-text-2 {
    font-size: 16px;
    font-weight: 600;
    color: #4D4F5C;
    margin-bottom: 40px;
}
.orderInfo-check-wrapper {
    display: flex;
    flex-direction: column;
    margin-bottom: 35px;
    padding: 0 0 0 10rem;
}

.check-wrapper {
    height: 20px;
    margin-bottom: 10px;
}
.check-wrapper,
.check-text-wrapper {
    display: flex;
    flex-direction: row;
}
.check-text-wrapper {
    margin-left: -6px;
}
.check-container,
.check-text-container {
    width: 100%;
}
.check-container {
    position: relative;
}
.check-container::after {
    content: '';
    position: absolute;
    top: 50%;
    /* left: 20px; */
    right: 100%;
    transform: translateY(-50%);
    display: block;
    width: calc(100% - 20px);
    border-bottom: 1px dashed #A7A7A7;
    z-index: 1;
}
.active.check-container::after {
    border-bottom: 1px solid #ff6027;
}
.check-container:first-of-type::after {
    display: none;
}
.check-icon {
    background: url('/siteStorage/icons/check-grey.svg');
    width: 20px;
    height: 20px;
    position: absolute;
    z-index: 2;
}
.active .check-icon {
    background: url('/siteStorage/icons/check.svg');
}
.check-text-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.check-img {
    width: 35px;
    height: 35px;
    flex-shrink: 0;
}
.wait-img {
    background: url('/siteStorage/icons/inAsteptare.svg') center no-repeat;
}
.inProd-img {
    background: url('/siteStorage/icons/inProductie.svg') center no-repeat;
}
.prodFinal-img {
    background: url('/siteStorage/icons/productieFinalizata.svg') center no-repeat;
}
.readyToGo-img {
    background: url('/siteStorage/icons/ambalata.svg') center no-repeat;
}
.shipped-img {
    background: url('/siteStorage/icons/expediata.svg') center no-repeat;
}
.toYou-img {
    background: url('/siteStorage/icons/spreTine.svg') center no-repeat;
}
.delivered-img {
    background: url('/siteStorage/icons/final.svg') center no-repeat;
}
.check-text {
    font-size: 14px;
    font-weight: 600;
    color: #000;
    text-align: center;
    margin-left: -43px;
    max-width: 130px;
}

.orderInfo-width-wrapper {
    display: flex;
    flex-direction: row;
    gap: 40px;
}
.orderInfo-width-container {
    width: calc(50% - 40px);
}
.orderInfo-detail-drop {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
}
.orderInfo-detail-drop-title-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    background-color: #DFDFDF;
    padding: 10px 15px;
}
.orderInfo-detail-drop-title {
    font-size: 14px;
    font-weight: 700;
    color: #000;
}
.orderInfo-detail-drop-icon {
    display: inline-block;
    background: url('/siteStorage/icons/arrow-full-up.svg') center no-repeat;
    width: 15px;
    height: 15px;
    transition: all .3s;
}
.orderInfo-detail-drop-icon.inactive {
    rotate: 180deg;
}
.orderInfo-detail-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background-color: #F9F9F9;
}
.orderInfo-detail-item:nth-child(odd) {
    background-color: #FFD9C3;
}
.detail-text-1 {
    font-size: 14px;
    font-weight: 500;
    color: #000;
    width: 50%;
}
.detail-text-2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #000;
    width: 50%;
}
a.detail-text-2 {
    color: #8290F8;
}
.detail-text-2 .icon {
    background: url('/siteStorage/icons/download.svg') center no-repeat;
    width: 20px;
    height: 20px;
}
.operator-container {
    padding: 11px 15px;
    background-color: #F9F9F9;
}
.operator-name {
    font-size: 19px;
    font-weight: 700;
    color: #FF6027;
}
.operator-item-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    margin-top: 14px;
}
.operator-item-container .img {
    width: 20px;
    height: 20px;
}
.operator-item-container .phone-img {
    display: inline-block;
    background: url('/siteStorage/icons/phone.svg') center no-repeat;
}
.operator-item-container .whatsapp-img {
    display: inline-block;
    background: url('/siteStorage/icons/whatsapp.svg') center no-repeat;
}
.operator-item-container .mail-img {
    display: inline-block;
    background: url('/siteStorage/icons/mail-open-outline.svg') center no-repeat;
}
.operator-item-container .text {
    font-size: 14px;
    font-weight: 600;
    color: #4D4F5C;
}
.delivery-date-wrapper {

}
.delivery-date-text-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 15px;
    margin-bottom: 20px;
    background-color: #FFD9C3;
    border-radius: 8px;
}
.delivery-date-text-container.mobile {
    display: none;
}
.delivery-date-text-container .text-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.delivery-date-text-container .text-container .text {
    font-size: 14px;
    font-weight: 500;
}
.delivery-date-text-container .text-container .text.date {
    font-weight: 700;
}
.delivery-date-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem auto;
    width: 60%;
    height: 307px;
    /* background-color: #38aff1; */
}
.delivery-date-image-container.mobile {
    display: none;
}
.installation-guide-container {
    order: 2;
    margin-bottom: 10px;
}
.representative-container {
    order: 1;
}
@media (max-width: 768px) {
    .installation-guide-container {
        order: 1;
    }

    .representative-container {
        order: 2;
    }
}
.installation-guide-text-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 9px 15px;
    background-color: #dfdfdf;
    border-radius: 8px;
    margin-bottom: 5px;
    font-weight: bold;
}
.iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 10px;
}
.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.check-container.inactive .check-icon,
.check-img.inactive,
.check-text-container.inactive .check-text {
    filter: grayscale(100%);
    opacity: 0.3; /* Optional: to add a faded effect */
}

.check-container.active .check-icon,
.check-img.active,
.check-text-container.active .check-text {
    filter: none;
    opacity: 1;
}
.inactive-icon {
    filter: grayscale(100%);
    opacity: 0.3; /* Optional: to add a faded effect */
}

.clickable {
    color: #e7743d; /* Existing color */
    cursor: pointer; /* Show pointer cursor */
    transition: color 0.2s ease; /* Smooth transition for hover effects */
}

.clickable:hover {
    color: #d0642b; /* Darker shade on hover */
    text-decoration: underline; /* Optional: add underline on hover */
}

.partner-name-display {
    font-weight: bold;
    text-align: center;
}

.form-control {
    width: 100%;
    height: 38px;
    border: 1px solid #D0D0D5;
    outline: none;
    color: #43425D;
    background-color: #fff;
    font-size: 13px;
    border-radius: 8px;
    padding: 0px 13px;
    appearance: none; /* hide default arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    cursor: pointer;
    transition: all .3s;
}

/* Custom arrow */
.form-control-wrapper {
    position: relative;
    width: fit-content;
    display: inline-block;
}
.form-control-wrapper::after {
    content: '';
    position: absolute;
    right: 2px;
    top: 20%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: url('/siteStorage/icons/arrow-full-up.svg') center no-repeat;
    background-size: contain;
    rotate: 180deg;
    pointer-events: none;
    filter: invert(41%) sepia(94%) saturate(0%) hue-rotate(177deg) brightness(101%) contrast(99%);
}