/**
 * @author Will Steinmetz
 *
 * Styles for the notific8 JavaScript plug-in
 *
 * Copyright (c)2013-2016, Will Steinmetz
 * Licensed under the BSD license.
 * http://opensource.org/licenses/BSD-3-Clause
 */
/**
 * @author Will Steinmetz
 *
 * Style variables for the notific8 JavaScript plug-in
 *
 * Copyright (c)2013-2016, Will Steinmetz
 * Licensed under the BSD license.
 * http://opensource.org/licenses/BSD-3-Clause
 */
/**
 * @author Will Steinmetz
 *
 * Base styles for the notific8 JavaScript plug-in
 *
 * Copyright (c)2013-2016, Will Steinmetz
 * Licensed under the BSD license.
 * http://opensource.org/licenses/BSD-3-Clause
 */
.notific8-container {
  display: block;
  margin: 0;
  padding: 0;
  position: fixed; }
  .notific8-container.top {
    top: 0; }
  .notific8-container.bottom {
    bottom: 0; }
  .notific8-container.top.right, .notific8-container.bottom.right {
    right: 0; }
  .notific8-container.top.left, .notific8-container.bottom.left {
    left: 0; }

.notific8-notification {
  box-sizing: border-box;
  overflow: hidden;
  position: relative; }
  .notific8-notification:hover .notific8-close {
    display: block; }

.notific8-close {
  cursor: pointer;
  display: none;
  position: absolute; }
  .notific8-close.sticky {
    display: block;
    position: absolute;
    text-align: center; }

.right .notific8-notification {
  clear: right;
  float: right; }

.left .notific8-notification {
  clear: left;
  float: left; }

.top .notific8-notification {
  margin-top: 0.625em; }

.bottom .notific8-notification {
  margin-bottom: 0.625em; }

.notific8-notification.family-legacy,
.notific8-notification.legacy,
.notific8-notification.ocho {
  border-style: solid;
  border-width: 2px;
  color: #fff;
  font-size: 16px;
  min-height: 5.625em;
  padding: 0.625em;
  padding-right: 2.0625em;
  transition: all .2s ease-in-out;
  width: 24.375em; }
  .notific8-notification.family-legacy .notific8-heading,
  .notific8-notification.legacy .notific8-heading,
  .notific8-notification.ocho .notific8-heading {
    font-weight: bold;
    margin-bottom: 0.3125em; }
  .notific8-notification.family-legacy .notific8-message,
  .notific8-notification.legacy .notific8-message,
  .notific8-notification.ocho .notific8-message {
    font-size: 0.875em; }
  .notific8-notification.family-legacy .notific8-close,
  .notific8-notification.legacy .notific8-close,
  .notific8-notification.ocho .notific8-close {
    border: none;
    font-size: 1.25em;
    line-height: 1em;
    padding: 0 .25em;
    right: -2px;
    top: 0; }
    .notific8-notification.family-legacy .notific8-close.sticky,
    .notific8-notification.legacy .notific8-close.sticky,
    .notific8-notification.ocho .notific8-close.sticky {
      font-size: 0.625em;
      line-height: 1.4em;
      padding: 0.2em 0;
      right: -3.7em;
      text-transform: uppercase;
      top: 3.4em;
      transform: rotate(90deg);
      width: 8.9em; }

.left .notific8-notification.family-legacy,
.left .notific8-notification.legacy,
.left .notific8-notification.ocho {
  margin-left: -24.375em; }
  .left .notific8-notification.family-legacy.open,
  .left .notific8-notification.legacy.open,
  .left .notific8-notification.ocho.open {
    margin-left: 0; }

.right .notific8-notification.family-legacy,
.right .notific8-notification.legacy,
.right .notific8-notification.ocho {
  margin-right: -24.375em; }
  .right .notific8-notification.family-legacy.open,
  .right .notific8-notification.legacy.open,
  .right .notific8-notification.ocho.open {
    margin-right: 0; }

.notific8-notification.family-chicchat,
.notific8-notification.chicchat {
  background-color: #fff;
  border-radius: .25em;
  border-style: solid;
  border-width: 1px;
  border-left-width: 3.2142857143em;
  color: #121212;
  font-size: 0.875em;
  min-height: 7.5em;
  padding: 1.125em;
  transition: all .15s ease-in-out;
  width: 31.25em; }
  .notific8-notification.family-chicchat .notific8-heading,
  .notific8-notification.chicchat .notific8-heading {
    font-weight: bold;
    margin-bottom: .5em; }
  .notific8-notification.family-chicchat .notific8-close,
  .notific8-notification.chicchat .notific8-close {
    background-color: transparent;
    border: none;
    right: .5em;
    top: .325em; }
    .notific8-notification.family-chicchat .notific8-close.sticky,
    .notific8-notification.chicchat .notific8-close.sticky {
      font-size: .75em;
      text-decoration: underline; }

