/* Btn Open Notifications */
.component-notify {
  position: relative; }

.component-btnNotify {
  align-items: center;
  background-color: transparent;
  border: none;
  display: flex;
  height: 100%;
  justify-content: center;
  padding: 0 10px;
  position: relative; }
  .component-btnNotify:hover, .component-btnNotify:focus {
    background-color: rgba(229, 229, 229, 0.5); }
  .component-btnNotify .icon-bell-alt {
    color: #888;
    cursor: pointer;
    font-size: 26px; }
  .component-btnNotify .signal {
    cursor: pointer;
    font-size: 11px;
    height: 20px;
    line-height: 20px;
    min-width: initial;
    position: absolute;
    right: 3px;
    padding: 0;
    top: 7px;
    width: 20px; }
    .component-btnNotify .signal.contrast {
      color: #000 !important;
      border: 1px solid #000 !important; }

/* Notifications */
.Notifications {
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.26);
  height: 395px;
  padding: 15px;
  position: absolute;
  right: 0;
  width: 320px;
  z-index: 1; }
  .Notifications.contrast * {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #fff !important; }
  .Notifications:before {
    content: "";
    height: 0;
    right: 12px;
    margin-left: -10px;
    position: absolute;
    top: -10px;
    width: 0;
    z-index: 2;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff; }
    @media (max-width: 640px) {
      .Notifications:before {
        left: 31px !important; } }
    @media (max-width: 462px) {
      .Notifications:before {
        left: 200px !important; } }
    @media (max-width: 425px) {
      .Notifications:before {
        left: 165px !important; } }
  .Notifications:after {
    content: "";
    height: 0;
    right: 12px;
    margin-left: -11px;
    position: absolute;
    top: -11px;
    width: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-bottom: 11px solid #dfdfdf;
    z-index: 0; }
    @media (max-width: 640px) {
      .Notifications:after {
        left: 32px !important; } }
    @media (max-width: 462px) {
      .Notifications:after {
        left: 201px !important; } }
    @media (max-width: 426px) {
      .Notifications:after {
        left: 166px !important; } }
  @media (max-height: 375px) {
    .Notifications {
      height: 285px; } }
  @media (max-height: 320px) {
    .Notifications {
      height: 250px; } }
  @media (max-width: 640px) {
    .Notifications {
      position: fixed;
      right: 15px; } }
  @media (max-width: 320px) {
    .Notifications {
      width: 290px; } }
  .Notifications-entry {
    height: 100%; }
  .Notifications-search {
    display: flex;
    flex-shrink: 0;
    margin-bottom: 10px; }
  .Notifications-inputContainer {
    flex: 1;
    margin-right: 5px;
    position: relative; }
    .Notifications-inputContainer .icon-search {
      bottom: 0;
      color: #aaa;
      height: 14px;
      margin: auto;
      position: absolute;
      right: 10px;
      top: 0; }
  .Notifications-input {
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #aaa;
    height: 40px;
    padding: 10px 30px 10px 10px;
    width: 100%; }
    .Notifications-input::-ms-clear {
      display: none; }
  .Notifications-submit {
    border: none;
    border-radius: 4px;
    color: #fff;
    height: 40px;
    position: relative;
    transition: 200ms;
    width: 70px; }
    .Notifications-submit span {
      text-transform: lowercase;
      display: inline-block; }
      .Notifications-submit span::first-letter {
        text-transform: uppercase !important; }
    .Notifications-submit:hover:before {
      background-color: rgba(0, 0, 0, 0.5);
      content: "";
      height: 100%;
      left: 0;
      opacity: 0.5;
      position: absolute;
      top: 0;
      width: 100%; }
    .Notifications-submit:hover span {
      cursor: pointer;
      position: relative; }
    .Notifications-submit.contrast {
      background-color: #000 !important;
      border: 1px solid #fff; }
  .Notifications-btnClean {
    background-color: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    position: absolute;
    right: 5px;
    top: 10px;
    width: 25px;
    height: 20px; }
    .Notifications-btnClean .icon-remove {
      cursor: pointer; }
  .Notifications-list {
    height: 314px;
    overflow-y: auto;
    padding: 1px 6px 1px 1px;
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translateZ(0); }
    .Notifications-list::-webkit-scrollbar {
      width: 6px; }
    .Notifications-list::-webkit-scrollbar-track {
      background-color: #f5f5f5;
      border-radius: 10px; }
    .Notifications-list::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.1);
      border-radius: 10px; }
    @media (max-height: 375px) {
      .Notifications-list {
        height: 202px; } }
    @media (max-height: 320px) {
      .Notifications-list {
        height: 168px; } }
  .Notifications-load {
    animation: rotate 2s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-top: -20px;
    margin-left: -20px;
    z-index: 1;
    border: 1px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.5);
    border-left-color: rgba(0, 0, 0, 0.5); }
  .Notifications-messageError, .Notifications-messageNotfound {
    padding: 12px 20px;
    border: 1px solid transparent;
    border-radius: 4px; }
  .Notifications-messageError {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb; }
  .Notifications-messageNotfound {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba; }
  .Notifications-viewMore {
    border: none;
    border-radius: 4px;
    color: #fff;
    flex-shrink: 0;
    height: 40px;
    margin-top: 10px;
    position: relative;
    transition: 200ms;
    width: 100%; }
    .Notifications-viewMore:hover:before {
      background-color: rgba(0, 0, 0, 0.5);
      content: "";
      height: 100%;
      left: 0;
      opacity: 0.5;
      position: absolute;
      top: 0;
      width: 100%; }
    .Notifications-viewMore:hover span {
      cursor: pointer;
      position: relative; }
  .Notifications .Notification:not(:last-of-type) {
    margin-bottom: 10px; }
  .Notifications .Notification:last-of-type {
    margin-bottom: 2px; }

