ecomlab-components-next 0.1.28 → 0.1.29

package/dist/components/Table/Table/Table.scss

@@ -0,0 +1,1524 @@
+// @font-face {
+//     font-family: IBMPlexSans;
+//     src: url("../../../public/font/IBMPlexSans-Regular.ttf");
+//     font-weight: 400;
+//     font-style: normal;
+// }
+
+// @font-face {
+//     font-family: IBMPlexSans;
+//     src: url("../../../public/font/IBMPlexSans-Medium.ttf");
+//     font-weight: 500;
+//     font-style: normal;
+// }
+
+// @font-face {
+//     font-family: NunitoSans;
+//     src: url("../../../public/font/NunitoSans/NunitoSans_7pt-Regular.ttf");
+//     font-weight: 400;
+//     font-style: normal;
+// }
+
+// @font-face {
+//     font-family: NunitoSans;
+//     src: url("../../../public/font/NunitoSans/NunitoSans_7pt-Light.ttf");
+//     font-weight: 300;
+//     font-style: normal;
+// }
+
+
+// @font-face {
+//     font-family: NunitoSans;
+//     src: url("../../../public/font/NunitoSans/NunitoSans_7pt-Medium.ttf");
+//     font-weight: 600;
+//     font-style: normal;
+// }
+
+// @font-face {
+//     font-family: NunitoSans;
+//     src: url("../../../public/font/NunitoSans/NunitoSans_7pt-Regular.ttf");
+//     font-weight: 100;
+//     font-style: normal;
+// }
+
+
+.table-ver-3 {
+    width: calc(100% - 2px);
+    border-collapse: separate;
+    border-spacing: 0;
+    box-sizing: border-box;
+    background-color: white;
+    font-size: 10px;
+    font-weight: 100;
+    border-radius: 8px;
+    border-collapse: collapse;
+    border: none;
+    overflow-x: auto;
+    table-layout: initial;
+    border-collapse: separate;
+    //    overflow: hidden;
+
+    * {
+        font-family: NunitoSans;
+    }
+
+    .text {
+        font-size: 12px;
+    }
+
+    // Подсказка
+    .col {
+        position: relative;
+        overflow: visible;
+
+        .tooltip_black {
+            max-width: 200px;
+            opacity: 0;
+            visibility: hidden;
+            background-color: #4A4A4A;
+            border-radius: 2px;
+            position: absolute;
+            top: 90%;
+            left: calc(30px);
+            z-index: 100;
+            width: max-content;
+            height: auto;
+            padding: 10px;
+            border-radius: 4px;
+            background: #264820;
+            box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
+            color: #FFF;
+            font-family: NunitoSans;
+            font-size: 12px;
+            font-style: normal;
+            font-weight: 600;
+            line-height: 14px;
+
+        }
+
+        &:hover {
+            .tooltip_black {
+                opacity: 1;
+                visibility: visible;
+                transition: 0.5s;
+            }
+        }
+    }
+
+    .sticky-td,
+    .sticky_th {
+        position: sticky;
+        left: 0;
+        z-index: 2;
+        border-right: 1px solid #EDEFED;
+        background: #fff;
+    }
+
+    .sticky_th {
+        background: #fff;
+        position: sticky;
+        top: 0;
+        left: 0;
+        z-index: 4;
+        //  background-color: white;
+    }
+
+    tbody {
+        * {
+            color: #0B110B;
+            font-family: NunitoSans;
+            font-size: 12px;
+            line-height: 13px;
+            font-style: normal;
+            font-weight: 400;
+            letter-spacing: 0px;
+        }
+    }
+
+
+    .date-picker {
+        border: 1px solid black;
+        border-radius: 16px;
+        width: 32px;
+        height: 32px;
+        border-radius: 22px;
+        padding: 10px;
+        transition-duration: 1000ms;
+        cursor: pointer;
+        background-repeat: no-repeat;
+        font-size: 12px;
+        color: transparent;
+        border: 1px solid #F0F0F0;
+        overflow: hidden;
+        background-image: url(https://dl.ecomru.ru/svg-storage/calendar.svg);
+        background-color: white;
+        background-size: 14px;
+        background-position: 50% 50%;
+        padding-left: 22px;
+        margin-top: 4px;
+        margin-bottom: 4px;
+
+        &:focus {
+            width: 225px;
+            cursor: pointer;
+            padding-left: 30px;
+            color: #020617;
+            outline: none;
+            border: 1px solid #F0F0F0;
+            background-position: 10px 50%;
+        }
+
+        img {
+            display: none;
+        }
+    }
+
+    & tr,
+    td,
+    th {
+        //  padding: 10px 0px;
+        font-size: 12px;
+
+    }
+
+    tbody {
+        tr {
+            font-size: 12px;
+
+            &:nth-child(even) {
+                //    background-color: #FAFBFE;
+                border: none;
+            }
+
+            &:hover {
+                transition: 0.3s;
+                background-color: #F8F9FE;
+
+                .img-box {
+                    &::after {
+                        content: '';
+                        display: block;
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        right: 0;
+                        bottom: 0;
+                        background-color: rgb(237 248 254);
+                        opacity: 0.5;
+                        pointer-events: none;
+
+                    }
+                }
+            }
+        }
+    }
+
+    td {
+        text-align: left;
+    }
+
+    th {
+        text-align: left;
+        font-weight: 100;
+        font-size: 12px;
+        line-height: 12px;
+        font-weight: bold;
+        //    color: #1A1A1A;
+        border-bottom: 1px solid #F1F2FD;
+        word-wrap: break-word;
+        min-width: 51px;
+        //  background-color: white;
+
+
+        .search_table2,
+        .search_table2_active {
+            position: relative;
+            width: 100%;
+            height: 24px;
+            border-radius: 4px;
+            padding-left: 10px;
+            padding-right: 10px;
+            cursor: pointer;
+            background-repeat: no-repeat;
+            // color: transparent;
+            border: 1px solid #BDBCDB;
+            overflow: hidden;
+            background-color: white;
+            background-position: 10px 50%;
+            color: #11195D;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            font-family: Inter;
+            font-size: 12px;
+            font-style: normal;
+            font-weight: 100;
+            line-height: 16px;
+            background-image: none;
+            margin-top: 0;
+
+            &:hover {
+                transition: 0.3s;
+                border: 1px solid #6C6AAC;
+            }
+
+            &:focus {
+                border: 2px solid #1890FF;
+                outline: none;
+            }
+
+            &::placeholder {
+                color: #D9D9D9;
+                font-size: 12px;
+            }
+        }
+    }
+
+    thead {
+        position: sticky;
+        top: 0;
+        background-color: white;
+        z-index: 5;
+        -webkit-backface-visibility: hidden;
+        /* Chrome, Safari, Opera */
+        backface-visibility: hidden;
+        will-change: transform;
+    }
+
+    td {
+        padding: 12px 40px 12px 12px;
+        position: relative;
+        // overflow: hidden;
+        width: 100%;
+        // max-width: 100px;
+        border-bottom: 1px solid #F1F2FD;
+
+        .link__blue {
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+    }
+
+    .col-filters {
+        background-color: #fff;
+        border-bottom: 1px solid #F1F2FD;
+        padding: 4px 0px;
+    }
+
+    .tr-col-headers {
+        background-color: #fff;
+    }
+
+    .tr-col-filters {
+        border-bottom: 1px solid #D9D9D9;
+
+    }
+
+    .col-th-border {
+        padding: 10px 12px;
+        height: 100%;
+        // padding-right: 0px;
+        // margin-right: 8px;
+        min-width: 100%;
+        resize: horizontal;
+        display: flex;
+        gap: 8px;
+        position: relative;
+        flex-shrink: 0;
+        flex-grow: 0;
+        //background-color: white;
+        //border-right: 1px solid #BDBCDB;
+        position: relative;
+
+        .sort-icon {
+            display: inline-block;
+            min-width: 13px;
+            width: 13px;
+            height: 13px;
+            margin-right: 8px;
+        }
+
+        &::after {
+            content: '';
+            width: 8px;
+            height: 15px;
+            background-color: #ededed;
+            position: absolute;
+            bottom: 0;
+            right: 4px;
+            z-index: 2;
+            clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
+        }
+
+        &_context {
+            &::after {
+                display: none;
+            }
+        }
+
+
+        &:hover {
+
+            .sort-icon {
+                fill: #6C6AAC;
+            }
+
+            &::after {
+                background-color: #BDBCDB;
+                transition: 0.3s;
+            }
+        }
+
+        .text-and-icon {
+            display: flex;
+            justify-content: space-between;
+            width: 100%;
+            align-items: center;
+            gap: 5px;
+        }
+
+        img {
+            cursor: pointer;
+        }
+
+        &::-webkit-resizer {
+            display: none;
+        }
+    }
+
+    & thead {
+        width: 100%;
+
+        & tr {
+            width: 100%;
+            text-align: center;
+            background-color: white;
+            font-weight: 100;
+            padding-top: 5px;
+            padding-bottom: 5px;
+        }
+
+        // Заголовок чекбоксов
+        .th-check {
+            min-width: 50px;
+            max-width: 50px;
+            width: 100;
+            user-select: none;
+            text-align: center;
+            font-size: 16px;
+        }
+
+        th.DESC,
+        th.ASC {
+            display: flex;
+            align-items: center;
+
+            &::after {
+                content: '';
+                width: 9px;
+                height: 12px;
+                margin-left: auto;
+                background-image: url('https://dl.ecomru.ru/svg-storage/arrow-down.svg');
+                background-repeat: no-repeat;
+                transform: rotate(0.5turn);
+            }
+        }
+
+        th.DESC {
+            &::after {
+                transform: rotate(0.5turn);
+            }
+        }
+
+    }
+
+    // Кнопка таблицы
+
+    .btn__edit,
+    .btn__delete,
+    .btn__action {
+        display: inline-block;
+        background-position: center;
+        background-size: contain;
+        background-repeat: no-repeat;
+        text-align: center;
+        width: 20px;
+        height: 20px;
+        max-width: 20px;
+        max-height: 20px;
+        border: none;
+        background-color: inherit;
+        cursor: pointer;
+    }
+
+    .btn__delete {
+        background-image: url('https://dl.ecomru.ru/svg-storage/delete (2).svg');
+    }
+
+    // Кнопка сброса чекбоксов
+
+    .btn-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+
+        .reset-checkbox-btn {
+            width: 20px;
+            height: 20px;
+            border: none;
+            background-image: url('./img/close_icon.svg');
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: 20px;
+        }
+    }
+
+    // фильтр-бокс для шапки таблицы
+
+
+
+    // ТИПЫ TD 
+
+    // default 
+
+    .type-td_text {
+        text-align: left;
+        overflow: hidden;
+
+        .text-box {
+            overflow: hidden;
+        }
+
+        & .text,
+        .text_grey {
+            display: -webkit-box;
+            -webkit-line-clamp: 3; // количество строк
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            hyphens: auto;
+            // display: inline-block;
+            // overflow: hidden;
+            // text-overflow: ellipsis;
+            // white-space: nowrap;
+            font-size: 12px;
+            //  color: #020617;
+            font-weight: 100;
+
+            &_grey {
+                font-size: 12px;
+                color: grey;
+            }
+        }
+
+
+    }
+
+    // string-layers
+
+    .type-td_string-layers {
+
+        &__content {
+            display: flex;
+            flex-direction: column;
+            align-items: self-start;
+            overflow: hidden;
+            gap: 4px;
+
+            .grey-box {
+                display: flex;
+                min-height: 24px;
+                align-items: center;
+                gap: 4px;
+                border-radius: 128px;
+                background: #F4F6F4;
+                padding-left: 8px;
+                padding-right: 8px;
+                overflow: hidden;
+
+                img {
+                    width: 12px;
+                    height: auto;
+                }
+
+                .text_grey {
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+            }
+        }
+
+
+
+        //overflow: hidden;
+
+        .text {
+            color: #1890FF;
+        }
+
+        .copy-box {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+
+            .text {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+
+            .button-copy {
+                position: relative;
+                width: 16px;
+                height: 16px;
+            }
+        }
+
+        .text-box {
+            margin-top: 5px;
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+
+            & .text,
+            .text_grey {
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 12px;
+                color: #1890FF;
+                font-weight: 100;
+
+                &_grey {
+                    font-size: 12px;
+                    //color: #1890FF;
+                    color: grey;
+                    font-weight: 100;
+                }
+            }
+        }
+
+        .btn {
+            width: min-content;
+            padding-left: 4px;
+            padding-right: 4px;
+            height: 18px;
+            min-width: 50px;
+            background-color: #F7FDFC;
+            border: 1px solid #EDF2F8;
+            border-radius: 4px;
+            background-image: url('./img/location.svg');
+            background-repeat: no-repeat;
+            background-position: center right 4px;
+            color: #1890FF;
+            font-size: 12px;
+        }
+    }
+
+    // action-btn
+
+    .type-td_action-btn {
+        display: flex;
+        justify-content: flex-start;
+
+        .text_blue {
+            width: 100%;
+            display: -webkit-box;
+            -webkit-line-clamp: 3; // количество строк
+            -webkit-box-orient: vertical;
+            text-decoration: none;
+            overflow: hidden;
+            hyphens: auto;
+            color: #0009E8;
+        }
+
+    }
+
+    // image-with-text
+
+    .type-td_image-with-text {
+        display: flex;
+        gap: 8px;
+        overflow: hidden;
+        color: #fff;
+        width: 100%;
+
+        p {
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            hyphens: auto;
+            font-weight: 100;
+        }
+
+        span {
+            display: -webkit-box;
+            -webkit-line-clamp: 5; // количество строк
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            hyphens: auto;
+            font-weight: 100;
+        }
+
+        a {
+            width: 100%;
+            display: -webkit-box;
+            -webkit-line-clamp: 5; // количество строк
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            hyphens: auto;
+            color: #0009E8;
+        }
+
+        img {
+            width: 24px;
+            height: 24px;
+        }
+    }
+
+    // link 
+
+    .type-td_link,
+    .td-col-text {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        .popup-td {
+            opacity: 0;
+            visibility: hidden;
+            display: inline-block;
+            box-shadow: .3em .6em 1.3em rgba(0, 0, 0, .25);
+            position: absolute;
+            background-color: white;
+            padding: 8px 16px;
+            border-radius: 16px;
+            border: 1px solid #D9D9D9;
+            width: auto;
+            top: calc(50% - 8px);
+            left: -16px;
+            z-index: 100;
+            opacity: 0;
+            visibility: hidden;
+            transition: 0.5;
+        }
+
+
+    }
+
+    // date
+
+    .date-with-time {
+        display: flex;
+        align-items: center;
+        flex-wrap: nowrap;
+        gap: 8px;
+
+        span {
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+    }
+
+    .type-td_date {
+        color: #00B46C;
+
+        .react-datepicker-wrapper {
+            .react-datepicker__input-container {
+                input {
+                    display: flex;
+                    justify-content: center;
+                    border: 1px solid #1890FF;
+                    border-radius: 8px;
+                    padding: 2px 4px;
+                    min-width: 90px;
+                    width: min-content;
+                    max-width: 90px;
+                    text-align: center;
+
+                    &:focus {
+                        outline: none;
+                    }
+                }
+            }
+        }
+    }
+
+    // rating
+
+    .type-td_rating {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        width: 100%;
+        overflow: hidden;
+    }
+
+    // currency
+
+    .type-td_currency {
+        display: flex;
+        align-items: center;
+        flex-wrap: nowrap;
+        gap: 4px;
+        overflow: hidden;
+        letter-spacing: 1px;
+        justify-content: flex-end;
+
+        .val {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+
+            span {
+                font-weight: 600;
+                font-size: 12px;
+                color: #A1D9A3;
+            }
+        }
+
+        .curr {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            font-family: NunitoSans;
+            font-size: 12px;
+            font-style: normal;
+            line-height: 16px;
+            font-weight: 300;
+            color: #B4B8B4;
+
+            span {
+                color: #0B110B;
+                font-weight: 700;
+            }
+        }
+    }
+
+    // image
+
+    .type-td_image {
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        margin-left: auto;
+        margin-right: auto;
+        padding: 12px;
+
+        .img-box {
+            display: flex;
+            flex-direction: row;
+            gap: 5px;
+            position: relative;
+            width: 114px;
+            height: 107px;
+
+            .single-img-container {
+
+                img {
+                    object-fit: contain;
+                    width: 100%;
+                    height: 100%;
+                }
+
+                .enlarge-photo {
+                    display: block;
+                    justify-content: center;
+                    align-items: center;
+                    opacity: 1;
+                    visibility: visible;
+                    width: 300px;
+                    height: 300px;
+                    position: absolute;
+                    // top: -12px;
+                    left: calc(100% + 20px);
+                    z-index: 10;
+                    transition: 0.3s;
+                    background-color: #ffffff;
+                    padding: 16px;
+                    -webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
+                    -moz-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
+                    box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
+                    border-radius: 8px;
+
+                    img {
+                        width: 100%;
+                        height: auto;
+                        max-width: calc(300px - 32px);
+                        object-fit: contain;
+                        height: 300px;
+                        max-height: calc(300px - 32px);
+                    }
+                }
+            }
+
+            &:hover {
+                // .enlarge-photo {
+                //     display: flex;
+                //     opacity: 1;
+                //     visibility: visible;
+                //     transition: 0.3s;
+                // }
+            }
+
+        }
+    }
+
+    // num
+
+    .type-td_num {
+        text-align: right;
+        letter-spacing: 1px;
+    }
+
+    // name
+
+    .type-td_name {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        .icon-name {
+            display: flex;
+            width: 40px;
+            min-width: 40px;
+            height: 40px;
+            justify-content: center;
+            align-items: center;
+            border-radius: 50%;
+            border: 1px solid #FFF;
+            background: rgba(245, 124, 56, 0.60);
+            color: #F6F7F6;
+            text-align: center;
+            font-family: NunitoSans;
+            font-size: 12px;
+            font-style: normal;
+            font-weight: 700;
+            line-height: 14px;
+        }
+
+        .text_name {
+            overflow: hidden;
+            color: #636D65;
+            font-family: NunitoSans;
+            font-size: 12px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 12px;
+        }
+    }
+
+
+    // copyText
+
+    .type-td_copy-text {
+        display: flex;
+        text-align: start;
+        max-width: 100%;
+        width: 100%;
+
+        .copy-box {
+            display: flex;
+            width: 100%;
+            align-items: center;
+            gap: 8px;
+
+            .text {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+
+
+            .button-copy {
+                position: relative;
+                width: 16px;
+                height: 16px;
+            }
+        }
+
+        .tooltip-box {
+            position: absolute;
+            top: calc(50% - 8px);
+            right: 0;
+
+            .tooltip_black {
+                opacity: 0;
+                visibility: hidden;
+                overflow: hidden;
+                color: white;
+                position: absolute;
+                top: 90%;
+                left: calc(30px);
+                z-index: 100;
+                width: max-content;
+                height: auto;
+                padding: 10px;
+                border-radius: 4px;
+                background: #264820;
+                box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
+                color: #FFF;
+                font-family: NunitoSans;
+                font-size: 12px;
+                font-style: normal;
+                font-weight: 600;
+                line-height: 14px;
+            }
+
+            &:hover {
+                .tooltip_black {
+                    opacity: 1;
+                    visibility: visible;
+                    transition: 0.5s;
+                }
+            }
+        }
+
+
+        .text-box {
+            margin-top: 5px;
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+
+            & .text,
+            .text_grey {
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 12px;
+                color: #1890FF;
+                font-weight: 100;
+
+                &_grey {
+                    font-size: 12px;
+                    //color: #1890FF;
+                    color: grey;
+                    font-weight: 100;
+                }
+            }
+        }
+
+        .btn {
+            width: min-content;
+            padding-left: 4px;
+            padding-right: 4px;
+            height: 18px;
+            min-width: 50px;
+            background-color: #F7FDFC;
+            border: 1px solid #EDF2F8;
+            border-radius: 4px;
+            background-image: url('./img/location.svg');
+            background-repeat: no-repeat;
+            background-position: center right 4px;
+            color: #1890FF;
+            font-size: 12px;
+        }
+    }
+
+    //
+
+    .type-td_status-with-color {
+
+        .text {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+
+    // contextMenu
+
+    .type-td_context-menu {
+        border-right: 1px solid #D9D9D9;
+        overflow: visible;
+
+        .drop-context-menu {
+            position: absolute;
+            flex-direction: column;
+            min-width: 124px;
+            top: calc(100% + 4px);
+            right: 0px;
+            background-color: #FBFBFB;
+            border-radius: 8px;
+            overflow: hidden;
+            border: 1px solid #E0E7F2;
+            background: #FFF;
+            box-shadow: 0px 4px 4px 0px rgba(30, 41, 59, 0.06);
+            z-index: 1;
+
+            &__btn {
+                display: flex;
+                padding: 8px;
+                gap: 8px;
+                align-items: center;
+                justify-content: space-between;
+                width: 100%;
+                color: #1E293B;
+                text-align: left;
+                font-family: Inter;
+                font-size: 12px;
+                font-style: normal;
+                font-weight: 100;
+                line-height: normal;
+                border: none;
+                min-height: 32px;
+                background-color: inherit;
+
+                &:hover {
+                    transition: 0.3s;
+                    background-color: #F7FAFD;
+                }
+            }
+
+            .btn-delete {
+                display: flex;
+                border-top: 1px solid #E0E7F2;
+            }
+        }
+    }
+
+
+    .img-table {
+        display: inline-block;
+        width: 56px;
+        height: 56px;
+    }
+
+    .filter-btn-box {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: auto;
+        border: none;
+        position: relative;
+        padding-left: 12px;
+        padding-right: 12px;
+        margin-right: -1px;
+        //border-right: 1px solid #BDBCDB;
+
+        .filter-icon-default,
+        .filter-icon-reset {
+            width: 17px;
+            height: 17px;
+            min-width: 17px;
+            margin-left: 14px;
+            cursor: pointer;
+        }
+
+        .filter-icon-default {
+            // &:hover {
+            //     path {
+            //         stroke: #6C6AAC;
+            //     }
+            // }
+        }
+
+        .btn__filter_blue2 {
+            width: 17px;
+            height: 17px;
+            margin-left: 14px;
+            cursor: pointer;
+        }
+
+        .filter-box {
+            position: relative;
+            background-color: #fff;
+            max-width: 100%;
+            width: 100%;
+
+            &__btn {
+                display: block;
+                position: absolute;
+                width: 12px;
+                height: 12px;
+                border-radius: 50%;
+                top: calc(50% - 2px);
+                right: 5px;
+                border: none;
+                background-image: url('./img/close_white.svg');
+                background-position: center;
+            }
+        }
+
+        .btn__blue {
+            white-space: nowrap;
+            margin: 8px 10px;
+        }
+    }
+
+    .smooth {
+        transition: 1s;
+    }
+
+}
+
+.loader-table {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    border: none;
+}
+
+.search_table_active {
+    outline: 1px solid #cacaca;
+}
+
+.no-data-table {
+    width: 100%;
+    height: 100%;
+    border-radius: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 22px;
+    color: grey;
+
+    .img_data {
+        width: 160px;
+        height: 160px;
+    }
+
+    &__content {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        align-items: center;
+        position: relative;
+        min-width: 160px;
+        min-height: 160px;
+
+        .img_glass {
+            position: absolute;
+            bottom: 30px;
+            right: -25%;
+            animation: myOrbit 4s linear;
+            animation-iteration-count: 1;
+            width: 80px;
+            height: 80px;
+        }
+
+        @keyframes myOrbit {
+            0% {
+                -webkit-transform: rotate(360deg) translateX(30px) rotate(-360deg);
+            }
+
+
+            // 100%   { -webkit-transform:rotate(0deg) translateX(0px) rotate(0deg); }
+            100% {
+                -webkit-transform: rotate(-360deg) translateX(0px) rotate(360deg);
+            }
+        }
+    }
+
+    .text_blue {
+        font-size: 24px;
+        color: #014E94;
+        max-width: 160px;
+        text-align: center;
+        text-decoration: none;
+    }
+}
+
+.popup_td {
+    opacity: 0;
+    visibility: hidden;
+    display: inline-block;
+    box-shadow: .3em .6em 1.3em rgba(0, 0, 0, .25);
+    position: absolute;
+    background-color: white;
+    padding: 8px 16px;
+    border-radius: 16px;
+    border: 1px solid #D9D9D9;
+    width: 100%;
+    max-width: 100%;
+    top: calc(100% - 16px);
+    left: 0;
+    z-index: 100;
+    transition: 0.5;
+}
+
+td:hover {
+    .popup_td-hover {
+        opacity: 0;
+        visibility: hidden;
+        display: inline-block;
+        box-shadow: .3em .6em 1.3em rgba(0, 0, 0, .25);
+        position: absolute;
+        background-color: white;
+        padding: 8px 16px;
+        border-radius: 16px;
+        border: 1px solid #D9D9D9;
+        width: 100%;
+        max-width: 100%;
+        top: calc(100% - 16px);
+        left: 0;
+        z-index: 100;
+        opacity: 1;
+        visibility: visible;
+        transition: 0.5;
+    }
+}
+
+.table-loading-box {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: auto;
+    margin-right: auto;
+    height: 100%;
+}
+
+.table-box-component__content {
+    background-color: white;
+    position: relative;
+
+}
+
+.loader-box-tr {
+    padding: 8px;
+    height: 100%;
+    border-top: 1px solid #D9D9D9;
+    border-bottom: 1px solid #D9D9D9;
+}
+
+.td-text-table {
+    display: -webkit-box;
+    -webkit-line-clamp: 4; // количество строк
+    -webkit-box-orient: vertical;
+    overflow-x: hidden;
+    hyphens: auto;
+    color: #020018;
+    line-height: 16px;
+    letter-spacing: 0.14px;
+    font-family: NunitoSans;
+    overflow: hidden;
+    color: #0B110B;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 14px;
+    letter-spacing: .5px;
+    cursor: pointer;
+
+    .header-img {
+        width: 16px;
+        height: auto;
+    }
+
+    .popup-th {
+        opacity: 0;
+        visibility: hidden;
+        display: inline-block;
+        box-shadow: .3em .6em 1.3em rgba(0, 0, 0, .25);
+        position: absolute;
+        background-color: white;
+        padding: 8px 16px;
+        border-radius: 16px;
+        border: 1px solid #D9D9D9;
+        width: auto;
+        top: calc(100% + 8px);
+        left: -16px;
+        z-index: 100;
+        transition: 0.5;
+    }
+
+
+    &:hover>.popup-th {
+        opacity: 0;
+        visibility: hidden;
+        display: inline-block;
+        box-shadow: .3em .6em 1.3em rgba(0, 0, 0, .25);
+        position: absolute;
+        background-color: white;
+        padding: 8px 16px;
+        border-radius: 16px;
+        border: 1px solid #D9D9D9;
+        width: auto;
+        top: calc(100% + 8px);
+        left: -16px;
+        z-index: 100;
+        opacity: 1;
+        visibility: visible;
+        transition: 0.5;
+    }
+}
+
+@keyframes showDiv {
+
+    0%,
+    99% {
+        visibility: hidden;
+        overflow: 0;
+    }
+
+    100% {
+        visibility: visible;
+        opacity: 1;
+    }
+}
+
+
+// date 
+.date-box-filter-table {
+    position: absolute;
+    display: none;
+    z-index: 5;
+    top: calc(100% + 10px);
+    left: 0;
+
+    display: none;
+    width: auto;
+    position: absolute;
+    border-radius: 8px;
+    background-color: white;
+    top: calc(100% + 10px);
+    left: 0;
+    -webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
+    box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2);
+    z-index: 5;
+    overflow: hidden;
+    cursor: pointer;
+    overflow: hidden;
+    flex-direction: column;
+
+    .react-datepicker {
+        border: none;
+        border-radius: 8px;
+    }
+
+    .btn-group {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        margin-bottom: 8px;
+    }
+}
+
+.collect_info_box {
+    display: flex;
+    gap: 20px;
+    width: 100%;
+    padding: 12px;
+    height: 100%;
+
+    .img-box {
+        min-width: 100px;
+        width: 100px;
+        height: 100px;
+        border-radius: 4px;
+        border: 1px solid #EDEFED;
+        background: #FFF;
+
+        .collect_info_img {
+            object-fit: contain;
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .text_info_box {
+        min-width: 100px;
+        width: 100%;
+        display: flex;
+        gap: 3px;
+        // justify-content: space-between;
+        height: 100%;
+        flex-direction: column;
+
+        .text_info_name {
+            font-family: NunitoSans;
+            overflow: hidden;
+            color: #636D65;
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 500;
+            line-height: 16px;
+        }
+
+        .text_info_desc,
+        .text_info_brand {
+            //   white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            font-family: NunitoSans;
+            overflow: hidden;
+            color: #636D65;
+            text-overflow: ellipsis;
+            font-size: 10px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 12px;
+        }
+
+        .text_info_sub_desc_box {
+            display: flex;
+            //  justify-content: space-between;
+            align-items: flex-end;
+            gap: 10px;
+            flex-wrap: nowrap;
+            width: 100%;
+            margin-top: 4px;
+
+            .text_sum {
+                display: flex;
+                padding: 2px;
+                align-items: flex-end;
+                gap: 4px;
+                border-radius: 4px;
+                background: #F0F2F4;
+                color: #0B110B;
+                font-family: NunitoSans;
+                font-size: 12px;
+                font-style: normal;
+                font-weight: 700;
+                line-height: 12px;
+
+                span {
+                    color: #B4B8B4;
+                    font-size: 10px;
+                    font-weight: 500;
+                }
+            }
+
+            .text_info_sub_desc {
+                color: #B4B8B4;
+                font-family: NunitoSans;
+                font-size: 12px;
+                font-style: normal;
+                font-weight: 400;
+                line-height: 12px;
+
+                span {
+                    color: #000;
+                }
+            }
+
+            .button-copy {
+                position: relative;
+                width: 16px;
+                height: 16px;
+            }
+        }
+    }
+}