.right .notific8-notification.family-chicchat,
.right .notific8-notification.chicchat {
  margin-right: -32.25em; }
  .right .notific8-notification.family-chicchat.open,
  .right .notific8-notification.chicchat.open {
    margin-right: .625em; }

.left .notific8-notification.family-chicchat,
.left .notific8-notification.chicchat {
  margin-left: -32.25em; }
  .left .notific8-notification.family-chicchat.open,
  .left .notific8-notification.chicchat.open {
    margin-left: .625em; }

.notific8-notification.family-atomic,
.notific8-notification.atomic {
  border-left-width: 3.2142857143em;
  border-radius: 3px;
  font-size: 0.875em;
  min-height: 5em;
  padding: 0;
  transition: all .15s ease-in-out;
  width: 31.25em; }
  .notific8-notification.family-atomic .notific8-heading,
  .notific8-notification.atomic .notific8-heading {
    padding: .75em; }
  .notific8-notification.family-atomic .notific8-message-content,
  .notific8-notification.atomic .notific8-message-content {
    width: 100%; }
  .notific8-notification.family-atomic .notific8-message,
  .notific8-notification.atomic .notific8-message {
    font-size: 0.8571428571em;
    padding: 0.75em; }
  .notific8-notification.family-atomic .notific8-close,
  .notific8-notification.atomic .notific8-close {
    background-color: transparent;
    border: none;
    right: .5em;
    top: .325em; }
    .notific8-notification.family-atomic .notific8-close.sticky,
    .notific8-notification.atomic .notific8-close.sticky {
      font-size: .75em;
      text-decoration: underline; }

.right .notific8-notification.family-atomic,
.right .notific8-notification.atomic {
  margin-right: -32.25em; }
  .right .notific8-notification.family-atomic .notific8-heading,
  .right .notific8-notification.atomic .notific8-heading {
    border-top-right-radius: 3px; }
  .right .notific8-notification.family-atomic.open,
  .right .notific8-notification.atomic.open {
    margin-right: .625em; }

.left .notific8-notification.family-atomic,
.left .notific8-notification.atomic {
  margin-left: -32.25em; }
  .left .notific8-notification.family-atomic.open,
  .left .notific8-notification.atomic.open {
    margin-left: .625em; }

.notific8-notification.family-materialish,
.notific8-notification.materialish {
  border-radius: 2px;
  font-size: 0.875em;
  min-height: 3em;
  max-width: 568px;
  min-width: 288px;
  opacity: 0;
  transition: all .15s ease-in-out; }
  .notific8-notification.family-materialish .notific8-message,
  .notific8-notification.materialish .notific8-message {
    margin: 1em 6em 1em 1.7142857143em; }
  .notific8-notification.family-materialish.open,
  .notific8-notification.materialish.open {
    opacity: 1; }
  .notific8-notification.family-materialish.has-heading .notific8-message,
  .notific8-notification.materialish.has-heading .notific8-message {
    margin-bottom: .25em;
    margin-top: .25em; }
  .notific8-notification.family-materialish .notific8-close,
  .notific8-notification.materialish .notific8-close {
    background-color: transparent;
    border: none;
    line-height: 1.4285714286em;
    margin-top: -0.7142857143em;
    right: 1.7142857143em;
    top: 50%; }
  .notific8-notification.family-materialish .notific8-heading,
  .notific8-notification.materialish .notific8-heading {
    font-size: 0.7857142857em;
    font-weight: 100;
    margin-left: 2.1818181818em;
    margin-top: 0.4545454545em; }
  .notific8-notification.family-materialish.sticky .notific8-message,
  .notific8-notification.materialish.sticky .notific8-message {
    line-height: 1.4285714286em;
    margin-right: 8.5714285714em; }
  .notific8-notification.family-materialish.sticky .notific8-close.sticky,
  .notific8-notification.materialish.sticky .notific8-close.sticky {
    text-transform: uppercase; }
    .notific8-notification.family-materialish.sticky .notific8-close.sticky:hover,
    .notific8-notification.materialish.sticky .notific8-close.sticky:hover {
      text-decoration: underline; }

