/* Minification failed. Returning unminified contents.
(17,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
(487,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
(500,11): run-time error CSS1035: Expected colon, found '['
 */
.flex-product-detail-archived{
    display: flex;
    width: 100%;

}

.flex-product-detail-archived > h1{
    margin: 25px;
    padding: 25px;
    border: 1px solid #e02222;
    color: #e02222;
    text-align: center;
    width: inherit;
}

.products {
    & .flex-extended {
        margin: 0 1rem;
        @media (min-width: 640px) {

        }
        @media (min-width: 768px) {

        }
        @media (min-width: 1024px) {
            margin: 0 ;
        }
        @media (min-width: 1280px) {
        }

        & .manufacturers-filters,
        & .product-parameters {
            background-color: #EFF3FC;
            border: 1px solid #DEE4F0;
            border-radius: 4px;

            .btn {
                border: none;
                padding: .8rem 1.8rem;

                &:hover {
                    filter: opacity(0.9);
                }

                &.btn-main {
                    background: #4064D3;
                    color: white;
                }

                &.btn-transparent {
                    background: transparent;
                    color: black;
                }
            }

            & > .title {
                cursor: pointer;
                font-size: 1rem;
                display: flex;
                padding: .75rem 1rem;
                font-weight: 600;
                gap: .75rem;
                align-items: center;

                & .icon {
                    color: #4064D3;
                }

                & .tags {
                    display: flex;
                    flex-wrap: wrap;
                    gap: .5rem;
                    margin-left: auto;
                }

                & .tag {
                    display: inline-flex;
                    align-items: center;
                    gap: .4rem;
                    background: white;
                    border: 1px solid #DEE4F0;
                    border-radius: 3px;
                    padding: .3rem .3rem .3rem .6rem;
                    font-size: .8rem;
                    font-weight: 400;
                    cursor: default;
                    white-space: nowrap;

                    & .remove-tag {
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        border: none;
                        background: transparent;
                        color: #8492A6;
                        cursor: pointer;
                        padding: 0;
                        font-size: 1rem;

                        &:hover {
                            color: #4064D3;
                        }
                    }
                }

                &[data-expandable-expanded="true"] {
                    & .icon {
                        transform: rotate(-180deg);
                    }

                    & .tags {
                        display: none;
                    }
                }
            }

            & .wrapper {
                display: grid;
                gap: 1rem;
            }

            & .controls {
                display: flex;
                justify-content: end;
                gap: 1rem;
                margin: 0 1rem 1rem;
            }

            .checkbox-wrapper {
                display: inline-flex;
                min-width: 0;

                & .checkbox {
                    color: #222;
                    user-select: none;
                    min-width: 0;
                    display: inline-flex;
                    gap: .6em;
                    align-items: center;
                    cursor: pointer;

                    &:hover {
                        filter: opacity(0.8);
                    }

                    & .label {
                        font-weight: 500;
                        font-size: 1rem;
                        display: flex;
                        align-items: center;
                        gap: .25rem;
                        flex: 1 1 auto;
                        min-width: 0;
                        overflow: hidden;

                        & > span {
                            flex: none;
                        }

                        & > span:first-child {
                            flex: unset;
                            min-width: 0;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }

                    & input {
                        appearance: none;
                        -webkit-appearance: none;
                        margin: 0;
                        width: 1.1em;
                        height: 1.1em;
                        flex: none;
                        border: 1px solid #4064D3;
                        border-radius: .15em;
                        background: #fff;
                        display: grid;
                        place-content: center;
                        transition: background-color .15s, border-color .15s;
                        cursor: pointer;

                        &:checked {
                            background: #4064D3;
                            border-color: #4064D3;
                        }

                        &:indeterminate {
                            background: #4064D3;
                            border-color: #4064D3;

                            &::before {
                                clip-path: none;
                                box-shadow: none;
                                background: #fff;
                                width: .65em;
                                height: 2px;
                                transform: scale(1);
                            }
                        }

                        &::before {
                            content: "";
                            width: .7em;
                            height: .6em;
                            transition: transform .12s ease-in-out;
                            box-shadow: inset 1em 1em #fff;
                            clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 85% 0, 40% 70%);
                        }

                        &:checked::before {
                            transform: scale(1);
                        }

                        &:disabled {
                            border-color: #d0d3d8;
                            background: #f1f2f4;
                            cursor: not-allowed;
                        }
                    }
                }
            }
        }

        /*manufacturers*/

        & .manufacturers-filters {
            & .wrapper {
                & .manufacturers {
                    grid-template-columns: 1fr;
                    background: white;
                    padding: 1rem;
                    display: grid;
                    gap: 1rem;
                    @media (min-width: 640px) {
                        grid-template-columns: repeat(2, 1fr);
                    }
                    @media (min-width: 768px) {
                        grid-template-columns: repeat(3, 1fr);
                    }
                    @media (min-width: 1024px) {
                        grid-template-columns: repeat(4, 1fr);
                    }
                    @media (min-width: 1280px) {
                        grid-template-columns: repeat(5, 1fr);
                    }
                    margin: 0 1rem;
                }
            }
        }

        /*parameters*/

        & .product-parameters {
            & > .title.expanded {
                border-bottom: 1px solid #DEE4F0;
            }

            & .without-attributes-wrapper {
                display: grid;
                gap: 1rem;
                margin: 1rem;

                & .without-attributes-header {
                    display: flex;
                    align-items: center;
                }
                & .generic-articles.without-attributes{
                    background: white;
                }
            }

            & .generic-articles {
                display: grid;

                & .generic-article {
                    padding: 1rem;
                    display: grid;
                    gap: 1rem;

                    & .attributes-wrapper {
                        border: 1px solid #DEE4EF;
                        border-radius: .3em;

                        & .attributes {
                            max-height: 23rem;
                            overflow-y: auto;
                            @supports (-moz-appearance: none) {
                                & {
                                    scrollbar-width: thin;
                                    scrollbar-color: #ADBBD6 #DEE3EF;
                                }
                            }

                            &::-webkit-scrollbar {
                                width: 8px;
                                height: 8px;
                            }

                            &::-webkit-scrollbar-button:start:decrement,
                            &::-webkit-scrollbar-button:end:increment,
                            &::-webkit-scrollbar-button {
                                display: none;
                                width: 0;
                                height: 0;
                            }

                            &::-webkit-scrollbar-thumb {
                                width: 8px;
                                background: #ADBBD6;
                                border-radius: 4px;
                            }

                            &::-webkit-scrollbar-track {
                                width: 8px;
                                background: #DEE3EF;
                            }

                            & .attribute {
                                display: grid;
                                grid-template-columns: 1fr;
                                grid-template-rows: max-content 1fr;
                                @media (min-width: 640px) {
                                }
                                @media (min-width: 768px) {
                                }
                                @media (min-width: 1024px) {
                                    grid-template-columns: 1fr 4fr;
                                    grid-template-rows: 1fr;
                                }
                                @media (min-width: 1280px) {
                                    grid-template-columns: 1fr 4fr;
                                }

                                & .title {
                                    padding: 1rem;
                                    border-right: 1px solid #D8E2F1;
                                }

                                & .values {
                                    background: white;
                                    padding: 1rem;
                                    gap: .5rem;
                                    display: grid;
                                    grid-template-columns: repeat(4, 1fr);

                                    .checkbox-wrapper {
                                        grid-column: span 4;

                                        @media (min-width: 640px) {
                                            grid-column: span 2;

                                            &.col-span-2 {
                                                grid-column: span 2;
                                            }

                                            &.col-span-4 {
                                                grid-column: span 4;
                                            }
                                        }
                                        @media (min-width: 768px) {
                                            grid-column: span 2;
                                        }
                                        @media (min-width: 1024px) {
                                            grid-column: span 1;
                                        }
                                        @media (min-width: 1280px) {
                                            grid-column: span 1;
                                        }

                                        & .label {
                                            font-size: .7rem;
                                        }
                                    }

                                    & .slider-wrapper {
                                        grid-column-start: 1;
                                        grid-column-end: 5;
                                        display: grid;
                                        grid-template-columns: 1fr 1fr;
                                        grid-template-rows: 1fr 1fr;

                                        & .slider {
                                            grid-column-start: 1;
                                            grid-column-end: 3;
                                            padding-left: .75rem;
                                            height: 8px;

                                            &.noUi-horizontal .noUi-connect {
                                                background: #4064D3;
                                            }

                                            &.noUi-horizontal .noUi-handle {
                                                position: relative;
                                                top: -5px;
                                                width: 1.2rem;
                                                height: 1.2rem;
                                                background: #DCE3EF;
                                                border-radius: 1rem;

                                                &:after {
                                                    position: relative;
                                                    width: .6rem;
                                                    height: .6rem;
                                                    background: #4064D3;
                                                    border-radius: 1rem;
                                                    top: 50%;
                                                    left: 50%;
                                                    transform: translate(-50%, -50%);
                                                }
                                            }
                                        }

                                        & .flex-from-range,
                                        & .flex-to-range {

                                        }

                                        & .flex-to-range {
                                            justify-self: end;
                                        }
                                    }
                                }
                            }
                        }

                        & .parameter-expand-trigger {
                            display: flex;
                            cursor: pointer;
                            justify-content: center;
                            padding: .5rem;

                            &[data-expandable-expanded="true"] {
                                transform: rotate(-180deg);
                            }
                        }
                    }
                }

                &.without-attributes {
                    padding: 1rem;
                    gap: .5rem;
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    max-height: 23rem;
                    overflow-y: auto;

                    & .generic-article {
                        padding: .5rem;
                        grid-column: span 4;
                        @media (min-width: 640px) {
                            grid-column: span 2;

                            &.col-span-2 {
                                grid-column: span 2;
                            }

                            &.col-span-4 {
                                grid-column: span 4;
                            }
                        }
                        @media (min-width: 768px) {
                            grid-column: span 2;
                        }
                        @media (min-width: 1024px) {
                        }
                        @media (min-width: 1280px) {
                            grid-column: span 1;
                        }
                    }
                }
            }
        }
    }
}

.flex-tecdoc .product-parameters .generic-articles .attributes .values {
    grid-template-columns: repeat(3, 1fr);
}

.flex-tecdoc .product-parameters .generic-articles.without-attributes {
    grid-template-columns: repeat(3, 1fr);
}

.flex-tecdoc .manufacturers-filters .manufacturers {
    @media (min-width: 1280px) {
        grid-template-columns: repeat(4, 1fr);
    }
}
.pagination-container {
    display: flex;
    justify-content: left;
    align-items: center;
    margin-top: 5px;
    margin-left: 5px;
    margin-bottom: 5px;
    gap: 5px;

    button[disabled] {
        cursor: default;
        color: #a8a8a8;
    }

    button {
        all: unset;
        cursor: pointer;
    }
    button.previous::before {
        font-family: "Font Awesome 5 Pro";
        font-weight: 900;
        content: "\f060";
    }
    button.next::before {
        font-family: "Font Awesome 5 Pro";
        font-weight: 900;
        content: "\f061";
    }
}