#page {

    .layout-active-wrapper:has(.primary-color-background) {
        margin-top: 0;
        margin-bottom: 0;
    }

    .primary-color-background {
        background-color: var(--primary-color);
        color: var(--primary-color-contrast);
        --color-heading: var(--primary-color-contrast);
        --program-bg-color: var(--primary-color-contrast);

        margin-top: 0 !important;
        margin-bottom: 0 !important;


    }

    .custom-programs-v10-header {

        .full-width-column {
            padding-top: 3em;
            padding-bottom: 2em;

            .content-active-wrapper {
                max-width: 1200px;
                margin-left: auto;
                margin-right: auto;

                .pb-heading {
                    font-size: 32px;
                }

                .pb-text {
                    font-size: 20px;
                    margin-top: 1em;
                }
            }
        }
    }

    .custom-programs-v10.full-width-column-row .full-width-column {
        --side-padding: 25px;

        padding: 50px 5%;
        opacity: 0;
        transition: opacity .25s linear;
        overflow: hidden;

        &:has(.draggable-node-list-container.swiper) {
            opacity: 1;
        }

        .draggable-node-list-container {
            width: auto;
            height: auto;
            --columns: 1;
            --gap: 20px;
            overflow: visible;


            @media only screen and (min-width: 600px) {
                --columns: 2;
            }

            @media only screen and (min-width: 960px) {
                --columns: 3;
            }

            @media only screen and (min-width: 1280px) {
                --columns: 4;
            }

            &:not(.swiper-initialized) {
                .draggable-node-list {
                    display: flex;
                    flex-wrap: wrap;
                    gap: var(--gap);
                }

                .draggable-node-list .layout-active-wrapper {
                    width: calc((100% / var(--columns)) - ((var(--columns) - 1) * var(--gap)) / var(--columns));

                    &:hover {
                        z-index: 2;
                    }
                }

                .arrows-buttons {
                    display: none;
                }

            }

            &.swiper-initialized {
                width: calc((100% / var(--columns)) - ((var(--columns) - 1) * var(--gap)) / var(--columns));
                margin-inline: auto;

                .swiper-slide {
                    position: relative;
                    transform: scale(0.8) translateX(170px);
                    z-index: 0;

                    cursor: grab;

                    &:active {
                        cursor: grabbing;
                    }

                    &::after {
                        position: absolute;
                        inset: 0;
                        z-index: 3;
                        background-color: #FFF;
                        content: '';
                        opacity: 0.76;
                        transition: all .3s ease-in-out;
                    }
                }

                .swiper-slide.swiper-slide-prev,
                .swiper-slide.swiper-slide-next {
                    z-index: 1;

                    &::after {
                        opacity: 0.44;
                    }
                }

                .swiper-slide.swiper-slide-prev {
                    transform: scale(0.9) translateX(50px);
                }

                .swiper-slide.swiper-slide-next {
                    transform: scale(0.9) translateX(-50px);
                }

                .swiper-slide.swiper-slide-next+.swiper-slide {
                    transform: scale(0.8) translateX(-170px);
                }

                .swiper-slide:has(+ .swiper-slide + .swiper-slide-prev) {
                    transform: scale(0.8) translateX(-170px);
                }

                .swiper-slide.swiper-slide-active {
                    opacity: 1;
                    z-index: 2;
                    transform: scale(1);
                    cursor: default;

                    &:active {
                        cursor: default;
                    }

                    &::after {
                        display: none;
                    }
                }


            }

            .draggable-node-list {
                display: flex;
                height: 100%;
                flex-direction: row;

                .layout-active-wrapper {
                    overflow: hidden;
                    border-radius: 24px;
                    box-shadow: 0px 10px 64px -12px rgba(0, 0, 0, 0.2);
                    transition: all .35s ease-in-out;
                    background-color: var(--program-bg-color, #FFF);
                    color: var(--program-text-color, var(--primary-color));
                    --color-heading: currentcolor;
                    height: auto;

                    &:hover {
                        box-shadow: 0px 12px 74px -12px rgba(0, 0, 0, 0.5);
                        position: relative;
                    }

                    .column.single-column {
                        padding: 15px;

                        .draggable-node-list-container {
                            .draggable-node-list {
                                flex-direction: column;
                            }
                        }

                        .button-type-square.button-style-1:has(.custom-icon-wrapper) {
                            border-radius: 50%;
                            min-width: 100px;
                            min-height: 100px;

                            .title-text {
                                display: none;
                            }
                        }


                        .button.button-type-regular {
                            background: transparent;
                            padding: 0;
                            min-height: unset;
                            min-width: unset;

                            &:hover {
                                text-decoration: underline;
                            }

                            .title-text {
                                margin: unset;
                                font-weight: 700;
                            }
                        }
                    }
                }
            }
        }


        .custom-swiper-controls {

            .custom-swiper-prev,
            .custom-swiper-next {
                width: 32px;
                height: 32px;
                transition: all .35s ease-in-out;

                span {
                    width: 0;
                    height: 0;
                }

                &::after {
                    content: '';
                    height: 100%;
                    width: 100%;
                    background-color: var(--slider-arrows-color, currentColor);
                    transform: unset;
                    transition: all .35s ease-in-out;
                }

                &:hover {
                    &::after {
                        transform: scale(1.2);
                    }
                }

                @media only screen and (max-width: 600px) {
                    width: 50px;
                    height: 50px;
                }
            }

            .custom-swiper-prev {

                &::after {
                    content: '';
                    display: block;
                    mask-image: url("data:image/svg+xml,%3Csvg clip-rule='evenodd' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9.474 5.209s-4.501 4.505-6.254 6.259c-.147.146-.22.338-.22.53s.073.384.22.53c1.752 1.754 6.252 6.257 6.252 6.257.145.145.336.217.527.217.191-.001.383-.074.53-.221.293-.293.294-.766.004-1.057l-4.976-4.976h14.692c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-14.692l4.978-4.979c.289-.289.287-.761-.006-1.054-.147-.147-.339-.221-.53-.221-.191-.001-.38.071-.525.215z' fill-rule='nonzero'/%3E%3C/svg%3E");
                    mask-repeat: no-repeat no-repeat;
                    mask-position: center center;
                    mask-size: contain;
                }
            }

            .custom-swiper-next {
                margin-left: 20px;

                &::after {
                    content: '';
                    display: block;
                    mask-image: url("data:image/svg+xml,%3Csvg clip-rule='evenodd' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m14.523 18.787s4.501-4.505 6.255-6.26c.146-.146.219-.338.219-.53s-.073-.383-.219-.53c-1.753-1.754-6.255-6.258-6.255-6.258-.144-.145-.334-.217-.524-.217-.193 0-.385.074-.532.221-.293.292-.295.766-.004 1.056l4.978 4.978h-14.692c-.414 0-.75.336-.75.75s.336.75.75.75h14.692l-4.979 4.979c-.289.289-.286.762.006 1.054.148.148.341.222.533.222.19 0 .378-.072.522-.215z' fill-rule='nonzero'/%3E%3C/svg%3E");
                    mask-repeat: no-repeat no-repeat;
                    mask-position: center center;
                    mask-size: contain;
                }
            }

            .swiper-pagination-custom-programs-v10 {
                justify-content: center;
                flex-wrap: wrap;
                text-align: center;
                padding-top: 45px;

                .swiper-pagination-bullet {
                    color: var(--slider-pagination-color, var(--primary-color));

                    &:not(.swiper-pagination-bullet-active) {
                        opacity: 0.4;
                    }

                    &:hover:not(.swiper-pagination-bullet-active) {
                        opacity: 0.6;
                    }
                }

            }
        }
    }
}