@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)
    }
}

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

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

.cmp-notifications-button:before {
    background-color: var(--color-ui-01)
}

.cmp-notifications-button:after {
    color: var(--color-font-03);
    background-color: var(--color-ui-08);
    font-family: 'CupraRegular',sans-serif;
    font-weight: 400;
    transition: all .3s ease
}

.cmp-notifications-list {
    top: 60px;
    box-shadow: 0 4px 4px rgba(0,0,0,0.25);
    height: 0;
    background-color: var(--color-ui-05)
}

    .cmp-notifications-list.mod__open-menu {
        height: calc(100vh - 60px)
    }

.cmp-notifications-list__header {
    border-bottom: 1px solid var(--color-ui-04)
}

.cmp-notifications-list__title .cmp-title__text {
    font-family: 'CupraBook',sans-serif;
    font-weight: 350;
    color: var(--color-font-01)
}

.cmp-notifications-list__body {
    position: relative
}

.cmp-notifications-list__see-more {
    font-family: 'CupraBook',sans-serif;
    font-weight: 350;
    color: var(--color-font-01)
}

.cmp-notifications-list__see-more-text {
    border-bottom: 1px solid var(--color-ui-01);
    transition: all .3s ease
}

.cmp-notifications-list__see-more:hover .cmp-notifications-list__see-more-text {
    border-bottom-color: var(--color-ui-02)
}

.cmp-notifications-list__empty {
    font-family: 'CupraBook',sans-serif;
    font-weight: 350;
    color: var(--color-font-01)
}

@media(min-width:1016px) {
    .cmp-notifications-list {
        top: 44px;
        right: 16px;
        left: auto
    }

        .cmp-notifications-list.mod__open-menu {
            height: calc(100vh - 44px)
        }

    .cmp-notifications-list__title .cmp-title__text {
        font-family: 'CupraLight',sans-serif;
        font-weight: 300
    }

    .cmp-notifications-list__body {
        scrollbar-width: thin;
        scrollbar-color: #d1d1d1 #fff
    }

        .cmp-notifications-list__body::-webkit-scrollbar {
            width: 8px
        }

        .cmp-notifications-list__body::-webkit-scrollbar-track {
            -webkit-border-radius: 10px;
            border-radius: 10px
        }

        .cmp-notifications-list__body::-webkit-scrollbar-thumb {
            -webkit-border-radius: 10px;
            border-radius: 10px;
            background: #d1d1d1;
            border: 2px solid #fff
        }
}

@media(min-width:1436px) {
    .cmp-notifications-list {
        left: calc(50% + 718px - 568px)
    }
}

.cmp-notifications-item {
    background-color: var(--color-ui-05);
    border-bottom: 1px solid var(--color-ui-04);
    transition: all .3s ease
}

    .cmp-notifications-item:hover {
        background-color: var(--color-ui-04)
    }

.cmp-notifications-item__title {
    font-family: 'CupraRegular',sans-serif;
    font-weight: 400;
    color: var(--color-font-01)
}

.cmp-notifications-item__date {
    font-family: 'CupraRegular',sans-serif;
    font-weight: 400;
    color: var(--color-font-02)
}

.cmp-notifications-item__text {
    font-family: 'CupraBook',sans-serif;
    font-weight: 350;
    color: var(--color-font-01)
}

.cmp-notifications-item__undo {
    font-family: 'CupraBook',sans-serif;
    font-weight: 350;
    color: var(--color-font-01);
    border-bottom: 1px solid var(--color-ui-01);
    transition: all .3s ease
}

    .cmp-notifications-item__undo:hover {
        border-bottom-color: var(--color-ui-02)
    }

