@keyframes shine-skeleton-lines {
    0 {
        background-position: -100px
    }

    40%,100% {
        background-position: 600px
    }
}

@keyframes spin {
    0 {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@keyframes rotateImageLoading {
    from {
        transform: translate(-50%,-50%) rotateY(0) scale(1.01)
    }

    to {
        transform: translate(-50%,-50%) rotateY(360deg) scale(1.01)
    }
}

.modal-view-overlay .theme-light {
    --bg-overlay-color: rgba(25,15,20,0.9);
    --bg-overlay-color-for-l-xl: var(--bg-overlay-color);
    --color-bg-container-color: #2e2a2b;
    --font-color: #190f14;
    --icon-color: #190f14
}

.modal-view-overlay .theme-dark {
    --bg-overlay-color: var(--dg-color-bg-modal);
    --bg-overlay-color-for-l-xl: var(--dg-global-opacity-black-70,#000 70);
    --color-bg-container-color: var(--dg-color-bg-modal);
    --font-color: var(--dg-color-text-strong,#fafafa);
    --icon-color: var(--dg-color-text-strong,#fafafa)
}

.modal-view-overlay:not(.modal-view-full) .modal-view-container {
    background-color: var(--bg-overlay-color)
}

.modal-view-overlay:not(.modal-view-full) .modal-view-dialog {
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-y: none
}

    .modal-view-overlay:not(.modal-view-full) .modal-view-dialog::-webkit-scrollbar {
        display: none
    }

.modal-view-overlay:not(.modal-view-full) .modal-base-content {
    background: var(--color-bg-container-color);
    position: relative;
    margin: 50px auto
}

.modal-view-overlay:not(.modal-view-full) .modal-close-icon {
    width: 24px;
    height: 24px
}

    .modal-view-overlay:not(.modal-view-full) .modal-close-icon:before {
        position: absolute;
        content: '';
        width: 24px;
        height: 24px;
        mask: url("https://www.prod.websites.seat.cloud.vwgroup.com/icons/cupra-diagonal/cross.svg") no-repeat 100% 100%;
        -webkit-mask: url("https://www.prod.websites.seat.cloud.vwgroup.com/icons/cupra-diagonal/cross.svg") no-repeat 100% 100%;
        -webkit-mask-size: cover;
        mask-size: cover;
        background-color: var(--icon-color);
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%)
    }

.modal-page__container {
    background: var(--color-bg-container-color)
}

.modal-close-icon {
    display: block;
    margin: 16px;
    top: 0;
    right: 0;
    position: absolute;
    background-size: contain;
    z-index: 5;
    float: right;
    cursor: pointer
}

.modal-view-overlay.modal-view-full .modal-base-content {
    min-height: 100%;
    background: var(--color-bg-container-color)
}

.modal-view-overlay.modal-view-full .modal-close-icon {
    width: 20px;
    height: 20px;
    position: fixed
}

    .modal-view-overlay.modal-view-full .modal-close-icon:before {
        position: absolute;
        content: '';
        width: 24px;
        height: 24px;
        mask: url("https://www.prod.websites.seat.cloud.vwgroup.com/icons/cupra-diagonal/cross.svg") no-repeat 100% 100%;
        -webkit-mask: url("https://www.prod.websites.seat.cloud.vwgroup.com/icons/cupra-diagonal/cross.svg") no-repeat 100% 100%;
        -webkit-mask-size: cover;
        mask-size: cover;
        background-color: var(--icon-color)
    }

.modal-view-overlay .location-modal__wrapper .modal-view-dialog {
    display: block
}

@media(min-width:768px) {
    .modal-view-overlay.modal-view-full .modal-close-icon {
        width: 32px;
        height: 32px
    }
}

@media(min-width:1024px) {
    .modal-view-overlay:not(.modal-view-full) .modal-view-container {
        background-color: var(--bg-overlay-color-for-l-xl)
    }
}

@media(min-width:1440px) {
    .modal-view-overlay.modal-view-full .modal-close-icon {
        margin: 32px;
        right: calc(50% - 718px)
    }
}

.modal-action__container {
    width: 344px;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

    .modal-action__container.loading-show::before {
        background-color: var(--icon-color)
    }

    .modal-action__container .cmp-title {
        margin: 0 0 24px;
        width: 272px
    }

    .modal-action__container .cmp-title__text {
        font-size: 24px;
        line-height: 28px;
        color: var(--font-color);
        text-transform: initial
    }

    .modal-action__container .cmp-text p {
        font-size: 14px;
        line-height: 20px;
        color: var(--font-color);
        margin: 0 0 40px
    }

        .modal-action__container .cmp-text p:last-child {
            margin: 0
        }

        .modal-action__container .cmp-text p a {
            color: var(--font-color)
        }

    .modal-action__container .modal-buttons {
        margin-top: 40px;
        display: flex;
        flex-direction: column
    }

        .modal-action__container .modal-buttons .mod__secondary-button {
            margin: 0 0 16px
        }

    .modal-action__container .modal-close-icon.modal-view-close {
        margin: 24px 16px;
        border: 0;
        padding: var(--dg-spacing-s-5,8px) var(--dg-spacing-m-1,12px);
        border-radius: 6px;
        backdrop-filter: blur(12px);
        background-color: #474852
    }

        .modal-action__container .modal-close-icon.modal-view-close:before {
            position: absolute;
            content: '';
            width: 24px;
            height: 24px;
            mask: url("https://www.prod.websites.seat.cloud.vwgroup.com/icons/cupra-diagonal/cross.svg") no-repeat 100% 100%;
            -webkit-mask: url("https://www.prod.websites.seat.cloud.vwgroup.com/icons/cupra-diagonal/cross.svg") no-repeat 100% 100%;
            -webkit-mask-size: cover;
            mask-size: cover;
            background-color: var(--icon-color);
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%)
        }

.blocked-modal .modal-action__container .modal-view-close, .blocked-modal .modal-action__container .cmp-button {
    cursor: not-allowed;
    opacity: .5
}

@media(min-width:768px) {
    .modal-action__container {
        width: 552px;
        padding: 48px
    }

        .modal-action__container .cmp-title {
            margin: 0 0 40px;
            width: 100%
        }

        .modal-action__container .cmp-title__text {
            font-size: 30px;
            line-height: 36px
        }

        .modal-action__container .modal-buttons {
            flex-direction: row;
            justify-content: flex-end
        }

            .modal-action__container .modal-buttons .modal-container-button.mod__secondary-button {
                margin: 0 32px 0 0
            }

            .modal-action__container .modal-buttons .modal-container-button .cmp-button {
                width: 212px
            }

        .modal-action__container .modal-close-icon.modal-view-close {
            margin: 24px;
            width: 32px;
            height: 32px
        }
}

@media(min-width:1024px) {
    .modal-action__container {
        width: 720px
    }

        .modal-action__container .cmp-text p {
            font-size: 16px;
            line-height: 24px
        }

        .modal-action__container .modal-buttons .modal-container-button .cmp-button {
            min-width: 214px;
            width: auto
        }
}

@media(min-width:1440px) {
    .modal-action__container {
        width: 766px
    }

        .modal-action__container .cmp-title__text {
            font-size: 40px;
            line-height: 44px
        }

        .modal-action__container .modal-buttons .modal-container-button .cmp-button {
            min-width: 202px
        }
}

.modal-error__container {
    width: 288px;
    padding: 16px 16px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.modal-error__container__icon {
    display: block;
    background-image: url("../../../../../etc.clientlibs/cupra-website/components/clientlibs/resources/icons/ico-error.svg");
    background-size: contain;
    background-repeat: no-repeat;
    width: 48px;
    height: 48px
}

.modal-error__container .cmp-title {
    margin: 24px 0
}

.modal-error__container .cmp-title__text {
    font-weight: 350;
    font-size: 24px;
    line-height: 1.17
}

.modal-error__container .cmp-text {
    margin: 0 0 40px
}

    .modal-error__container .cmp-text p {
        font-weight: 350;
        font-size: 14px;
        line-height: 1.43;
        color: var(--font-color)
    }

.modal-error__container .modal-buttons {
    display: flex;
    flex-direction: column;
    justify-content: flex-end
}

.modal-error__container.mod__icon-alert .modal-error__container__icon {
    background-image: url("../../../../../etc.clientlibs/cupra-website/components/clientlibs/resources/icons/ico-alert-rounded-yellow.svg")
}

@media(min-width:768px) {
    .modal-error__container {
        width: 552px;
        padding: 48px
    }

    .modal-error__container__icon {
        width: 64px;
        height: 64px
    }

    .modal-error__container .cmp-title {
        margin: 40px 0
    }

    .modal-error__container .cmp-title__text {
        font-weight: 350;
        font-size: 30px;
        line-height: 1.07
    }

    .modal-error__container .cmp-text {
        margin: 0 0 40px
    }

        .modal-error__container .cmp-text p {
            color: var(--font-color)
        }

    .modal-error__container .modal-buttons {
        flex-direction: row
    }

        .modal-error__container .modal-buttons .modal-container-button .cmp-button {
            width: 212px
        }
}

@media(min-width:1024px) {
    .modal-error__container {
        width: 720px
    }

        .modal-error__container .cmp-title__text {
            font-size: 24px;
            line-height: 1.17
        }

        .modal-error__container .cmp-text p {
            font-size: 16px;
            line-height: 1.5
        }

        .modal-error__container .modal-buttons .modal-container-button .cmp-button {
            width: 202px
        }
}

@media(min-width:1440px) {
    .modal-error__container {
        width: 766px
    }

        .modal-error__container .cmp-title__text {
            font-size: 30px;
            line-height: 1.07
        }

        .modal-error__container .cmp-text {
            margin: 0 0 48px
        }
}

.animation {
    visibility: visible !important
}

.modal-view-overlay.animation.modal-view-open {
    opacity: 0;
    animation: modalFadeIn .5s forwards
}

.modal-view-overlay.animation.modal-view-close {
    opacity: 1;
    animation: modalFadeOut .5s forwards
}

@keyframes modalFadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes modalFadeOut {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}