#page-messages-content {
    position: absolute;
    top: 108px;
    left: 0;
    width: 100%;
    padding: 32px;
    z-index: 9;
}

html.scrolldown #page-messages-content {
    z-index: 91;
}

#page-messages-content {
    background-color: #ffffff;
    box-shadow: 7px 7px 12px 0 #e2e2e2;
}

#page-messages-content > div {
    position: relative;
    padding-left: 55px;
    font-size: 18px;
    font-weight: bold;
}

#page-messages-content > div a {
    margin-left: 3px;
}

#page-messages-content > div:before {
    content: '';
    background-image: url('../images/success.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #00BA96;
    display: inline-block;
    position: absolute;
    left: 0;
    top: -7px;
}

#page-messages-content[data-type='error'] > div:before {
    background-image: url('../images/error.svg');
    border-color: #F45F63;
}

#page-messages-content[data-type='warning'] > div:before,
#page-messages-content[data-type='notice'] > div:before {
    background-image: url('../images/warning.svg');
    border-color: #ffbf2a;
    background-size: 20px;
    background-position: center 4px;
}

.minicart-wrapper .counter.qty._block-content-loading {
    animation: shake .5s;
    animation-iteration-count: infinite;
}
.minicart-wrapper .counter.qty .loading-mask {
    display: none !important;
}

@keyframes shake {
    0% {
        transform: translate(1px,1px) rotate(0);
    }
    10% {
        transform: translate(-1px,-2px) rotate(-1deg);
    }
    20% {
        transform: translate(-3px) rotate(1deg);
    }
    30% {
        transform: translate(3px,2px) rotate(0);
    }
    40% {
        transform: translate(1px,-1px) rotate(1deg);
    }
    50% {
        transform: translate(-1px,2px) rotate(-1deg);
    }
    60% {
        transform: translate(-3px,1px) rotate(0);
    }
    70% {
        transform: translate(3px,1px) rotate(-1deg);
    }
    80% {
        transform: translate(-1px,-1px) rotate(1deg);
    }
    90% {
        transform: translate(1px,2px) rotate(0);
    }
    100% {
        transform: translate(1px,-2px) rotate(-1deg);
    }
}




@media(max-width: 1023px) {
    #page-messages-content {
        top: 52px;
    }
}

@media(max-width: 768px) {
    #page-messages-content {
        position: fixed;
        top: 0;
    }
}