.color-secondary-2 {
    color: var(--secondaryTextColor) !important;
}

.change-order-type {
    cursor: pointer;
    display: flex;
}

.change-order-type__body {
    display: flex;
    flex-direction: column;
    padding: 20px;
    min-height: 150px;
    height: 100%;
    width: 100%;
    border-radius: 24px;
    border: 2px solid #ECF1F5;
    gap: 10px;
    transition: .2s;
}

.change-order-type:hover .change-order-type__body {
    border-color: var(--primary);
}

.change-order-type__body-icon {
    transition: .2s;
}

.change-order-type:hover .change-order-type__body .change-order-type__body-icon {
    color: var(--primary);
}

.change-order-type__body-title {
    margin-top: auto;

    font-size: 17px;
    font-style: normal;
    font-weight: 500;
}

.change-order-type__body-text {
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
}

.g-16 {
    --bs-gutter-x: 16px;
    --bs-gutter-y: 16px;
}

.g-12 {
    --bs-gutter-x: 12px;
    --bs-gutter-y: 12px;
}

.g-17 {
    --bs-gutter-x: 17px;
    --bs-gutter-y: 17px;
}

.card {
    display: flex;
    flex-direction: column;
    border-radius: 24px;
}

.card-outline {
    border: 2px solid #ECF1F5;
    background: #FFF;
}

.select-count {
    display: flex;
    align-items: center;
    gap: 14px;
}

.select-count .btn--secondary {
    width: 32px;
    height: 32px;
}