/* Notification */
.Notification-header {
  border-bottom: 1px solid #ddd;
  margin-bottom: 14px;
  padding-bottom: 10px;
  position: relative; }
  .Notification-header .Notification-title {
    white-space: normal !important; }

.Notification-title {
  color: #888;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 6px;
  line-height: 1.2; }

.Notification-excerpt {
  color: #323232;
  font-size: 14px;
  font-weight: bold;
  margin: 0;
  line-height: 1.2; }

.Notification-title, .Notification-excerpt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.Notification-date {
  color: #888;
  font-size: 10px;
  font-weight: bold; }

.Notification-reduced {
  margin-bottom: 0 !important;
  font-size: 16px;
  font-weight: bold;
  color: #555555; }

.Notification-btnClose {
  background-color: transparent;
  border: none;
  color: #888;
  cursor: pointer;
  font-size: 20px;
  height: 35px;
  position: absolute;
  right: -16px;
  top: -10px;
  width: 35px; }
  .Notification-btnClose i {
    cursor: pointer; }
  .Notification-btnClose:hover, .Notification-btnClose:focus {
    color: #1a1a1a; }

.Notification-footer {
  border-top: 1px solid #ccc;
  margin-top: 10px;
  padding-top: 10px; }

.Notification--preview {
  position: relative; }
  .Notification--preview .Notification-open {
    border: 1px solid transparent;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0px 6px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    display: block;
    height: 77px;
    padding: 10px 15px;
    transition: 300ms; }
    .Notification--preview .Notification-open:hover, .Notification--preview .Notification-open:focus {
      background: rgba(0, 0, 0, 0.07);
      text-decoration: none; }
  .Notification--preview .Notification-title {
    padding-right: 16px; }
  .Notification--preview .Notification-btnDelete {
    background-color: transparent;
    border: none;
    color: #555;
    font-size: 10px;
    height: 25px;
    position: absolute;
    right: 0;
    top: 0;
    width: 25px; }
    .Notification--preview .Notification-btnDelete:hover, .Notification--preview .Notification-btnDelete:focus {
      color: #1a1a1a; }
    .Notification--preview .Notification-btnDelete i {
      cursor: pointer; }

.Notification--reading {
  background-color: #fff;
  display: block;
  flex-direction: column;
  height: 100%;
  left: 0;
  padding: 20px 18px 10px 20px;
  position: absolute;
  top: 0;
  width: 100%;
  overflow: auto;
  overflow-x: hidden; }
  .Notification--reading::-webkit-scrollbar {
    width: 6px; }
    .Notification--reading::-webkit-scrollbar:horizontal {
      height: 6px; }
  .Notification--reading::-webkit-scrollbar-track {
    background-color: #f5f5f5;
    border-radius: 10px; }
  .Notification--reading::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px; }
  .Notification--reading .Notification-title {
    padding-right: 30px; }
  .Notification--reading .Notification-btnDelete {
    background-color: transparent;
    border: none;
    border-radius: 4px;
    color: #f44336;
    height: 40px;
    height: 40px;
    text-transform: uppercase;
    transition: 200ms;
    width: 100%; }
    .Notification--reading .Notification-btnDelete:focus {
      outline: none !important; }
    .Notification--reading .Notification-btnDelete:hover {
      background-color: #f44336;
      color: #fff; }
  .Notification--reading .Notification-content {
    color: #555555;
    font-size: 14px;
    height: auto;
    min-height: calc(100% - 157px);
    line-height: 1.4;
    overflow-y: auto;
    padding-right: 10px;
    word-break: break-word !important; }

.Notification--read .Notification-title {
  font-weight: normal; }

.Notification--read .Notification-excerpt {
  color: #888;
  font-weight: normal; }

.Notification--read .Notification-date {
  font-weight: normal; }

.contrast .Notifications:before {
  right: 13px;
  border-bottom-color: #000; }

.contrast .Notification-open {
  border: 1px solid #fff; }

.contrast .Notification-btnDelete {
  background-color: transparent !important; }

.contrast .Notification-footer {
  border: 0; }
  .contrast .Notification-footer button {
    border: 1px solid #fff !important; }