/**
 * #.# Common SCSS
 *
 * Can include things like variables and mixins
 * that are used across the project.
*/
/**
 * #.# Styles
 *
 * CSS for both Frontend+Backend.
 */
.reader-alerts {
  background: #dedede;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: column nowrap;
      flex-flow: column nowrap;
  list-style: none;
  margin: 0;
  opacity: 0;
  padding: 0;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  -webkit-transition: all 0.15s;
  -o-transition: all 0.15s;
  transition: all 0.15s;
  z-index: 9999; }
  .reader-alerts .reader-alert-item {
    font-size: 0.9em;
    line-height: 1.3;
    opacity: 0.8;
    padding: 0 56px;
    position: relative;
    text-align: center;
    height: auto;
    width: 100%; }
    .reader-alerts .reader-alert-item:hover {
      opacity: 1; }
    .reader-alerts .reader-alert-item:nth-child(n+2) {
      border-top: 1px solid #292929; }
    .reader-alerts .reader-alert-item p {
      margin: 0;
      padding-top: 1em;
      padding-bottom: 1em; }
    .reader-alerts .reader-alert-item .reader-alert-link,
    .reader-alerts .reader-alert-item .close-reader-alert {
      text-decoration: none; }
    .reader-alerts .reader-alert-item .reader-alert-link {
      color: inherit; }
    .reader-alerts .reader-alert-item .close-reader-alert {
      background-color: #dedede;
      border: 1px solid #292929;
      border-radius: 50%;
      color: inherit;
      display: block;
      position: absolute;
      right: 16px;
      top: 50%;
      -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
              transform: translateY(-50%);
      -webkit-transition: background 0.1s, color 0.1s;
      -o-transition: background 0.1s, color 0.1s;
      transition: background 0.1s, color 0.1s;
      height: 25px;
      width: 25px; }
      .reader-alerts .reader-alert-item .close-reader-alert .icon {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        height: 12px;
        width: 12px; }
        .reader-alerts .reader-alert-item .close-reader-alert .icon path {
          fill: inherit; }
      .reader-alerts .reader-alert-item .close-reader-alert:hover {
        background-color: #292929; }
        .reader-alerts .reader-alert-item .close-reader-alert:hover .icon path {
          fill: #dedede; }