#document-styles-control-container {
  .document-styles-container {
    .document-editor-scrollview {
      float: left;
      height: 300px;
      width: calc(100% - 30px);
      margin: 0 15px 15px 15px;
    }

    .document-styles-title {
      font-weight: bold;
      margin: 15px 15px 0 15px;
    }

    /* Document Style */
    .document-style {
      float: left;
      position: relative;
      // margin: 10px 5px 0px 5px; <- changed by bart
      margin: 0 5px 0px 5px;
      width: calc(100% - 10px);
      border-radius: 5px;
      padding: 5px;
      cursor: pointer;

      &:nth-of-type(1) {
        margin-top: 5px;
      }

      &:nth-last-child(1) {
        margin-bottom: 5px;
      }

      &.active,
      &:hover {
        background-color: $document-editor-side-menu-background-color;
      }

      .document-style-code {
        margin-left: 5px;
        line-height: 26px;
      }

      /* Document Style options */
      .document-style-options {
        position: absolute;
        top: 0;
        right: 0;
        opacity: 0;

        button {
          width: 26px;
          height: 26px;
          margin: 5px;
        }
      }

      &:hover {
        .document-style-options {
          opacity: 1;
          transition: 0.5s;
        }
      }
    }
  }

  /* Document Style function button visibility */
  .selected-document-styles-container {
    .document-style {
      .document-style-function-button-add {
        display: none;
      }
    }
  }

  .available-document-styles-container {
    .document-style {
      .document-style-function-button-remove {
        display: none;
      }
    }
  }
}