.webcg-devtools {
  background: white;
  color: black;
  font-size: 16px;
  line-height: normal;

  .btn-sm {
    min-width: 32px; /* 2rem */
  }

  .flex-columns {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
  }

  .form-row {
    flex: 0 0 auto;
  }

  .modal {
    height: auto;
    width: auto;
    box-shadow: 0 20px 32px -8px rgba(9, 45, 66, .25);

    .modal-content {
      resize: both;
      overflow: hidden; // for resize property to work
      height: 100%;

      min-width: 410px;
      min-height: 63px;

      .modal-header {
        flex: 0 0 auto;
        border-bottom: 0;
      }

      .modal-navbar {
        .nav {
          padding: 0 16px; /* 0 1rem */
        }
      }

      .modal-body {
        position: static; // for resize property to work
        display: flex;
        flex-direction: column;

        overflow: auto;
        padding-bottom: 0;
      }

      .modal-footer {
        flex: 0 0 auto;
        justify-content: center;
        padding: 12px;
        font-size: 12px;
      }
    }
  }

  .draggable {
    position: absolute;
    z-index: auto;
  }

  .drag-handle {
    cursor: grab;
    cursor: -webkit-grab;
  }

  .dragging .drag-handle {
    cursor: grabbing;
    cursor: -webkit-grabbing;
  }
}