.fdb {
  color: white;
  cursor: default;
  display: block;
  top: 1em;
  left: 0;
  right: 0;
  /*leave 1em margins left/right*/
  width: calc(100% - 2em);
  margin: 0 auto;
  position: fixed;
  text-align: center;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  box-sizing: border-box;
}
@media (min-width: 768px) {
  .fdb { max-width: 70%; }
}
@media (min-width: 1024px) {
  .fdb { max-width: 50%; }
}
@media (min-width: 1280px) {
  .fdb { max-width: 35%; }
}

.fdb-inner {
  padding: 0.9em 2em;
  /* radius = 2 * line-height */
  border-radius: 2.8em;
  display: inline-block;
  box-sizing: border-box;
  box-shadow: 0 0 0 3px rgba(0,0,0,.1);
}

.fdb-loading {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  padding: 7px;
  box-sizing: content-box;

  box-shadow: 0 0 6px 0 rgba(0,0,0,.3);

  -webkit-animation-name: slideIn;
  animation-name: slideIn;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: cubic-bezier(.05,.44,0,.99);
  animation-timing-function: cubic-bezier(.05,.44,0,.99);
}
.fdb-unloading {
  -webkit-animation-name: slideOut;
  animation-name: slideOut;
  -webkit-animation-timing-function: cubic-bezier(.7,.08,.93,.49);
  animation-timing-function: cubic-bezier(.7,.08,.93,.49);
}

.fdb-message {
  white-space: pre;
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
  line-height: 1.4;
}

.fdb-expand {
  -webkit-transition: background-color 0.5s;
  transition: background-color 0.5s;

  -webkit-animation-name: animateExpand;
  animation-name: animateExpand;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: cubic-bezier(.37,.86,.58,.95);
  animation-timing-function: cubic-bezier(.37,.86,.58,.95);
}
.fdb-contract {
  -webkit-animation-name: animateContract;
  animation-name: animateContract;
}


/* Themes - Default - Pure */
.fdb-info { background-color: #0e90d2; }
.fdb-error { background-color: #dd514c; }
.fdb-success { background-color: #5eb95e; }
.fdb-warn { background-color: #f37b1d; }
.fdb-grimace { background-color: #8058a5; }
.fdb-neutral { background-color: #ffffff; }


.fdb-spinner {
  position: relative;
  text-indent: -9999em;
  padding: 6px;
  border-top: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid #0e90d2;
  -webkit-animation: spinAnimation 0.5s infinite linear;
  animation: spinAnimation 0.5s infinite linear;

  box-sizing: border-box;
}
  .fdb-spinner,
  .fdb-spinner:after {
    border-radius: 50%;
    width: 0;
    height: 0;
    display: block;
    margin: 0 auto;
  }

@-webkit-keyframes spinAnimation {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spinAnimation {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}


@-webkit-keyframes slideIn {
  0% { -webkit-transform: translate3d(0,-10em,0); }
  100% { -webkit-transform: translate3d(0,0,0);}
}
@keyframes slideIn {
  0% { -webkit-transform: translate3d(0,-10em,0); transform: translate3d(0,-10em,0); }
  100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
}


@-webkit-keyframes slideOut {
  100% { -webkit-transform: translate3d(0,-10em,0); }
}
@keyframes slideOut {
  100% { -webkit-transform: translate3d(0,-10em,0); transform: translate3d(0,-10em,0); }
}


@-webkit-keyframes animateExpand {
  0% { width: 0; }
  100% { width: 100%; }
}
@keyframes animateExpand {
  0% { width: 0; }
  100% { width: 100%; }
}


@-webkit-keyframes animateContract {
  0% { width: 100%; opacity: 1; }
  100% { width: 90%; opacity: 0; }
}
@keyframes animateContract {
  0% { width: 100%; opacity: 1; }
  100% { width: 90%; opacity: 0; }
}
