.smd-canvas {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  position: relative;
}
.smd-canvas .smd-host {
  width: 128px;
}
.smd-canvas .smd-host.smd-left-inline-host {
  position: relative;
}
.smd-canvas .smd-host.smd-right-inline-host {
  position: relative;
}
.smd-canvas .smd-host.smd-blocks-host {
  flex-grow: 1;
}
.smd-canvas .smd-host .smd-component {
  transition: all 0.1s linear;
  cursor: default;
}
.smd-canvas .smd-host .smd-component.smd-clickable {
  cursor: pointer;
}
.smd-canvas .smd-host .smd-component .smd-label {
  text-align: center;
}
.smd-canvas .smd-placeholder {
  text-align: center;
  color: #337ab7;
}
.smd-canvas .smd-block {
  margin: 8px 0;
  padding: 8px 0;
}
.smd-canvas .smd-block:hover {
  background-color: rgba(87, 87, 87, 0.15);
}
.smd-canvas .smd-inline-block {
  position: absolute;
  white-space: nowrap;
  width: 100%;
}
.smd-canvas .smd-inline-block .smd-label {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.smd-canvas .smd-inline-block .smd-inline-marker {
  transition: all 0.1s linear;
  height: 32px;
  width: 32px;
  border-radius: 50%;
  margin: auto;
  background-color: rgba(87, 87, 87, 0.3);
}
.smd-canvas .smd-inline-block:hover .smd-inline-marker {
  background-color: rgba(87, 87, 87, 0.45);
}