* {
    font-family: 'Calibri', Courier;
    outline-color: transparent;
}

html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
}

#container {
    width: 100%;
    height: 800px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: move;
    border: 1px dashed #afafaf;
}


#messages {
    position: absolute;
    right: 3em;
    bottom: 3em;
    font-size: 12px;
    margin: 0;
}

#messages li {
    list-style: none;
    background: #CCFFCC;  /* previously #efefef */
    margin: 1px 0 0 0;
    padding: 0.4em 0.7em;
    text-align: right;
}

#messages li.error {
    background: #ffbfbf;
}

.context-menu-list {
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
}

.context-menu-separator {
    padding: 0;
}

.context-menu-item {
    line-height: 22px;
    font-size: 12px;
}

.context-menu-item.icon {
    background-position: 3px 5px;
}

.context-menu-item.hover {
    background-color: #dddddd;
}

.context-menu-item.disabled {
    background-position: -1000px -1000px;
}

.context-menu-item.icon-addNode {
    background-image: url( 'static/images/add-node.png' );
}

.context-menu-item.icon-clearSchema {
    background-image: url( 'static/images/clear-schema.png' );
}

.context-menu-item.icon-openLink {
    background-image: url( 'static/images/open-link.png' );
}

.context-menu-item.icon-editNode {
    background-image: url( 'edit-node.png' );
}

.context-menu-item.icon-deleteNode {
    background-image: url( 'delete-node.png' );
}

.ui-widget {
    font-size: 12px;
}

.ui-corner-all {
    border-radius: 0;
}

.ui-dialog-buttonpane {
    padding: 2px 0 0 0 !important;
}

fieldset {
    padding: 0;
    margin: 0;
    border: none;
}

fieldset input {
    width: 99%;
    border: 1px solid lightgrey;
    font-family: 'Calibri', Courier !important;
    margin: 0 0 4px 0;
    font-
}

label {
    font-weight: bold;
}

input.required {
    border: 1px solid red;
}

select.required {
    border: 1px solid red;
}

textarea.required {
    border: 1px solid red;
}

#container .node {
    ---border: 1px solid rgba( 0, 0, 0, 0 );
    display: inline;
    position: absolute !important;
    ---background: #e7ffe0;
    ---padding: 0.4em 0.7em;
    ---border-radius: 0.4em;
    cursor: pointer;
    width: 40px;
    height: 40px;
}

#container .node img {
    position: absolute;
    left: 0;
    top: 0;
}

#container .node .title {
    display: block;
    position: relative;
    left: 0;
    top: 12px;
    text-align: center;
    color: #ffffff;
    font-size: 12px;
    width: 100%;
    height: 100%;
}


.selected {
    ---background: #ffebac;
    ---border: 1px solid saddlebrown;
}

.linkLabel {
    border: 1px solid gray;
    background: white;
    font-size: 12px;
    padding: 0.4em 0.7em;
    cursor: pointer;
}

.contentContainer {
    margin: 20px;

}

.toggle-btn-up {}
.toggle-btn-down {background-color: #dae0e5; }


li {
    list-style: none;
}

.column-left {
  float: left;
  width: 70px;
}

.column-center {
  display: inline-block;
  width: auto;
}

.column-right {
  float: right;
  width: 300px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}


/* create new class for larger bootstrap modal size. */
.modal-xxl {
  max-width: 90%; /* Adjust the width as needed */
  max-height: 60%;
}

.dropzone {
    border: 2px dashed #007bff;
    background: #f8f9fa;
    padding: 20px;
    border-radius: 5px;
  }

.dropzone-custom {
  /*width: 400px; /* Set your desired width */
  height: 300px; /* Set your desired height */
  border: 2px dashed #007bff; /* Customize the border */
  background: #f8f9fa; /* Customize the background color */
  padding: 20px; /* Customize the padding */
  border-radius: 5px; /* Customize the border radius */
  display: flex; /* Center the message */
  justify-content: center; /* Center the message */
  align-items: center; /* Center the message */
  text-align: center; /* Center the message */
}

.dropzone-custom .dz-message {
  font-size: 16px; /* Customize the font size */
  color: #007bff; /* Customize the text color */
}