.cmp-notifications-item__checkbox {
    border: 1px solid var(--color-ui-02);
    transition: all .3s ease
}

    .cmp-notifications-item__checkbox:before {
        transition: all .3s ease;
        background-color: var(--color-ui-01);
        background-image: url("../../../../../../../etc.clientlibs/private-area/cupra/components/page/base/clientlibs/resources/icons/ico-notification-checked.svg")
    }

    .cmp-notifications-item__checkbox.mod__selected {
        border: 1px solid var(--color-ui-01)
    }

.cmp-notifications-item.mod__no-read {
    background-color: var(--color-ui-04);
    border-bottom: 1px solid var(--color-ui-05)
}

    .cmp-notifications-item.mod__no-read:hover {
        background-color: var(--color-ui-04)
    }

    .cmp-notifications-item.mod__no-read .cmp-notifications-item__title:before {
        background: var(--color-ui-08)
    }

.cmp-notifications-checkbox {
    border: 1px solid var(--color-ui-02);
    transition: all .3s ease
}

    .cmp-notifications-checkbox:before {
        transition: all .3s ease;
        background-color: var(--color-ui-01)
    }

    .cmp-notifications-checkbox.mod__selected {
        border: 1px solid var(--color-ui-01)
    }

        .cmp-notifications-checkbox.mod__selected:before {
            background-image: url("../../../../../../../etc.clientlibs/private-area/cupra/components/page/base/clientlibs/resources/icons/ico-notification-checked.svg")
        }

    .cmp-notifications-checkbox.mod__partial {
        border: 1px solid var(--color-ui-01)
    }

        .cmp-notifications-checkbox.mod__partial:before {
            background-image: url("../../../../../../../etc.clientlibs/private-area/cupra/components/page/base/clientlibs/resources/icons/ico-notification-minus.svg")
        }

.cmp-notifications-remove {
    background-image: url("../../../../../../../etc.clientlibs/private-area/cupra/components/page/base/clientlibs/resources/icons/ico-notification-delete.svg")
}

.cmp-notifications-details {
    background-color: var(--color-ui-05)
}

.cmp-notifications-details__title {
    font-family: 'CupraRegular',sans-serif;
    font-weight: 400;
    color: var(--color-font-01)
}

.cmp-notifications-details__date {
    font-family: 'CupraRegular',sans-serif;
    font-weight: 400;
    color: var(--color-font-02)
}

.cmp-notifications-details__description {
    font-family: 'CupraBook',sans-serif;
    font-weight: 350;
    color: var(--color-font-02)
}

.cmp-notifications-push {
    top: 60px;
    right: 16px;
    left: auto;
    margin-top: 16px
}

@media(min-width:1016px) {
    .cmp-notifications-push {
        top: 44px
    }
}

@media(min-width:1436px) {
    .cmp-notifications-push {
        left: calc(50% + 266px)
    }
}

.cmp-notifications-push-item__content {
    background: var(--color-ui-05)
}

    .cmp-notifications-push-item__content:before {
        background-image: url("../../../../../../../etc.clientlibs/private-area/cupra/components/page/base/clientlibs/resources/icons/ico-notification-light.svg");
        background-color: var(--color-ui-08)
    }

.cmp-notifications-push-item__close {
    transition: all .3s ease;
    background-image: url("../../../../../../../etc.clientlibs/private-area/cupra/components/page/base/clientlibs/resources/icons/ico-close.svg")
}

.cmp-notifications-push-item__title {
    font-family: 'CupraRegular',sans-serif;
    font-weight: 400;
    color: var(--color-font-01)
}

.cmp-notifications-push-item__text {
    font-family: 'CupraBook',sans-serif;
    font-weight: 350;
    color: var(--color-font-01)
}

.cmp-notifications {
    width: 0;
    opacity: 0;
    animation: intro-notifications .3s ease-in forwards;
    margin-right: -8px
}

@media(min-width:764px) {
    .cmp-notifications {
        margin-right: 0
    }
}

@keyframes intro-notifications {
    from {
        width: 0;
        opacity: 0
    }

    to {
        width: 32px;
        opacity: 1
    }
}