
.sticky-text-content::-webkit-scrollbar {
  display: none;
}
.sticky-row-container{
  display: block;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}

/* Some positioning and ratios */
.sticky-container {
  position: relative;
  display: inline-block;
  white-space: normal;
}

.sticky-outer {
  display: flex;
  /* padding-top: 55%; */
  padding-top: 180px;
  position: relative;

  width: 100%;
}

.sticky {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Shadow behind the sticky note */
.sticky:before {
  box-shadow: -2px 2px 15px 0 rgba(0, 0, 0, 0.5);
  background-color: rgba(0, 0, 0, 0.25);
  content: '';
  width: 90%;
  left: 5px;
  height: 83%;
  position: absolute;
  top: 30%;
}

/* The sticky note itself */
.sticky-content {
  background: linear-gradient(
    180deg,
    rgba(187, 235, 255, 1) 0%,
    rgba(187, 235, 255, 1) 12%,
    rgba(170, 220, 241, 1) 75%,
    rgba(195, 229, 244, 1) 100%
  );
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: left;
  align-items: left;
  padding: 1em 2em;
  /* font-family: 'Kalam', cursive; */
  /* font-size: 1rem; */
  clip-path: url(#stickyClip);
}
.sticky-text-content{
  overflow-y: scroll;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  width: 100%;
  white-space:pre-line;
}

/* Add responsiveness */
@media screen and (min-width: 640px) {
  .sticky:before {
    height: 79%;
    width: 90%;
  }
  .sticky-content {
    /* font-size: 1.25rem; */
  }
}

@media screen and (min-width: 768px) {
  .sticky:before {
    height: 75%;
    width: 90%;
  }
  .sticky-content {
    /* font-size: 1.5rem; */
  }
}

@media screen and (min-width: 1024px) {
  .sticky:before {
    height: 73%;
    width: 90%;
  }
  .sticky-content {
    /* font-size: 1.875rem; */
  }
}
