div.snackbar {
  position: absolute; left: 50%; top: -2px; z-index: 999;
  margin-left: -284px; padding: 16px 24px 14px;
  width: 568px;
  border-radius: 2px;
  background-color: #008ac9;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  opacity: 0;
  cursor: pointer;

  -webkit-box-shadow: 0 6px 10px rgba(0, 0, 0, .23), 0 10px 30px rgba(0, 0, 0, .19);
          box-shadow: 0 6px 10px rgba(0, 0, 0, .23), 0 10px 30px rgba(0, 0, 0, .19);
  -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in;
          transition: transform 0.2s ease-in-out, opacity 0.2s ease-in;
  -webkit-transform: translateY(-200%);
          transform: translateY(-200%);
}
div.snackbar.snackbar-opened, div.snackbar.active {
  /*margin-top: 16px;*/
  opacity: 1;

  -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in;
          transition: transform 0.2s ease-in-out, opacity 0.2s ease-in;
  -webkit-transform: none;
          transform: none;
}
div.snackbar.toast {
  border-radius: 200px;
}
div.snackbar a {
  float: right;
  white-space: nowrap;
  text-transform: uppercase;
}
div.snackbar span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
div.snackbar.ic { padding-left: 52px; }
div.snackbar.ic svg {
  position: absolute; top: 7px; left: 8px;
  width: 36px; height: 36px;
  fill: #fff;
  opacity: 1;
}
div.snackbar-error { background-color: #d32f2f; }
div.snackbar-alert { background-color: #d32f2f; }
div.snackbar-info { background-color: #008ac9; }

/*div.snackbar {
  left: 0;
  margin-left: 0;
  width: 100%;
}*/

.flash {
  position: fixed;
  top: -2px;
  left: 50%;
  z-index: 999;
  width: 568px;
  margin-left: -284px;
  opacity: 0;
  cursor: pointer;

  -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in;
          transition: transform 0.2s ease-in-out, opacity 0.2s ease-in;
  -webkit-transform: translateY(-200%);
          transform: translateY(-200%);
}
.flash.show {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}
.flash__body {
  position: relative;
  padding: 16px 24px 14px;
  border-radius: 2px;
  background-color: #008ac9;
  color: #fff;
  font-size: 14px;
  line-height: 20px;

  -webkit-box-shadow: 0 6px 10px rgba(0, 0, 0, .23), 0 10px 30px rgba(0, 0, 0, .19);
          box-shadow: 0 6px 10px rgba(0, 0, 0, .23), 0 10px 30px rgba(0, 0, 0, .19);
}
.flash_error .flash__body {
  background-color: #d32f2f;
}
.flash_success .flash__body {
  background-color: #d32f2f;
}
.flash_notice .flash__body {
  background-color: #008ac9;
}