.sticky-navigation.sticky {
        position: fixed;
        width: 100%;
        z-index: 20;
        top: 0;
        left: 0;
        background-color: var(--color-grey);
    }

.sticky-navigation .full-center-container {
        background-color: var(--color-grey);
        border-radius: 0 0 0.5rem 0.5rem;
    }

.sticky-navigation .sticky-container {
        padding: 0;
        height: 3.4375rem;
    }

.sticky-navigation .left-container {
        height: 100%;
        display: flex;
        align-items: center;
        padding-block: 0.25rem;
    }

.sticky-navigation .left-container .model-name,
        .sticky-navigation .left-container .divider {
            display: none;
        }

.sticky-navigation .left-container .block-list {
            width: 100%;
            height: 100%;
            display: flex;
            padding: 0 1.25rem;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            gap: 1.25rem;
            overflow-y: hidden;
            overflow-x: auto;
        }

.sticky-navigation .left-container .block-list .block-item {
                height: 70%;
                display: flex;
                align-items: center;
                position: relative;
                cursor: pointer;
                flex: 0 0 auto;
                color: var(--primary-color);
                font-size: 1rem;
                font-weight: 700;
                font-family: var(--font-secondary);
            }

.sticky-navigation .left-container .block-list .block-item:before {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    height: 0.125rem;
                    width: 100%;
                    background-color: transparent;
                    transition: width 0.2s ease-in-out;
                }

.sticky-navigation .left-container .block-list .block-item.active::before {
                        background-color: var(--color-primary);
                    }

.sticky-navigation .left-container .block-list::-webkit-scrollbar-track {
                background: #0000004a;
                cursor: pointer;
            }

.sticky-navigation .left-container .block-list::-webkit-scrollbar {
                background: transparent;
                height: 0.25rem;
            }

.sticky-navigation .left-container .block-list::-webkit-scrollbar-thumb {
                background: var(--color-secondary);
                border: 0;
                cursor: pointer;
            }

.sticky-navigation .fixed-container {
        position: fixed;
        opacity: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #fff;
        display: flex;
        align-items: center;
        gap: 1.25rem;
        padding: 0.625rem 1.25rem;
        z-index: 20;
    }

.sticky-navigation .fixed-container.sticky {
            opacity: 1;
            gap: 0.625rem;
        }

.sticky-navigation .fixed-container .right-button,
        .sticky-navigation .fixed-container .left-button {
            width: 50%;
        }

.sticky-navigation .fixed-container .right-button .btn, .sticky-navigation .fixed-container .left-button .btn {
                padding-inline: 0.75rem;
                width: 100%;
            }

@media screen and (min-width: 30rem) {
        .sticky-navigation .fixed-container.sticky {
            gap: 1.25rem;
        }
}

@media screen and (min-width: 64rem) {
            .sticky-navigation.sticky .fixed-container {
                display: flex;
            }
        .sticky-navigation .fixed-container {
            position: static;
            display: none;
            opacity: 1;
            background-color: transparent;
            justify-content: flex-end;
            gap: 0.625rem;
            padding: 0;
        }
            .sticky-navigation .fixed-container .right-button,
            .sticky-navigation .fixed-container .left-button {
                width: auto;
            }
        .sticky-navigation .sticky-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1.25rem;
            height: 4.0625rem;
            padding-inline: 1.25rem;
        }
        .sticky-navigation .left-container,
        .sticky-navigation .right-container {
            width: auto;
        }
        .sticky-navigation .left-container {
            flex-grow: 1;
            display: flex;
            align-items: center;
        }

            .sticky-navigation .left-container .model-name {
                display: block;
                font-size: 1.125rem;
                font-weight: 700;
                padding-bottom: 0.375rem;
                white-space: nowrap;
            }
            .sticky-navigation .left-container .block-list {
                padding: 0;
            }

                .sticky-navigation .left-container .block-list .block-item {
                    height: 70%;
                }
                        .sticky-navigation .left-container .block-list .block-item.hover::before {
                            background-color: var(--color-primary);
                        }
            .sticky-navigation .left-container .divider {
                display: block;
                background-color: #dcdcdc;
                height: 1.5625rem;
                margin: 0 1.25rem;
                width: 0.0625rem;
            }
        .sticky-navigation .right-container {
            flex-shrink: 0;
        }
                .sticky-navigation .right-container .right-button .btn, .sticky-navigation .right-container .left-button .btn {
                    padding-inline: 1.875rem;
                }
}

@media screen and (min-width: 64rem) and (max-width: 68rem) {
    .sticky-navigation .left-container {
        max-width: 65%;
    }
}

@media screen and (min-width: 96rem) {
        .sticky-navigation .sticky-container {
            padding-inline-end: 2.1875rem;
            padding-inline-start: 7.8125rem;
        }
}