body {
  background: #fbfaf6;
  padding: 0 10px;
  display: block;
  margin: auto;
  max-width: 760px;
}

.lesson {
  background: #fff;
  min-height: 320px;
  padding: 20px 0 100px 0;
}

.lesson:empty:before {
  content: 'drag and drop gadgets here';
  display: inline-block;
  text-align: center;
  width: 100%;
  line-height: 320px;
  font-size: 32px;
  color: #c2c4c6;
}

.asset-picker {
  z-index: 101;
  top: -200px;
  left: 50%;
  margin-left: -160px;
  width: 320px;
  background: #fff;
  box-shadow: 0 0 10px #777;
  position: absolute;
  padding: 15px;
  transition: top 250ms;
}

.asset-picker:before {
  content: 'Asset picker';
}

.asset-picker input[type=file] {
  margin: 15px 0;
  width: 300px;
  display: block;
}

.asset-picker.visible {
  top: 0;
}

.saving {
  position: absolute;
  top: 0;
  right: 25px;
  line-height: 30px;
  background: green;
  color: white;
  opacity: 0;
  transition: opacity 250ms;
  padding: 0 1em;
}

.saving:before {
  content: 'saving ';
}

.saving.visible {
  opacity: 1;
  transition: opacity 250ms;
}

.notification-success {
  color: green;
}

.notification-error {
  color: red;
}