@import './_variables.css';

.order-list-header {
    color: rgba(253, 253, 255, 0.85);
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    font-family: BrownStdRegular;
    min-width: 100%;
    position: sticky;
    top: 0px;
    z-index: 200;
    background-color: var(--norma__neutral--dark-blue);
    width: fit-content;
    height:36px
}
.archive-list-header {
    color: rgba(253, 253, 255, 0.85);
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    font-family: BrownStdRegular;
    min-width: 100%;
    position: sticky;
    top: 0px;
    background-color: var(--norma__neutral--dark-blue);
    width: fit-content;
    height: 36px;
    z-index: 10;
}
.order-list-header-column-item {
    /* padding-block: 8px; */
    padding-inline: 0;
    background-color: var(--norma__neutral--dark-blue);
    font-family: BrownStdRegular;
    text-align: center;
    display: flex;
    min-width: 60px;
    width: 100px;
    height: 36px;
    align-items: center;
    /*resize: horizontal;*/
    overflow: auto;
    /*    border-inline-end: 1px solid var(--norma__neutral--grey-1);
*/
    position: relative
}
    .order-list-header-column-item .sorting-level {
        bottom: 0;
        left: -6px;
        font-size: 9px;
        color: rgba(189, 217, 249, 1);
        font-weight: 600;
    }

    .order-list-header-column-item::after {
        position: absolute;
        content: '';
        inset-inline-end: 0px;
        top: 5px;
        bottom: 16px;
        height: 76%;
        width: 1px;
        background: var(--norma__neutral--grey-1);
    }

        .order-list-header-column-item::after:hover {
            background: red
        }

    .order-list-header-column-item span {
        overflow: hidden;
        text-overflow: clip;
        font-family: BrownStdRegular;
        white-space: nowrap;
/*        padding-inline: 2px;*/
        width: calc(100% - 4px);
        text-align: start;
        height: 100%;
        line-height: 36px;
        cursor: pointer
        /* align-items: center; */
    }

    .order-list-header-column-item > div {
        cursor: pointer
    }

    .order-list-header-column-item.operators-column {
        width: 88px;
        min-width: 88px;
        position: sticky;
        inset-inline-start: 0px;
        z-index: 1;
        resize: none
    }

        .order-list-header-column-item.operators-column::after {
            display: none
        }

    .order-list-header-column-item.info-column {
        width: 28px;
        min-width: 55px;
        position: sticky;
        inset-inline-end: 0px;
    }

.order-list-header-sorting-icon {
    margin-inline: 1px;
}

.first-column-sticky {
    position: -webkit-sticky;
    position: sticky;
    inset-inline-start: 88px;
    z-index: 99;
}

.second-column-sticky {
    position: -webkit-sticky;
    position: sticky;
    inset-inline-start: 188px;
    z-index: 100
}

.third-column-sticky {
    position: -webkit-sticky;
    position: sticky;
    inset-inline-start: 348px;
    z-index: 101
}

.orderListheaderBackground {
    background-color: var(--norma__neutral--dark-blue);
}

@font-face {
    font-family: BrownStdRegular;
    src: url(../fonts/BrownStd-Regular.otf);
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
}
/* remove it */
.hidden {
    display: none;
}

.order-list-header-column-item::-webkit-resizer {
    display: none;
    cursor: none !important;
}

    .order-list-header-column-item::-webkit-resizer:hover {
        display: block
    }

.orderColumnResizer {
    width: 2px;
    height: 36px;
    background: #36393F;
    border-inline-start: 1px solid #4a4c52;
    border-inline-end: 1px solid #202125;
    box-sizing: border-box;
    cursor: col-resize;
    z-index: 1;
}

.overlayDivToPreventSort {
    position: absolute;
    width: 10px;
    height: 100%
}

.order-list-header-column-item-wrapper {
    width: calc(100% - 6px);
    margin: auto;
    padding-inline-end: 7px;
}

.order-list-header-column-item:not(.first-column-sticky):not(.second-column-sticky):not(.third-column-sticky):not(.operators-column) {
    inset-inline-start: initial !important
}