.DashboardCanvasItemEditable {
  display: flex;
  z-index: 10;
  position: relative;

  .DashboardCanvasItemEditableInput {
    height: calc(100% - 51px);

    .ql-container {
      border-bottom: none;
    }

    .ql-editor {
      background: white;
      min-height: 40px;
      border-bottom: 1px solid #ccc;
      border-right: 1px solid #ccc;
      border-left: 1px solid #ccc;
      margin-left: -1px;
      margin-right: -1px;
    }

    .ql-toolbar {
      height: auto;
      background: white;
    }

    .ql-picker-label {
      &:before {
        vertical-align: top;
      }
    }
  }

  .DashboardCanvasItemEditableOverlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    cursor: pointer;
  }

  ul {
    padding-left: 20px;
    li {
      &.ql-indent-1 {
        margin-left: 20px;
      }    
      &.ql-indent-2 {
        margin-left: 40px;
      }    
      &.ql-indent-3 {
        margin-left: 60px;
      }    
      &.ql-indent-4 {
        margin-left: 80px;
      }    
      &.ql-indent-5 {
        margin-left: 100px;
      }    
      &.ql-indent-6 {
        margin-left: 120px;
      }    
      &.ql-indent-7 {
        margin-left: 140px;
      }    
      &.ql-indent-8 {
        margin-left: 160px;
      }    
      &.ql-indent-9 {
        margin-left: 180px;
      }    
      &.ql-indent-10 {
        margin-left: 200px;
      }    
    }
  }

  .text,
  .ql-editor {
    strong {
      font-weight: 700;
    }
    em {
      font-style: italic;
    }
  }
}
