.editor-body {
  display: flex;
  flex-direction: row;
}

.draggable {
  top: 200px;
  left: 400px;
    z-index: 4;
    background-color: rgba(230, 230, 230, 0.95);
  }
  
  .draggable.is-pointer-down {
    background: #999FA4;
  }
  .draggable.is-dragging { opacity: 0.9; }
  
  .handle {
    background: rgba(67, 103, 163, 0.80);
    width: 100%;
    height: 20px;
    left: 100px;
  }


  .propGrid.max-width {
    max-width: 400px;
  }

  .codeEditorGrid{

    width: 1000px;
    height: 560px;

  }
  
  .params-textfield-input {
    width: 400px;
  }

  .codeEditorGrid.max-width {
    max-width: 1200px;
  }

  .propEditorGrid.max-width {
    max-width: 700px;
  }

  .aceEditor {
    width:inherit; height: 400px
  }

  .avatarName {

    color: #2E7D32;
    font-weight: bold;

  }

  .nodeItem {

      color: black
    
      }

      .sideBar {
        padding-left: 16px;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: rgba(236, 236, 236, 0.88);
        z-index: 3;
        position: fixed;
        width: 450px;
        height: 95%;
      }

      .settingsDiv {
        padding-left: 16px;
        overflow: auto;
        background-color: rgba(230, 230, 230, 0.95);
        z-index: 2;
        position: absolute;
      }

      .userList {
        padding-left: 16px;
      }

      .gizmomode {
        cursor:pointer;
      }

      .avatar-card {
        cursor:pointer;
        background-repeat: no-repeat;
        height: 200px;
        background-position: center top;
        background-size: 100%;
      }

      .create-card {
        cursor:pointer;
      }

  /*    .avatar-card .mdc-card__primary,
      .avatar-card .mdc-card__actions {
        background: rgba(0, 0, 0, .4);
      }

      */

    /*   :root {
        --mdc-theme-primary: #9E9E9E;
      }
      */

      .prop-text-field-input {

        font-size: inherit;
        padding: 5px;

      }

     /*  .prop-mdc-text-field {
        
        height: 56px;
       
      }
 */

      .mdc-list-item__graphic {
        margin-left: 0;
        margin-right: 32px;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
      }
      .createItems{
        height: 40px;
        width: 40px;
        cursor:pointer;
      }

      .protoPropLabel {

        font-weight: bold

      }

      .editButton{
        height: 30px;
        width: 30px;
      }

      .createListItem {
        width: 30px;
        cursor:pointer;
      }

   /*    .tooltip {
       position: relative;
        display: inline-block; 
        border-bottom: 1px dotted black; 
    }
     */

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 100px;
        background-color: rgba(134, 134, 134, 0.85);
        color: rgb(255, 255, 255);
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        
        /* Position the tooltip */
        position: absolute;
        z-index: 1;
        bottom: 100%;
        left: 50%; 
        margin-left: -50px; 
    }
    
    .tooltip:hover .tooltiptext {
        visibility: visible;
    }