/* for BPMN.html */

/* Diagram and palette area */

.bpmn #myDiagramDiv {
  float: left;
  border: solid 1px gray;
  border-left: none;
  width: calc(85% - 4px);
  height: 700px;
  background-color: white;
  position: relative;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  cursor: auto;
}

.bpmn #description {
  float: left;
  margin-left: 4px;
}

.bpmn #PaletteAndDiagram {
  position: relative;
  overflow: hidden;
  width: 100%;
  border: 1px red;
  padding: 0px;
}

.bpmn #sideBar {
  float: left;
  width: 15%;
  min-height: 500px;
  text-align: center;
  border: 1px solid gray;
}

.bpmn .myPaletteDiv {
  width: 100%;
  min-height: 625px;
}

.bpmn #accordion {
  margin: 0px; 
  width: 97%;
  min-height: 625px;
}

.bpmn #myOverviewDiv {
  width: 100%;
  height: 225px;
}

/* top bar area */

.bpmn .ui-accordion .ui-accordion-content {
  padding: 1px;
}
.bpmn .ui-menu {
  width: 120px;
  background-color: rgb(255,255,255)!important;
}
.bpmn #menuui {
  height: 30px;
  width: calc(100% - 3px);
}
.bpmn #menuui > li {
   float: left;
}    
.bpmn .ui-menu-item-wrapper {
  display: block;
}

.bpmn input {
  text-align: center;
  font-size: large;
  float: left;
}

.bpmn #myOverviewDiv {
  background-color: lightgray;
  position: absolute;
  width: 200px;
  height: 100px;
  top: 0px;
  right: 1px;
  background-color: rgb(250, 250, 250);
  z-index: 300;
  border: 1px solid rgb(0, 0, 255);
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  cursor: auto;
}

.bpmn #currentFile {
  width: calc(100% - 1px);
  text-align: center;
  font-family: Arial;
  font-weight: bold;
  font-size: 14px;
  padding: 3px 0px;
  color: white;
  border: 1px solid rgb(197, 197, 197);
}

.bpmn .draggable {
  display: inline-block;
  vertical-align: top;
  border: 1px solid gray;
  background-color: #e2e2e2;
  position: absolute;
  top: 40%;
  left: 50%;
  width: 300px;
  height: 200px;
  z-index: 500;
}

.bpmn .handle {
  background-color: #9CCB19;
  text-align: center;
  font: bold 12px sans-serif;
}

.bpmn .elementText {
  font-family: Arial;
  font-size: medium;
  margin-left: 10px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.bpmn .mySavedFiles {
  font-family: Arial;
  font-size: medium;
  width: 250px;
  margin-left: 25px;
}

.bpmn .elementBtn {
  margin-top: 20px;
  font-family: Arial;
  font-size: medium;
  margin-left: 20px;
}

/* sample thumbnails bottom area */

.bpmn figure {
      display: inline-block; 
      margin: 10px;
  }