.chart-info{
  padding: 12px;
  position: relative;
  width: 100%;
}
.chart-description{
  font-size: @fontSize-smaller;
  line-height: @lineHeight-tight;
  padding: 20px;
  text-align: center;
}
.info-input{
  transition: background-color 0.3s ease, opacity 0.2s ease;
  border-radius: 4px;
  overflow: hidden;
}
.info-input:hover,
.info-input:focus{
  background-color: @gray-lightest;
}
.dark .info-input:hover,
.dark .info-input:focus{
  background-color: @gray-darker;
}
.embed .info-input:hover,
.embed .info-input:focus,
.dark.embed .info-input:hover,
.dark.embed .info-input:focus{
  background-color: transparent;
}
.title{
  color: @gray-darker;
  font-size: @fontSize-large;
  padding: 8px;
}
.dark .title{
  color: white;
}
.note{
  color: @gray;
  padding: 8px;
}
.dark .note{
  color: @gray-dark;
}
.empty.note{
  display: none;
  opacity: 0;
}
.active .empty.note{
  opacity: 1;
}
.note::before{
  color: @gray;
  content: "add a note";
  display: none;
  opacity: 0.5;
  width: 100%;
}
.empty.note::before{
  display: block;
}
.note:focus::before{
  display: none;
}


@media screen and (min-width: @width-tablet) {
  .chart-info{
    height: 100%;
    right: 0;
    padding: 0;
    position: absolute;
    top: 0;
    width: @sidebar-width-small;
  }
  .chart-description{
    padding: 16px 10px 8px;
    position: absolute;
    right: 0;
    text-align: left;
    top: 0;
    width: @sidebar-width-small;
    z-index: 2;
  }
  .empty.note{
    display: block;
  }
  .embed .empty.note{
    display: none;
  }
}


@media screen and (min-width: @width-netbook) {
  .chart-info{
    width: @sidebar-width-large;
  }
  .chart-description{
    font-size: @fontSize-base;
    width: @sidebar-width-large;
  }
  .title{
    font-size: @fontSize-larger;
  }
}

@media screen and (min-width: @width-netbook) and (max-width: @width-desktop){
  .chart-grid .chart-info{
    width: @sidebar-width-small;
  }
  .chart-grid .chart-description{
    font-size: @fontSize-smaller;
    width: @sidebar-width-small;
  }
  .chart-grid .title{
    font-size: @fontSize-large;
  }
}
