.note {
  padding: 5px 20px 5px 25px;
  border: 1px solid @color_grey-light;
  border-radius: 3px;
  box-shadow: inset 5px 0px 0px 0px @color_orange;
  margin-bottom: 30px;
  position: relative;

  &.green {
    box-shadow: inset 5px 0px 0px 0px @color_green;
    .note-title {
      color: @color_green
    }
  }
  &.blue {
    box-shadow: inset 5px 0px 0px 0px @color_blue;
    .note-title {
      color: @color_blue
    }
  }
  &.blue-light {
    box-shadow: inset 5px 0px 0px 0px @color_blue-light;
    .note-title {
      color: @color_blue-light
    }
  }
  &.red {
    box-shadow: inset 5px 0px 0px 0px @color_red;
    .note-title {
      color: @color_red
    }
  }
  &.purple {
    box-shadow: inset 5px 0px 0px 0px @color_purple;
    .note-title {
      color: @color_purple
    }
  }

}

.note-bounce {
  .animation(note-bounce 3s Ease-in-out infinite);
}

.note-pulse {
  .animation(note-pulse 3s Ease-in-out infinite);
}

.keyframes(note-pulse; { 0% {
  transform: scale3d(1, 1, 1);
} 50% {
    transform: scale3d(1.03, 1.03, 1.03);
  } 100% {
      transform: scale3d(1, 1, 1);
    } });

.keyframes(note-bounce; { 0%, 20%, 50%, 80%, 100% {
  .transform(translateY(0));
} 40% {
    .transform(translateY(-25px));
  } 60% {
      .transform(translateY(-10px));
    } });

.note-close {
  position: absolute;
  right: 15px;
  top: 15px;
  color: @color_grey-dark;
  cursor: pointer;
  font-size: 18px;
}

.note-title {
  .fz(22);
  color: @color_orange;
}

.note-description {
  margin: 0;
  p {
    margin-bottom: 0px;
  }
}
