@import url("https://fonts.googleapis.com/css?family=Maven+Pro");
[v-cloak] {
  opacity: 0; }

.curly-fomo {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 99999999;
  width: 100%;
  max-width: 640px;
  padding-left: 3vh;
  padding-bottom: 3vh;
  padding-right: 3vh;
  min-height: 150px;
  font-family: 'Maven Pro';
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse; }
  .curly-fomo::before {
    content: '';
    display: block;
    width: 800px;
    height: 800px;
    top: 100%;
    right: 100%;
    position: absolute;
    z-index: 0;
    -webkit-box-shadow: 0 0 40rem black;
            box-shadow: 0 0 40rem black;
    border-radius: 10000000px;
    opacity: 0; }
  .curly-fomo--with-notifications::before {
    opacity: 1; }
  .curly-fomo .fade-enter-active,
  .curly-fomo .fade-leave-active {
    left: 0; }
  .curly-fomo .fade-enter,
  .curly-fomo .fade-leave-to {
    left: -600px;
    opacity: 0; }
  .curly-fomo .notification {
    max-width: 450px;
    background-color: white;
    padding: 14px 0;
    -webkit-box-shadow: 0 0.5rem 1.5rem -0.25rem RGBA(0, 0, 0, 0.3);
            box-shadow: 0 0.5rem 1.5rem -0.25rem RGBA(0, 0, 0, 0.3);
    border-radius: 3px;
    font-size: 13px;
    line-height: 1.4;
    position: relative;
    color: RGBA(77, 77, 77, 1);
    margin-top: 3vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-transition: all 600ms cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transition: all 600ms cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
    .curly-fomo .notification strong {
      font-weight: bold;
      text-transform: capitalize; }
    .curly-fomo .notification:nth-child(1) {
      -webkit-box-ordinal-group: 6;
          -ms-flex-order: 5;
              order: 5; }
    .curly-fomo .notification:nth-child(2) {
      -webkit-box-ordinal-group: 5;
          -ms-flex-order: 4;
              order: 4; }
    .curly-fomo .notification:nth-child(3) {
      -webkit-box-ordinal-group: 4;
          -ms-flex-order: 3;
              order: 3; }
    .curly-fomo .notification:nth-child(4) {
      -webkit-box-ordinal-group: 3;
          -ms-flex-order: 2;
              order: 2; }
    .curly-fomo .notification:nth-child(5) {
      -webkit-box-ordinal-group: 2;
          -ms-flex-order: 1;
              order: 1; }
    .curly-fomo .notification a {
      font-weight: bold; }
    .curly-fomo .notification--activated {
      color: #e67e22; }
      .curly-fomo .notification--activated a {
        color: #e67e22; }
    .curly-fomo .notification--solved {
      color: #16a085; }
      .curly-fomo .notification--solved a {
        color: #16a085; }
    .curly-fomo .notification--update {
      color: #4745A5; }
      .curly-fomo .notification--update a {
        color: #4745A5; }
    .curly-fomo .notification--purchase a {
      color: RGBA(42, 91, 142, 1); }
    .curly-fomo .notification__image {
      -ms-flex-preferred-size: 60px;
          flex-basis: 60px;
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      -ms-flex-item-align: center;
          align-self: center;
      height: 60px;
      border-radius: 10000px;
      margin-left: 15px;
      -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25);
              box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25); }
    .curly-fomo .notification__content {
      -ms-flex-preferred-size: 200px;
          flex-basis: 200px;
      -webkit-box-flex: 1;
          -ms-flex-positive: 1;
              flex-grow: 1;
      padding: 0px 40px 0px 20px; }
    .curly-fomo .notification__time {
      font-size: 75%;
      margin-top: 3px;
      opacity: 0.5;
      font-weight: normal; }
    .curly-fomo .notification__close {
      position: absolute;
      top: 13px;
      right: 13px;
      display: block;
      width: 20px;
      height: 20px;
      line-height: 19px;
      text-align: center;
      border-radius: 100px;
      background-color: rgba(0, 0, 0, 0.15);
      color: white;
      font-size: 120%;
      font-weight: bold;
      cursor: pointer;
      -webkit-transition: all 120ms ease;
      transition: all 120ms ease; }
      .curly-fomo .notification__close:hover {
        background-color: rgba(0, 0, 0, 0.45); }