// Template picker
.template-picker {

    &.ui-carousel {
        background: transparent;
        border: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;

        .ui-carousel-header {
            background: transparent;
            border: 0;
            padding: 0 !important;
            margin: 0;
            position: fixed;
            z-index: 100;
        }

        .ui-carousel-viewport {
            width: 75%;
            max-height: 90vh;
            overflow: auto !important;
        }

        .ui-carousel-item {
            border: 0;
            background: transparent;
            margin: 0 12px !important;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .ui-carousel-button {
            margin: 0 !important;
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: #12A8DE;
            font-size: 24px;
            color: #fff;
            position: fixed;
            top: calc(50% - 12px);
            float: none;

            &.ui-carousel-next-button {
                right: 5%;
            }

            &.ui-carousel-prev-button {
                left: 5%;
            }

        }

        .ui-carousel-page-links {
            display: none;
        }

        .ui-carousel-mobiledropdown {
            display: none !important;
        }
    }
}


@media screen and (max-width: 1024px) {
    .ui-carousel-viewport {
        width: 90% !important;
    }

    .ui-carousel-button {
        width: 30px !important;
        height: 30px !important;
        top: calc(87% - 12px) !important;

        &.ui-carousel-next-button {
            right: 2% !important;
        }

        &.ui-carousel-prev-button {
            left: 2% !important;
        }
    }
}


.pi-arrow-circle-right:before {
    content: 'chevron_right' !important;
}

.pi-arrow-circle-left:before {
    content: 'chevron_right' !important;
}
