$white: #fff;
$light-blue: #e4f0ff;

.notes-container {
  background-color: $white;
  bottom: 0;
  counter-reset: note-footer;
  height: 95px;
  left: 15%;
  max-height: 700px;
  min-height: 10px;
  position: fixed;
  width: 80%;
  z-index: 0;

  .resize-area {
    background-image: linear-gradient(to right, #000 30%, rgba(255, 255, 255, 0) 0%);
    background-position: top;
    background-size: 10px 1px;
    background-repeat: repeat-x;
    cursor: row-resize;
    height: 3px;
    position: absolute;
    top: -14px;
    width: 100%;
   }
   .sc-isolated-node,
   .sc-isolated-node.sm-default-style.sm-selected,
   .sc-isolated-node.sm-default-style.sm-co-selected {
     border: 4px solid $light-blue ;
     outline: none;
     padding: 0 0 8px 5px;
   }

   .sc-isolated-node .sc-text-property::before {
    content: ''counter(note-footer)'. ';
    counter-increment: note-footer;
    left: -40px;
    position: absolute;
    }
  }