@charset "UTF-8";
.toast-title {
  font-weight: 700; }

.toast-message {
  -ms-word-wrap: break-word;
  word-wrap: break-word; }
  .toast-message a, .toast-message label {
    color: #fff; }
  .toast-message a:hover {
    color: #ccd5db;
    text-decoration: none; }

.toast-close-button {
  position: relative;
  top: -0.3em;
  right: -0.3em;
  float: right;
  margin-bottom: -.5em;
  font-size: 20px;
  font-weight: 400;
  color: #fff;
  -webkit-text-shadow: 0 1px 0 white;
  text-shadow: 0 1px 0 white;
  opacity: .8; }
  .toast-close-button:hover, .toast-close-button:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: .4;
    outline: none; }

/*Additional properties for button version
 iOS requires the button element instead of an anchor tag.
 If you want the anchor version, it requires `href="#"`.*/
button.toast-close-button {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none; }

.toast-top-center {
  top: 12px;
  right: 0;
  width: 100%; }

.toast-bottom-center {
  right: 0;
  bottom: 12px;
  width: 100%; }

.toast-top-full-width {
  top: 0;
  right: 0;
  width: 100%; }
  .toast-top-full-width .toast {
    margin-bottom: 0; }

.toast-bottom-full-width {
  right: 0;
  bottom: 0;
  width: 100%; }
  .toast-bottom-full-width .toast {
    margin-bottom: 0; }

.toast-top-left {
  top: 12px;
  left: 12px; }

.toast-top-right {
  top: 12px;
  right: 12px; }

.toast-bottom-right {
  right: 12px;
  bottom: 12px; }

.toast-bottom-left {
  bottom: 12px;
  left: 12px; }

.toast-example,
#toast-container {
  position: fixed;
  z-index: 1700;
  pointer-events: none;
  /*overrides*/ }
  .toast-example *,
  #toast-container * {
    box-sizing: border-box; }
  .toast-example > div,
  #toast-container > div {
    position: relative;
    width: 300px;
    padding: 15px 20px;
    margin: 0 0 6px;
    overflow: hidden;
    color: #a3afb7;
    pointer-events: auto;
    background-repeat: no-repeat;
    background-position: 15px center;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.215rem;
    opacity: 0.95; }
  .toast-example > .toast-shadow,
  #toast-container > .toast-shadow {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.23); }
    .toast-example > .toast-shadow:hover,
    #toast-container > .toast-shadow:hover {
      box-shadow: 0 1px 6px rgba(0, 0, 0, 0.23); }
  .toast-example > :hover,
  #toast-container > :hover {
    cursor: pointer;
    opacity: 1; }
  .toast-example > .toast-success:not(.toast-just-text), .toast-example > .toast-info:not(.toast-just-text), .toast-example > .toast-warning:not(.toast-just-text), .toast-example > .toast-error:not(.toast-just-text),
  #toast-container > .toast-success:not(.toast-just-text),
  #toast-container > .toast-info:not(.toast-just-text),
  #toast-container > .toast-warning:not(.toast-just-text),
  #toast-container > .toast-error:not(.toast-just-text) {
    padding-left: 50px; }
    .toast-example > .toast-success:not(.toast-just-text):before, .toast-example > .toast-info:not(.toast-just-text):before, .toast-example > .toast-warning:not(.toast-just-text):before, .toast-example > .toast-error:not(.toast-just-text):before,
    #toast-container > .toast-success:not(.toast-just-text):before,
    #toast-container > .toast-info:not(.toast-just-text):before,
    #toast-container > .toast-warning:not(.toast-just-text):before,
    #toast-container > .toast-error:not(.toast-just-text):before {
      position: absolute;
      top: 50%;
      left: 12px;
      font-family: "Web Icons";
      font-size: 30px;
      font-style: normal;
      font-weight: 400;
      -webkit-transform: translate(0, -50%);
              transform: translate(0, -50%);
      text-rendering: auto;
      speak: none;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale; }
  .toast-example > .toast-success,
  #toast-container > .toast-success {
    color: #fff; }
    .toast-example > .toast-success:not(.toast-just-text):before,
    #toast-container > .toast-success:not(.toast-just-text):before {
      content: ""; }
  .toast-example > .toast-info,
  #toast-container > .toast-info {
    color: #fff; }
    .toast-example > .toast-info:not(.toast-just-text):before,
    #toast-container > .toast-info:not(.toast-just-text):before {
      content: ""; }
  .toast-example > .toast-warning,
  #toast-container > .toast-warning {
    color: #fff; }
    .toast-example > .toast-warning:not(.toast-just-text):before,
    #toast-container > .toast-warning:not(.toast-just-text):before {
      content: ""; }
  .toast-example > .toast-error,
  #toast-container > .toast-error {
    color: #fff; }
    .toast-example > .toast-error:not(.toast-just-text):before,
    #toast-container > .toast-error:not(.toast-just-text):before {
      content: ""; }
  .toast-example.toast-top-center > div, .toast-example.toast-bottom-center > div,
  #toast-container.toast-top-center > div,
  #toast-container.toast-bottom-center > div {
    width: 300px;
    margin-right: auto;
    margin-left: auto; }
  .toast-example.toast-top-full-width > div, .toast-example.toast-bottom-full-width > div,
  #toast-container.toast-top-full-width > div,
  #toast-container.toast-bottom-full-width > div {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    border-radius: 0; }

.toast {
  background-color: #e4eaee; }

.toast-success {
  background-color: #28d17c; }

.toast-error {
  background-color: #ff666b; }

.toast-info {
  background-color: #28c0de; }

.toast-warning {
  background-color: #f57d1b; }

.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  background-color: #000;
  opacity: .1; }

/*Responsive Design*/
@media all and (max-width: 240px) {
  .toast-example > div,
  #toast-container > div {
    width: 11em; }
  .toast-example .toast-close-button,
  #toast-container .toast-close-button {
    top: -0.2em;
    right: -0.2em; } }

@media all and (min-width: 241px) and (max-width: 480px) {
  .toast-example > div,
  #toast-container > div {
    width: 18em; }
  .toast-example .toast-close-button,
  #toast-container .toast-close-button {
    top: -0.2em;
    right: -0.2em; } }

@media (min-width: 480px) and (max-width: 767.98px) {
  .toast-example > div,
  #toast-container > div {
    width: 25em; } }