.notification {
    position: fixed;
    right: -450px;
    top: 0;
    background-color: #ffffff;
    padding: 10px;
    border-radius: 10px;
    margin: 10px;
    max-width: 400px;
    animation: notification-appears 5s ease-out;
}

.notification.success {
    background-color: #eaf2ea;
}

.notification.error {
    background-color: #fbeaea;
}

.notification-progress-bar {
    width: 100%;
    height: 3px;
    margin-top: 5px;
}

.notification-progress-bar .filling {
    height: 100%;
    width: 0%;
    animation: progress-bar-filling 3.5s linear;
}

.notification.success .notification-progress-bar .filling {
    background-color: #2d7c31;
}

.notification.error .notification-progress-bar .filling {
    background-color: #d22b2b;
}

.notification-content {
    display: flex;
}

@keyframes notification-appears {
    0% {
        right: -450px;
    }

    15% {
        right: 0px;
    }

    85% {
        right: 0px;
    }

    100% {
        right: -450px;
    }
}

@keyframes progress-bar-filling {
    0% {
        width: 0;
    }

    15% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

.notification .notification-text .notification-title {
    font-weight: bold;
}

.notification .notification-text {
    padding-left: 10px;
}


.notification.success .notification-icon {
    align-self: center;
    width: 25px;
    height: 25px;
    min-width: 25px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgdmVyc2lvbj0iMS4xIgogICB3aWR0aD0iNTEyIgogICBoZWlnaHQ9IjUxMiIKICAgeD0iMCIKICAgeT0iMCIKICAgdmlld0JveD0iMCAwIDUxMiA1MTIiCiAgIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTIiCiAgIHhtbDpzcGFjZT0icHJlc2VydmUiCiAgIGNsYXNzPSIiCiAgIGlkPSJzdmcxMzgiCiAgIHNvZGlwb2RpOmRvY25hbWU9Im5vdGlmaWNhdGlvbi1zdWNjZXNzLWljb24uc3ZnIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIxLjIuMiAoYjBhODQ4NjUsIDIwMjItMTItMDEpIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzCiAgICAgaWQ9ImRlZnMxNDIiIC8+PHNvZGlwb2RpOm5hbWVkdmlldwogICAgIGlkPSJuYW1lZHZpZXcxNDAiCiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICAgIGJvcmRlcmNvbG9yPSIjMDAwMDAwIgogICAgIGJvcmRlcm9wYWNpdHk9IjAuMjUiCiAgICAgaW5rc2NhcGU6c2hvd3BhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAuMCIKICAgICBpbmtzY2FwZTpwYWdlY2hlY2tlcmJvYXJkPSIwIgogICAgIGlua3NjYXBlOmRlc2tjb2xvcj0iI2QxZDFkMSIKICAgICBzaG93Z3JpZD0iZmFsc2UiCiAgICAgaW5rc2NhcGU6em9vbT0iMC40NjA5Mzc1IgogICAgIGlua3NjYXBlOmN4PSIyNTQuOTE1MjUiCiAgICAgaW5rc2NhcGU6Y3k9IjI1NiIKICAgICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjE0NDAiCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iNzY2IgogICAgIGlua3NjYXBlOndpbmRvdy14PSIwIgogICAgIGlua3NjYXBlOndpbmRvdy15PSIyNSIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIgogICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9InN2ZzEzOCIgLz48ZwogICAgIGlkPSJnMTM2IgogICAgIHN0eWxlPSJmaWxsOiMyZDdjMzE7ZmlsbC1vcGFjaXR5OjEiPjxwYXRoCiAgICAgICBkPSJNMjU2IDBDMTE0LjgzMyAwIDAgMTE0LjgzMyAwIDI1NnMxMTQuODMzIDI1NiAyNTYgMjU2IDI1Ni0xMTQuODUzIDI1Ni0yNTZTMzk3LjE2NyAwIDI1NiAwem0wIDQ3Mi4zNDFjLTExOS4yNzUgMC0yMTYuMzQxLTk3LjA0Ni0yMTYuMzQxLTIxNi4zNDFTMTM2LjcyNSAzOS42NTkgMjU2IDM5LjY1OWMxMTkuMjk1IDAgMjE2LjM0MSA5Ny4wNDYgMjE2LjM0MSAyMTYuMzQxUzM3NS4yNzUgNDcyLjM0MSAyNTYgNDcyLjM0MXoiCiAgICAgICBmaWxsPSIjMDAwMDAwIgogICAgICAgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIKICAgICAgIGNsYXNzPSIiCiAgICAgICBpZD0icGF0aDEzMiIKICAgICAgIHN0eWxlPSJmaWxsOiMyZDdjMzE7ZmlsbC1vcGFjaXR5OjEiIC8+PHBhdGgKICAgICAgIGQ9Ik0zNzMuNDUxIDE2Ni45NjVjLTguMDcxLTcuMzM3LTIwLjYyMy02Ljc2Mi0yNy45OTkgMS4zNDhMMjI0LjQ5MSAzMDEuNTA5IDE2Ni4wNTMgMjQyLjFjLTcuNzE0LTcuODEzLTIwLjI0Ni03LjkzMi0yOC4wMzktLjIzOC03LjgxMyA3LjY3NC03LjkzMiAyMC4yMjYtLjIzOCAyOC4wMzlsNzMuMTUxIDc0LjM2MWExOS44MDQgMTkuODA0IDAgMCAwIDE0LjEzOCA1LjkyOWMuMTE5IDAgLjI1OCAwIC4zNzcuMDJhMTkuODQyIDE5Ljg0MiAwIDAgMCAxNC4yOTctNi41MDRsMTM1LjA1OS0xNDguNzIyYzcuMzU4LTguMTMxIDYuNzYzLTIwLjY2My0xLjM0Ny0yOC4wMnoiCiAgICAgICBmaWxsPSIjMDAwMDAwIgogICAgICAgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIKICAgICAgIGNsYXNzPSIiCiAgICAgICBpZD0icGF0aDEzNCIKICAgICAgIHN0eWxlPSJmaWxsOiMyZDdjMzE7ZmlsbC1vcGFjaXR5OjEiIC8+PC9nPjwvc3ZnPgo=");
}

.notification.error .notification-icon {
    align-self: center;
    width: 25px;
    min-width: 25px;
    height: 25px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgdmVyc2lvbj0iMS4xIgogICB3aWR0aD0iNTEyIgogICBoZWlnaHQ9IjUxMiIKICAgeD0iMCIKICAgeT0iMCIKICAgdmlld0JveD0iMCAwIDUxMS45OTUgNTExLjk5NSIKICAgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMiIKICAgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIKICAgY2xhc3M9IiIKICAgaWQ9InN2ZzEzOCIKICAgc29kaXBvZGk6ZG9jbmFtZT0ibm90aWZpY2F0aW9uLWVycm9yLWljb24uc3ZnIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIxLjIuMiAoYjBhODQ4NjUsIDIwMjItMTItMDEpIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzCiAgICAgaWQ9ImRlZnMxNDIiIC8+PHNvZGlwb2RpOm5hbWVkdmlldwogICAgIGlkPSJuYW1lZHZpZXcxNDAiCiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICAgIGJvcmRlcmNvbG9yPSIjMDAwMDAwIgogICAgIGJvcmRlcm9wYWNpdHk9IjAuMjUiCiAgICAgaW5rc2NhcGU6c2hvd3BhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAuMCIKICAgICBpbmtzY2FwZTpwYWdlY2hlY2tlcmJvYXJkPSIwIgogICAgIGlua3NjYXBlOmRlc2tjb2xvcj0iI2QxZDFkMSIKICAgICBzaG93Z3JpZD0iZmFsc2UiCiAgICAgaW5rc2NhcGU6em9vbT0iMC40NjA5Mzc1IgogICAgIGlua3NjYXBlOmN4PSIyNTQuOTE1MjUiCiAgICAgaW5rc2NhcGU6Y3k9IjI1NiIKICAgICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjE0NDAiCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iNzY2IgogICAgIGlua3NjYXBlOndpbmRvdy14PSIwIgogICAgIGlua3NjYXBlOndpbmRvdy15PSIyNSIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIgogICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9InN2ZzEzOCIgLz48ZwogICAgIGlkPSJnMTM2IgogICAgIHN0eWxlPSJmaWxsOiNkMjJiMmI7ZmlsbC1vcGFjaXR5OjEiPjxwYXRoCiAgICAgICBkPSJNNDM3LjEyNiA3NC45MzljLTk5LjgyNi05OS44MjYtMjYyLjMwNy05OS44MjYtMzYyLjEzMyAwQzI2LjYzNyAxMjMuMzE0IDAgMTg3LjYxNyAwIDI1Ni4wMDVzMjYuNjM3IDEzMi42OTEgNzQuOTkzIDE4MS4wNDdjNDkuOTIzIDQ5LjkyMyAxMTUuNDk1IDc0Ljg3NCAxODEuMDY2IDc0Ljg3NHMxMzEuMTQ0LTI0Ljk1MSAxODEuMDY2LTc0Ljg3NGM5OS44MjYtOTkuODI2IDk5LjgyNi0yNjIuMjY4LjAwMS0zNjIuMTEzek00MDkuMDggNDA5LjAwNmMtODQuMzc1IDg0LjM3NS0yMjEuNjY3IDg0LjM3NS0zMDYuMDQyIDAtNDAuODU4LTQwLjg1OC02My4zNy05NS4yMDQtNjMuMzctMTUzLjAwMXMyMi41MTItMTEyLjE0MyA2My4zNy0xNTMuMDIxYzg0LjM3NS04NC4zNzUgMjIxLjY2Ny04NC4zNTUgMzA2LjA0MiAwIDg0LjM1NSA4NC4zNzUgODQuMzU1IDIyMS42NjcgMCAzMDYuMDIyeiIKICAgICAgIGZpbGw9IiMwMDAwMDAiCiAgICAgICBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIgogICAgICAgY2xhc3M9IiIKICAgICAgIGlkPSJwYXRoMTMyIgogICAgICAgc3R5bGU9ImZpbGw6I2QyMmIyYjtmaWxsLW9wYWNpdHk6MSIgLz48cGF0aAogICAgICAgZD0ibTM0MS41MjUgMzEwLjgyNy01Ni4xNTEtNTYuMDcxIDU2LjE1MS01Ni4wNzFjNy43MzUtNy43MzUgNy43MzUtMjAuMjkuMDItMjguMDQ2LTcuNzU1LTcuNzc1LTIwLjMxLTcuNzU1LTI4LjA2NS0uMDJsLTU2LjE5IDU2LjExMS01Ni4xOS01Ni4xMTFjLTcuNzU1LTcuNzM1LTIwLjMxLTcuNzU1LTI4LjA2NS4wMi03LjczNSA3Ljc1NS03LjczNSAyMC4zMS4wMiAyOC4wNDZsNTYuMTUxIDU2LjA3MS01Ni4xNTEgNTYuMDcxYy03Ljc1NSA3LjczNS03Ljc1NSAyMC4yOS0uMDIgMjguMDQ2IDMuODY4IDMuODg3IDguOTY1IDUuODExIDE0LjA0MyA1LjgxMXMxMC4xNTUtMS45NDQgMTQuMDIzLTUuNzkybDU2LjE5LTU2LjExMSA1Ni4xOSA1Ni4xMTFjMy44NjggMy44NjggOC45NDUgNS43OTIgMTQuMDIzIDUuNzkyYTE5LjgyOCAxOS44MjggMCAwIDAgMTQuMDQzLTUuODExYzcuNzMzLTcuNzU2IDcuNzMzLTIwLjMxMS0uMDIyLTI4LjA0NnoiCiAgICAgICBmaWxsPSIjMDAwMDAwIgogICAgICAgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIKICAgICAgIGNsYXNzPSIiCiAgICAgICBpZD0icGF0aDEzNCIKICAgICAgIHN0eWxlPSJmaWxsOiNkMjJiMmI7ZmlsbC1vcGFjaXR5OjEiIC8+PC9nPjwvc3ZnPgo=");
}