:root {
  --green: rgb(44, 179, 37);
  --red: rgb(218, 27, 60);
  --blue-mm: #07a4b9;
  --dark-blue-mm: rgb(1, 104, 118);
}

.toasts-wrapper {position: fixed;z-index: 90000;width: 250px;}
.toasts-wrapper[data-position$='right'] {top: 0;right: 0;}
.toasts-wrapper[data-position$='left'] {top: 0;left: 0;}
.toasts-wrapper[data-position$='center'] {top: 0;left: 50%;transform: translateX(-50%);}
.toast {margin: 10px;padding: 10px;width: 228px;border: 1px solid;background-color: #fff;border-radius: 4px;box-shadow: 0px 0px 2px var(--blue-mm);transition: transform .3s ease-out;position: relative;overflow: hidden;border-color: var(--blue-mm);}
[data-position$='right'] .toast {transform: translateX(120%);}
[data-position$='left'] .toast {transform: translateX(-120%);}
[data-position$='center'] .toast {transform: translateY(-120%);}
.toast.closable::before {content: '';width: 20px;height: 20px;background-image: url('../images/xClose.svg');background-repeat: no-repeat;background-position: center center;position: absolute;top: 0;right: 0;}
.toast.progress::after {content: '';position: absolute;bottom: 0;left: 0;height: 4px;width: calc(100% * var(--progress));background-color: var(--blue-mm);}
.toast.success {border-color: var(--green);box-shadow: 0px 0px 2px var(--green);}
.toast.error {border-color: var(--red);box-shadow: 0px 0px 2px var(--red);}
.toast.success.progress::after {background-color: var(--green);}
.toast.error.progress::after {background-color: var(--red);}
.toast.in {transform: translate(0, 0);transition: transform .3s ease-in;}

.toast ul li {font-size: .85em;list-style: disc;margin-left: 16px;}
.toast a {color: var(--blue-mm)}
.toast a:hover {color: var(--dark-blue-mm)}