@import url('https://fonts.googleapis.com/css?family=Ubuntu:300,400,700');

.top-left{ top: 15px; left: 10px;}
.top-right{ top: 15px; right: 10px; }
.bottom-left{ bottom: 15px; left: 10px; }
.bottom-right{ bottom: 15px; right: 10px; }

.container-toast{ opacity: 0; position: fixed; font-family: 'Ubuntu', sans-serif; background: #ffffff; box-shadow: 0 0 5px #0000002b; -webkit-transition:all 1s ease; }

.container-toast a.link-toast{ display: block; float: left;  border-left: 10px solid #f9d42e; padding: 10px 32px 10px 0; display: none; }

.thumb-toast{ width: 72px; float: left; }
.thumb-toast img{ max-width: 100%; height: 65px; display: block; margin: 0 auto; }

.desc-toast{ float: left;}
.desc-toast span{ display: block; font-weight: 400; font-size: 14px; color: #9d9d9d; letter-spacing: -1px; }
.desc-toast strong{ display: block; font-weight: 400; font-size: 17px;  color: #4b9618; margin-top: 6px; letter-spacing: -1px; }
.desc-toast small{ display: block; font-weight: 300; font-size: 12px; color: #9d9d9d; margin-top: 8px; letter-spacing: -1px; }

.close-toast{ position: absolute; top: 5px; right: 6px; width: 21px; height: 15px; background: #cccccc94; color: #fff; border-radius: 10px; text-align: center; padding: 0px 0 21px; text-decoration: none; font-size: 14px; line-height: 19px; }


@keyframes nFadeInBottom { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } }

@keyframes nFadeInTop { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: none; } }

.bottom-left.fade-in, .bottom-right.fade-in { opacity: 0; animation-name: nFadeInBottom; animation-duration: 1s; animation-fill-mode: both; }

.top-left.fade-in, .top-right.fade-in { opacity: 0; animation-name: nFadeInTop; animation-duration: 1s; animation-fill-mode: both; }

@keyframes nFadeOutBottom { from { opacity: 1; } to { opacity: 0; transform: translate3d(0, 100%, 0); bottom: 0; } }

@keyframes nFadeOutTop { from { opacity: 1; } to { opacity: 0; transform: translate3d(0, -100%, 0); top: 0; } }

.bottom-left.fade-out, .bottom-right.fade-out { opacity: 0; animation-name: nFadeOutBottom; animation-duration: 1s; animation-fill-mode: both;  }

.top-left.fade-out, .top-right.fade-out { opacity: 0; animation-name: nFadeOutTop; animation-duration: 1s; animation-fill-mode: both; }

.fade-in a.link-toast, .fade-out a.link-toast{ display: block; }

*, ::after, ::before { box-sizing: border-box; }

@media screen and (max-width: 599px){
	.container-toast{ width: 94%; }
	.thumb-toast{ width: 20%; }
	.desc-toast{ width: 80%; }
}
@media (min-width: 600px) and (max-width: 700px){
	.container-toast{ width: 94%; }
	.thumb-toast{ width: 20%; }
	.desc-toast{ width: 80%; }
}

@keyframes progress-bar-stripes {
  from {
    background-position: 1rem 0;
  }
  to {
    background-position: 0 0;
  }
}

.progress {
  display: -ms-flexbox;
  display: flex;
  height: 1rem;
  overflow: hidden;
  font-size: 0.75rem;
  background-color: #e9ecef;
  border-radius: 0.25rem;
}

.progress-bar {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: #007bff;
  transition: width 0.6s ease;
}

@media screen and (prefers-reduced-motion: reduce) {
  .progress-bar {
    transition: none;
  }
}

.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}

.progress-bar-animated {
  -webkit-animation: progress-bar-stripes 1s linear infinite;
  animation: progress-bar-stripes 1s linear infinite;
}


.bg-success {
  background-color: #28a745 !important;
}