.select-count__value {
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.hr {
    border: 0;
    border-top: 1px solid #EEF2F5;
}

.hr-vertical {
    border: 0;
    border-left: 1px solid #EEF2F5;
}

.selects-groups {
    display: flex;
    align-items: center;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    gap: 14px;
}

.selects-groups .select-wrapper {
    flex: auto;
}

.icon-left {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 16px;
}

.wrapper-input.input-icon-left {
    position: relative;
}

.wrapper-input.input-icon-left .input {
    padding-left: 50px;
}

.product-item {
    display: flex;
    gap: 16px;
    --icon-size: 60px;
}

.product-item--md {
    --icon-size: 44px;
    gap: 14px;
}

.product-item__img {
    width: var(--icon-size);
    height: var(--icon-size);
    flex: 0 0 var(--icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #F1F7FB;
    padding: 5px;
}

.product-item__img img {
    margin: auto;
    object-fit: contain;
    max-height: 100%;
}

.product-item__body {
    flex: auto;
    overflow: hidden;
}

.product-item__title {
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    margin-bottom: 6px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-item__group {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 15px;
}

.product-item__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
}

.product-item__desc {
    color: #6F8FA6;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 12px;
}

.product-item__price {
    color: var(--primary);
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
}

.product-item--md .product-item__price,
.product-item--md .select-count__value {
    font-size: 15px;
}

.tabs-white-shadow {
    /* margin-left: -20px;
    padding-right: -20px;
    padding-left: 20px;
    padding-right: 20px; */
    overflow: visible;
}

.product-item--md .select-count .btn--secondary {
    width: 24px;
    height: 24px;
}

.tabs-white-shadow .swiper-slide {
    width: auto;
}

.tabs-white-shadow-link {
    border-radius: 12px;
    border: 1px solid transparent;
    box-shadow: 0px 3px 8px 0px rgba(235, 235, 235, 0.70), 0px 2px 2px 0px rgba(234, 234, 234, 0.40), 0px 0px 1px 0px rgba(26, 32, 36, 0.24);
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.tabs-white-shadow-link:hover,
.tabs-white-shadow-link.active-tab {
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: none;
}

.page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.page-heading__item {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.product-table {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

.product-table__img {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    /* border: 1px solid rgba(0, 0, 0, 0.06); */
    background-color: #f1f7fb;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    padding: 4px;
}

.product-table__img img {
    object-fit: contain;
}

.upload-block {
    --image-size: 80px;
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
}

.upload-block__image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--image-size, 80px);
    height: var(--image-size, 80px);
    flex: 0 0 var(--image-size, 80px);
    overflow: hidden;
    border-radius: 8px;
    border: 1px dashed #0094FF;
}

.product-table__content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.product-table__name {
    font-size: 14px;
    line-height: 110%;
    color: #010d0c;
}

.product-table__desc {
    font-size: 12px;
    line-height: 117%;
    color: #6f8fa6;
}

.card-mini {
    padding: 18px 20px;
}

.g-24 {
    --bs-gutter-x: 24px;
    --bs-gutter-y: 24px;
}

.card-mini__body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.card-mini__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
}

.card-mini__title {
    color: #6F8FA6;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

.card-mini__value {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 36px;
}

.card-mini__subvalue {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 23px;
}

.card-mini__icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 360px;
    background: #F1F7FB;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn--white {
    background-color: white;
    color: var(--primary);
}

.card-primary {
    background-color: var(--primary);
    color: white;
}

.card-create-preview {
    padding: 18px 20px;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="262" height="29" viewBox="0 0 262 29" fill="none"><path d="M1 12.8765L5.33333 14.1836C9.66667 15.4908 18.3333 18.105 27 14.1836C35.6667 10.2622 44.3333 -0.194861 53 1.11227C61.6667 2.41941 70.3333 15.4908 79 22.0264C87.6667 28.5621 96.3333 28.5621 105 27.255C113.667 25.9478 122.333 23.3336 131 18.105C139.667 12.8765 148.333 5.03368 157 6.34081C165.667 7.64794 174.333 18.105 183 22.0264C191.667 25.9478 200.333 23.3336 209 18.105C217.667 12.8765 226.333 5.03368 235 5.03368C243.667 5.03368 252.333 12.8765 256.667 16.7979L261 20.7193" stroke="white" stroke-opacity="0.08" stroke-width="2"/></svg>');
    background-position: center;
}

.card-outline.tabs {
    padding: 18px 20px;
}

.vertical-tabs {
    display: flex;
    gap: 20px;
}

.vertical-tabs__nav {
    flex: 0 0 100px;
    justify-content: space-between;
    gap: 12px;
    display: flex;
    flex-direction: column;
}

.vertical-tabs__nav-link {
    width: 100%;
    flex-direction: column;
    border-radius: 12px;
    background: #F1F7FB;
    padding: 12px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    color: #6F8FA6;
    border: 1px solid transparent;
}

.vertical-tabs__nav-link.active-tab {
    border-color: var(--primary);
    color: #010D0C;
    background-color: transparent;
}

.vertical-tabs__nav-link .pill {
    border: 0;
    background: #6F8FA6;
    color: white;
}

.vertical-tabs__nav-link.active-tab .pill {
    background: #0094FF;
}

.vertical-tabs__body {
    flex: auto;
    overflow: hidden;
}

.dot {
    display: inline-flex;
    border-radius: 50%;
    width: 6px;
    height: 6px;
}

.table-widthout-borders.table tbody tr td {
    padding: 8px;
}

.table-widthout-borders.table tbody tr:not(:last-child) td {
    border: 0;
}

.category-item {
    display: flex;
    align-items: center;
    gap: 12px;

}

.category-item__image {
    display: flex;
    align-items: center;
    justify-content: center;
    --image-size: 60px;
    cursor: pointer;
    width: var(--image-size);
    height: var(--image-size);
    flex: 0 0 var(--image-size);
    border: 1px dashed #0094ff;
    border-radius: 9px;
    padding: 7px;
}

.category-item__image.image-loaded {
    border-color: #f1f7fb;
    background-color: #f1f7fb;
}

.category-item__image img {
    object-fit: contain;
}

.category-item__image.image-loaded .category-item__image-loaded {
    display: flex;
}

.category-item__image-empty {
    display: flex;
}

.category-item__image-loaded,
.category-item__image.image-loaded .category-item__image-empty {
    display: none;
}

.btn--white-shadow {
    box-shadow: 0 3px 8px 0 rgba(235, 235, 235, 0.7), 0 2px 2px 0 rgba(234, 234, 234, 0.4), 0 0 1px 0 rgba(26, 32, 36, 0.24);
    background: #fff;

}

.btn--white-shadow-2 {
    box-shadow: 0 3px 8px 0 rgba(57, 57, 57, 0.16), 0 2px 2px 0 rgba(50, 50, 50, 0.12), 0 0 1px 0 rgba(26, 32, 36, 0.24);
    background: #fff;
}

.g-10 {
    --bs-gutter-x: 10px;
    --bs-gutter-y: 10px;
}

.wrapper-input.input--xl {
    --size: var(--size--xl);
    min-height: var(--size--xl);
}

.wrapper-input.input--xl .input {
    padding: 8px 16px;
}


.code {
    display: flex;
    flex-wrap: nowrap;
    margin-left: -5px;
    margin-right: -5px;
}

.code>.code-col {
    padding-left: 5px;
    padding-right: 5px;
    max-width: 16.666666%;
    flex: 0 0 16.666666%;
}

.code .code-item {
    flex: 1;
}

.code-item {
    min-height: 62px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    position: relative;
}

.code-item input {
    height: 100%;
    flex: auto;
    text-align: center;
    -webkit-appearance: none;
    font-weight: 400;
    font-size: 20px;
    background-color: transparent !important;
    caret-color: var(--primary);
}

.code-item .code-block {
    border: 1.5px solid var(--primary-light);
    background-color: transparent;
    border-radius: 12px;
    height: 100%;
    pointer-events: none;
    user-select: none;
    width: 100%;
    flex: auto;
    position: absolute;
    top: 0;
    left: 0;
}

.code-item input:focus~.code-block {
    outline: 1.5px solid var(--primary);
}

.code-item input::-webkit-outer-spin-button,
.code-item input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.disabled-primari {
    background-color: #f1f7fb;
    color: #b3c9d9;
    border-color: #f1f7fb;
    pointer-events: none;
}

.color-default {
    color: var(--defaultTextColor);
}

.notifications-item {
    --icon-size: 44px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.notifications-item__icon {
    width: var(--icon-size);
    height: var(--icon-size);
    flex: 0 0 var(--icon-size);
    background: #f1f7fb;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.notifications-item__body {
    overflow: hidden;
    flex: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    line-height: 123%;
}

.notifications-item__title {
    font-weight: 500;
    color: #010d0c;
}

.notifications-item__text {
    font-weight: 400;
    color: #6f8fa6;
}

.hr-84 {
    max-width: 81%;
}