@-webkit-keyframes notyf-fadeinup {
    0% {
        opacity: 0;
        transform: translateY(25%)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes notyf-fadeinup {
    0% {
        opacity: 0;
        transform: translateY(25%)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@-webkit-keyframes notyf-fadeinleft {
    0% {
        opacity: 0;
        transform: translateX(25%)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes notyf-fadeinleft {
    0% {
        opacity: 0;
        transform: translateX(25%)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@-webkit-keyframes notyf-fadeoutright {
    0% {
        opacity: 1;
        transform: translateX(0)
    }

    to {
        opacity: 0;
        transform: translateX(25%)
    }
}

@keyframes notyf-fadeoutright {
    0% {
        opacity: 1;
        transform: translateX(0)
    }

    to {
        opacity: 0;
        transform: translateX(25%)
    }
}

@-webkit-keyframes notyf-fadeoutdown {
    0% {
        opacity: 1;
        transform: translateY(0)
    }

    to {
        opacity: 0;
        transform: translateY(25%)
    }
}

@keyframes notyf-fadeoutdown {
    0% {
        opacity: 1;
        transform: translateY(0)
    }

    to {
        opacity: 0;
        transform: translateY(25%)
    }
}

@-webkit-keyframes ripple {
    0% {
        transform: scale(0) translateY(-45%) translateX(13%)
    }

    to {
        transform: scale(1) translateY(-45%) translateX(13%)
    }
}

@keyframes ripple {
    0% {
        transform: scale(0) translateY(-45%) translateX(13%)
    }

    to {
        transform: scale(1) translateY(-45%) translateX(13%)
    }
}

.notyf {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    color: #fff;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    pointer-events: none;
    box-sizing: border-box;
    padding: 20px
}

.notyf__icon--error,
.notyf__icon--success {
    height: 21px;
    width: 21px;
    background: #fff;
    border-radius: 50%;
    display: block;
    margin: 0 auto;
    position: relative
}

.notyf__icon--error:after,
.notyf__icon--error:before {
    content: "";
    background: currentColor;
    display: block;
    position: absolute;
    width: 3px;
    border-radius: 3px;
    left: 9px;
    height: 12px;
    top: 5px
}

.notyf__icon--error:after {
    transform: rotate(-45deg)
}

.notyf__icon--error:before {
    transform: rotate(45deg)
}

.notyf__icon--success:after,
.notyf__icon--success:before {
    content: "";
    background: currentColor;
    display: block;
    position: absolute;
    width: 3px;
    border-radius: 3px
}

.notyf__icon--success:after {
    height: 6px;
    transform: rotate(-45deg);
    top: 9px;
    left: 6px
}

.notyf__icon--success:before {
    height: 11px;
    transform: rotate(45deg);
    top: 5px;
    left: 10px
}

.notyf__toast {
    display: block;
    overflow: hidden;
    pointer-events: auto;
    -webkit-animation: notyf-fadeinup .3s ease-in forwards;
    animation: notyf-fadeinup .3s ease-in forwards;
    box-shadow: 0 3px 7px 0 rgba(0, 0, 0, .25);
    position: relative;
    padding: 0 15px;
    border-radius: 2px;
    max-width: 400px;
    transform: translateY(25%);
    box-sizing: border-box;
    flex-shrink: 0
}

.notyf__toast--disappear {
    transform: translateY(0);
    -webkit-animation: notyf-fadeoutdown .3s forwards;
    animation: notyf-fadeoutdown .3s forwards;
    -webkit-animation-delay: .25s;
    animation-delay: .25s
}

.notyf__toast--disappear .notyf__icon,
.notyf__toast--disappear .notyf__message {
    -webkit-animation: notyf-fadeoutdown .3s forwards;
    animation: notyf-fadeoutdown .3s forwards;
    opacity: 1;
    transform: translateY(0)
}

.notyf__toast--disappear .notyf__dismiss {
    -webkit-animation: notyf-fadeoutright .3s forwards;
    animation: notyf-fadeoutright .3s forwards;
    opacity: 1;
    transform: translateX(0)
}

.notyf__toast--disappear .notyf__message {
    -webkit-animation-delay: .05s;
    animation-delay: .05s
}

.notyf__toast--upper {
    margin-bottom: 20px
}

.notyf__toast--lower {
    margin-top: 20px
}

.notyf__ripple {
    height: 450px;
    width: 450px;
    position: absolute;
    transform-origin: bottom right;
    right: 0;
    top: 0;
    border-radius: 50%;
    transform: scale(0) translateY(-51%) translateX(13%);
    z-index: 5;
    -webkit-animation: ripple .4s ease-out forwards;
    animation: ripple .4s ease-out forwards
}

.notyf__wrapper {
    display: flex;
    align-items: center;
    padding-top: 17px;
    padding-bottom: 17px;
    padding-right: 15px;
    border-radius: 3px;
    position: relative;
    z-index: 10
}

.notyf__icon {
    width: 22px;
    text-align: center;
    font-size: 1.3em;
    opacity: 0;
    -webkit-animation: notyf-fadeinup .3s forwards;
    animation: notyf-fadeinup .3s forwards;
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
    margin-right: 13px
}

.notyf__dismiss {
    height: 100%;
    width: 26px;
    margin-right: -15px;
    -webkit-animation: notyf-fadeinleft .3s forwards;
    animation: notyf-fadeinleft .3s forwards;
    -webkit-animation-delay: .35s;
    animation-delay: .35s;
    opacity: 0
}

.notyf__dismiss-btn {
    background-color: rgba(0, 0, 0, .25);
    border: none;
    cursor: pointer;
    transition: opacity .2s ease, background-color .2s ease;
    outline: none;
    opacity: .35;
    height: 100%;
    width: 100%
}

.notyf__dismiss-btn:after,
.notyf__dismiss-btn:before {
    content: "";
    background: #fff;
    height: 12px;
    width: 2px;
    border-radius: 3px;
    position: absolute;
    left: calc(50% - 1px);
    top: calc(50% - 5px)
}

.notyf__dismiss-btn:after {
    transform: rotate(-45deg)
}

.notyf__dismiss-btn:before {
    transform: rotate(45deg)
}

.notyf__dismiss-btn:hover {
    opacity: .7;
    background-color: rgba(0, 0, 0, .15)
}

.notyf__dismiss-btn:active {
    opacity: .8
}

.notyf__message {
    vertical-align: middle;
    position: relative;
    opacity: 0;
    -webkit-animation: notyf-fadeinup .3s forwards;
    animation: notyf-fadeinup .3s forwards;
    -webkit-animation-delay: .25s;
    animation-delay: .25s;
    line-height: 1.5em
}

@media only screen and (max-width:480px) {
    .notyf {
        padding: 0
    }

    .notyf__ripple {
        height: 600px;
        width: 600px;
        -webkit-animation-duration: .5s;
        animation-duration: .5s
    }

    .notyf__toast {
        max-width: none;
        border-radius: 0;
        box-shadow: 0 -2px 7px 0 rgba(0, 0, 0, .13);
        width: 100%
    }

    .notyf__dismiss {
        width: 56px
    }
}

/* Custom */

.notyf__toast {
    background-color: #ffffff !important;
    border: solid 2px #EECD8A !important;
    border-radius: 8px !important;
    box-shadow: 0px 0px 16px 0px rgb(0 0 0 / 10%) !important;
    width: 100% !important;
    max-width: calc(100% - 30px);
    height: 112px !important;
    margin: 15px;
    padding: 0 !important;
}

@media screen and (min-width: 495px) {
    .notyf__toast {
        margin: 0;
        max-width: 456px;
    }
}

.notyf__wrapper {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 5px;
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 0
}

@media screen and (min-width: 425px) {
    .notyf__wrapper {
        padding: 0;
    }
}

.notyf__wrapper .notyf__icon {
    display: none;
    align-self: flex-start;
    width: 24px;
    height: 24px;
    margin: 20px 0 0 20px;
    padding: 0;
    background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='24px' height='25px' viewBox='0 0 24 25' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EIcons/info%3C/title%3E%3Cg id='Order-Swatches' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Order-Swatches---Fabrics' transform='translate(-1228.000000, -1484.000000)' fill='%23EECD8A'%3E%3Cg id='Alert' transform='translate(1212.000000, 1472.000000)'%3E%3Cg id='Icons/info' transform='translate(16.000000, 12.425781)'%3E%3Cpath d='M12,0 C18.6283113,0 24,5.37168874 24,12 C24,18.6283113 18.6283113,24 12,24 C5.37168874,24 0,18.6283113 0,12 C0,5.37168874 5.37168874,0 12,0 L12,0 Z M8.84354305,10.3261589 C8.82616225,9.12421358 11.5753311,8.46357616 12.8220199,8.79389487 C15.9834437,9.63083609 11.4089197,16.9842922 12.1986548,18.0720406 C12.6381829,18.6780215 14.6373965,18.2011445 14.6373965,18.7500621 C14.6373965,19.3014073 13.2814363,20.7293874 10.9718336,20.2550083 C8.65974752,19.7782078 9.2830505,18.1639487 9.59600579,16.8626242 C9.90643626,15.5613204 11.2450124,11.9652732 11.2450124,11.3419288 C11.2450124,9.38743791 8.81372103,10.8403146 8.84352235,10.3262417 L8.84354305,10.3261589 Z M13.3509934,3.65066225 C14.3492964,3.65066225 15.1564156,4.45778146 15.1564156,5.45608444 C15.1564156,6.45438742 14.3492964,7.26150662 13.3509934,7.26150662 C12.3526904,7.26150662 11.5455712,6.45438742 11.5455712,5.45608444 C11.5455712,4.45778146 12.3526904,3.65066225 13.3509934,3.65066225 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

@media screen and (min-width: 425px) {
    .notyf__wrapper .notyf__icon {
       display: flex;
    }
}

.notyf__wrapper .notyf__icon * {
    display: none !important;
}

.notyf__wrapper .notyf__message {
    height: 112px;
    padding: 0 0 0 95px;
    background-image: url(swatch-alert@2x.png);
    background-position: center left;
    background-size: 90px 90px;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media screen and (min-width: 495px) {
    .notyf__wrapper .notyf__message {
        background-size: 112px 112px;
        padding: 0 0 0 117px;
    }
}

.notyf__wrapper .notyf__message h3 {
    margin: 0;
    padding: 0;
    font-family: var(--heading-font-family);
    font-size: 20px;
    line-height: 28px;
    color: #000000;
}
@media screen and (min-width: 495px) {
    .notyf__wrapper .notyf__message h3 {
        font-size: 24px;
        line-height: 32px;
    }
}

.notyf__wrapper .notyf__message p {
    margin: 0;
    padding: 0;
    font-family: var(--sub-heading-font-family);
    font-size: 14px;
    line-height: 22px;
    color: #515358;
}
@media screen and (min-width: 495px) {
    .notyf__wrapper .notyf__message p {
        font-size: 16px;
        line-height: 24px;
    }
}

.notyf__wrapper .notyf__dismiss {
    display: none !important
}