.shortcut-key {
  padding: 0 0.25rem;
  border: 1px solid $border-color;
  margin-right: 0.125rem;
  border-radius: $btn-border-radius;
}

#erd-tool-container {
	width: 100%;
	height: 100%;

  .file-input-hidden {
    height: 0;
    width: 0;
    visibility: hidden;
  }

  .text-icon {
    font-weight: bold;
  }

  .erd-hint-bar {
    background: $sql-gutters-bg;
    padding: 0.25rem 0.5rem;
  }

  .diagram-container {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .floating-note {
    width: 250px;
    border: $panel-border;
    border-radius: $panel-border-radius;
    box-shadow: $dialog-box-shadow;
    background-color: $alert-dialog-body-bg !important;
    color: $color-fg !important;

    .note-header {
      padding: 0.25rem 0.5rem;
      background-color: $alert-header-bg;
      font-size: $font-size-base;
      font-weight: bold;
      color: $alert-header-fg;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      border-radius: 0rem;
      border-top-left-radius: $panel-border-radius;
      border-top-right-radius: $panel-border-radius;
      border-bottom: none;
      margin: -$alertify-borderremove-margin; //-24px is default by alertify
      margin-bottom: 0px;
    }

    .note-body {
      word-break: break-all;
      & textarea {
        width: 100%;
        border: none;
        border-bottom: $border-width solid $erd-node-border-color;
        border-top: $border-width solid $erd-node-border-color;
      }

      & .pg_buttons {
        padding: 0.25rem;
      }
    }
  }

  .html2canvas-reset {
    background-image: none !important;
    overflow: auto !important;

    & > svg, & > div {
      transform: none !important;
    }
  }

  .diagram-canvas{
    width: 100%;
    height: 100%;
    color: $color-fg;
    font-family: sans-serif;
    background-color: $erd-canvas-bg;
    background-image: $erd-bg-grid;
    cursor: unset;

    .table-node {
      background-color: $input-bg;
      border: $border-width solid $erd-node-border-color;
      border-radius: $input-border-radius;
      position: relative;
      width: 175px;
      font-size: 0.8em;

      .table-icon-schema {
        background-image: url('~top/browser/server_groups/servers/databases/schemas/static/img/schema.svg') !important;
        // background-repeat: no-repeat;
        // // background-size: 20px !important;
        // align-content: center;
        // vertical-align: middle;
        // height: 100%;
        // background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIwLjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA2NCA2NCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjQgNjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDpub25lO3N0cm9rZTojOTk5OTk5O3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTIxLjksMjIuMmMwLDMuNS0yLjksNi40LTYuNCw2LjRzLTYuNC0yLjktNi40LTYuNHMyLjktNi40LDYuNC02LjRTMjEuOSwxOC43LDIxLjksMjIuMnogTTQuMiw1MWwyMi4xLTE5CgkgTTQ2LjUsNTEuMUwyNi40LDMyIE0zNy42LDQyLjZsMTEuNi0xMCBNNjIuNCw0NS4xTDQ5LjIsMzIuNyBNNjMsMUgxdjYyaDYyVjF6IE0xLDUxLjRoNjIiLz4KPC9zdmc+Cg==');

        width: 20px;
        height: 20px;
        // background: transparent url('~top/browser/server_groups/servers/databases/schemas/static/img/schema.svg') no-repeat center center;
        // height: 100%;
        // width: 20px;
      }

      &.selected {
        border-color: $input-focus-border-color;
        box-shadow: $input-btn-focus-box-shadow;
      }

      .table-toolbar {
        background: $editor-toolbar-bg;
        border-bottom: $border-width solid $erd-node-border-color;
        padding: 0.125rem;
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
        display: flex;

        .btn {
          &:not(:first-of-type) {
            margin-left: 0.125rem;
          }
        }
      }

      .table-schema-data {
        border-bottom: $border-width solid $erd-node-border-color;
        padding: $erd-row-padding;

        & .table-schema {
          font-weight: bold;
          word-break: break-all;
        }
      }

      .table-name-data {
        border-bottom: $border-width*2 solid $erd-node-border-color;
        padding: $erd-row-padding;

        & .table-name {
          font-weight: bold;
          word-break: break-all;
        }
      }

      .table-cols {
        .col-row {
          border-bottom: $border-width solid $erd-node-border-color;
          .col-row-data {
            padding: $erd-row-padding;
            width: 100%;
            word-break: break-all;
          }
          .col-row-port {
            padding: 0;
            min-height: 0;
          }
        }
      }
    }

    .svg-link-ele {
      stroke: $erd-link-color;
    }

    .svg-link-ele.path {
      pointer-events: all;
    }

    @keyframes svg-link-ele-selected {
      from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; }
    }

    .svg-link-ele.selected {
      stroke: $erd-link-selected-color;
      stroke-dasharray: 10, 2;
      animation: svg-link-ele-selected 1s linear infinite;
    }

    .svg-link-ele.svg-otom-circle {
      fill: $erd-link-color;
    }

    .custom-node-color{
      position: absolute;
      top: 50%;
      left: 50%;
      width: 20px;
      height: 20px;
      transform: translate(-50%, -50%);
      border-radius: 10px;
    }

    .circle-port{
      width: 12px;
      height: 12px;
      margin: 2px;
      border-radius: 4px;
      background: darkgray;
      cursor: pointer;
    }

    .circle-port:hover{
      background: mediumpurple;
    }

    .port {
      display: inline-block;
      margin: auto;
    }
  }
}