.notific8-notification.family-legacy.teal,
.notific8-notification.legacy.teal,
.notific8-notification.ocho.teal {
  background-color: #069;
  border-color: #09c;
  color: #fff; }
  .notific8-notification.family-legacy.teal .notific8-close,
  .notific8-notification.legacy.teal .notific8-close,
  .notific8-notification.ocho.teal .notific8-close {
    background-color: #09c;
    color: #fff; }

.notific8-notification.family-legacy.amethyst,
.notific8-notification.legacy.amethyst,
.notific8-notification.ocho.amethyst {
  background-color: #5D2D77;
  border-color: #915faa;
  color: #fff; }
  .notific8-notification.family-legacy.amethyst .notific8-close,
  .notific8-notification.legacy.amethyst .notific8-close,
  .notific8-notification.ocho.amethyst .notific8-close {
    background-color: #915faa;
    color: #fff; }

.notific8-notification.family-legacy.ruby,
.notific8-notification.legacy.ruby,
.notific8-notification.ocho.ruby {
  background-color: #a10;
  border-color: #d10;
  color: #fff; }
  .notific8-notification.family-legacy.ruby .notific8-close,
  .notific8-notification.legacy.ruby .notific8-close,
  .notific8-notification.ocho.ruby .notific8-close {
    background-color: #d10;
    color: #fff; }

.notific8-notification.family-legacy.tangerine,
.notific8-notification.legacy.tangerine,
.notific8-notification.ocho.tangerine {
  background-color: #e88f00;
  border-color: #ffb23f;
  color: #fff; }
  .notific8-notification.family-legacy.tangerine .notific8-close,
  .notific8-notification.legacy.tangerine .notific8-close,
  .notific8-notification.ocho.tangerine .notific8-close {
    background-color: #ffb23f;
    color: #fff; }

.notific8-notification.family-legacy.lemon,
.notific8-notification.legacy.lemon,
.notific8-notification.ocho.lemon {
  background-color: #ffcc00;
  border-color: #ffde00;
  color: #333; }
  .notific8-notification.family-legacy.lemon .notific8-close,
  .notific8-notification.legacy.lemon .notific8-close,
  .notific8-notification.ocho.lemon .notific8-close {
    background-color: #ffde00;
    color: #333; }

.notific8-notification.family-legacy.lime,
.notific8-notification.legacy.lime,
.notific8-notification.ocho.lime {
  background-color: #32b512;
  border-color: #38d315;
  color: #fff; }
  .notific8-notification.family-legacy.lime .notific8-close,
  .notific8-notification.legacy.lime .notific8-close,
  .notific8-notification.ocho.lime .notific8-close {
    background-color: #38d315;
    color: #fff; }

.notific8-notification.family-legacy.ebony,
.notific8-notification.legacy.ebony,
.notific8-notification.ocho.ebony {
  background-color: #121212;
  border-color: #666;
  color: #fff; }
  .notific8-notification.family-legacy.ebony .notific8-close,
  .notific8-notification.legacy.ebony .notific8-close,
  .notific8-notification.ocho.ebony .notific8-close {
    background-color: #666;
    color: #fff; }

.notific8-notification.family-legacy.smoke,
.notific8-notification.legacy.smoke,
.notific8-notification.ocho.smoke {
  background-color: #efefef;
  border-color: #ababab;
  color: #333; }
  .notific8-notification.family-legacy.smoke .notific8-close,
  .notific8-notification.legacy.smoke .notific8-close,
  .notific8-notification.ocho.smoke .notific8-close {
    background-color: #ababab;
    color: #fff; }

.notific8-notification.family-chicchat.cobalt,
.notific8-notification.chicchat.cobalt {
  border-color: #3171B2; }
  .notific8-notification.family-chicchat.cobalt .notific8-close,
  .notific8-notification.chicchat.cobalt .notific8-close {
    color: #3171B2; }

.notific8-notification.family-chicchat.ruby,
.notific8-notification.chicchat.ruby {
  border-color: #a10; }
  .notific8-notification.family-chicchat.ruby .notific8-close,
  .notific8-notification.chicchat.ruby .notific8-close {
    color: #a10; }

.notific8-notification.family-chicchat.honey,
.notific8-notification.chicchat.honey {
  border-color: #f2cc00; }
  .notific8-notification.family-chicchat.honey .notific8-close,
  .notific8-notification.chicchat.honey .notific8-close {
    color: #f2cc00; }

.notific8-notification.family-chicchat.shamrock,
.notific8-notification.chicchat.shamrock {
  border-color: #8bb92d; }
  .notific8-notification.family-chicchat.shamrock .notific8-close,
  .notific8-notification.chicchat.shamrock .notific8-close {
    color: #8bb92d; }

.notific8-notification.family-atomic.cerulean,
.notific8-notification.atomic.cerulean {
  background-color: #c9e0f2;
  border-color: #4F99D3;
  color: #454545; }
  .notific8-notification.family-atomic.cerulean .notific8-heading,
  .notific8-notification.atomic.cerulean .notific8-heading {
    background-color: #a1c8e7;
    border-bottom: solid 1px #78b1dd; }

.notific8-notification.family-atomic.tomato,
.notific8-notification.atomic.tomato {
  background-color: #eeb9ba;
  border-color: #D03E41;
  color: #454545; }
  .notific8-notification.family-atomic.tomato .notific8-heading,
  .notific8-notification.atomic.tomato .notific8-heading {
    background-color: #e49092;
    border-bottom: solid 1px #da6769; }

.notific8-notification.family-atomic.mustard,
.notific8-notification.atomic.mustard {
  background-color: #f8f5df;
  border-color: #DDCE61;
  color: #454545; }
  .notific8-notification.family-atomic.mustard .notific8-heading,
  .notific8-notification.atomic.mustard .notific8-heading {
    background-color: #efe8b5;
    border-bottom: solid 1px #e6db8b; }

.notific8-notification.family-atomic.pear,
.notific8-notification.atomic.pear {
  background-color: #dfeec5;
  border-color: #9ECC4E;
  color: #454545; }
  .notific8-notification.family-atomic.pear .notific8-heading,
  .notific8-notification.atomic.pear .notific8-heading {
    background-color: #c9e39d;
    border-bottom: solid 1px #b4d776; }

.notific8-notification.family-atomic.amethyst,
.notific8-notification.atomic.amethyst {
  background-color: #ab73ca;
  border-color: #5D2D77;
  color: #eee; }
  .notific8-notification.family-atomic.amethyst .notific8-heading,
  .notific8-notification.atomic.amethyst .notific8-heading {
    background-color: #954ebc;
    border-bottom: solid 1px #7a3b9c; }

.notific8-notification.family-atomic.onyx,
.notific8-notification.atomic.onyx {
  background-color: #929292;
  border-color: #454545;
  color: #eee; }
  .notific8-notification.family-atomic.onyx .notific8-heading,
  .notific8-notification.atomic.onyx .notific8-heading {
    background-color: #787878;
    border-bottom: solid 1px #5f5f5f; }

.notific8-notification.family-materialish.twilight,
.notific8-notification.materialish.twilight {
  background-color: #323232;
  color: #eee; }

.notific8-notification.family-materialish.lilrobot,
.notific8-notification.materialish.lilrobot {
  background-color: #A4C639;
  color: #eee; }

.notific8-notification.family-materialish.cupcake,
.notific8-notification.materialish.cupcake {
  background-color: #FFBAD2;
  color: #323232; }

.notific8-notification.family-materialish.eclair,
.notific8-notification.materialish.eclair {
  background-color: #654848;
  color: #eee; }

.notific8-notification.family-materialish.honeycomb,
.notific8-notification.materialish.honeycomb {
  background-color: #f6e080;
  color: #323232; }

.notific8-notification.family-materialish.lollypop,
.notific8-notification.materialish.lollypop {
  background-color: #54b2a9;
  color: #eee; }

.notific8-notification.family-materialish.marshmallow,
.notific8-notification.materialish.marshmallow {
  background-color: #fff8ed;
  color: #323232; }

.notific8-notification.family-materialish.strawberry,
.notific8-notification.materialish.strawberry {
  background-color: #BE2625;
  color: #eee; }

.notific8-notification.family-materialish.creamsicle,
.notific8-notification.materialish.creamsicle {
  background-color: #F7BB67;
  color: #323232; }

.notific8-notification.family-materialish.purple-rain,
.notific8-notification.materialish.purple-rain {
  background-color: #694489;
  color: #eee; }

.notific8-notification.family-materialish.peafowl,
.notific8-notification.materialish.peafowl {
  background-color: #1D7CF2;
  color: #eee; }

/*# sourceMappingURL=notific8.css.map */