body {
  padding:0;
  margin:0;
  background-color:white;
  font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  text-align:center;
}

#headerWrapper {
  display:none;
  width:100%;
  background-color:black;
  position:fixed;
  top:0;
  left:0;
  height:44px;
  padding:0;
  border-bottom:1px solid #999;
  box-shadow: 0px 2px 19px #aaa;
  -o-box-shadow: 0px 2px 19px #aaa;
  -webkit-box-shadow: 0px 2px 19px #aaa;
  -moz-box-shadow: 0px 2px 19px #aaa;
  opacity:0.8;
}

#intro {
  margin-top:59px;
}

#main {
  /* these two margins settings are here just to ensure that jsPlumb handles
    margins properly.*/
  position: relative;
  margin:20px auto;
  font-size: 80%;
  border: 1px solid #999;
  width: 100%;
  height: 600px;
  overflow: hidden;
  border-radius: 10px;
  background-color:#eaedef;
  text-align: center;
}

/* Setting for dialog */

label, input {
  display:block;
}

input.text, select {
  margin:4px;
  padding:0;
  width:95%;
}

fieldset {
  padding:0;
  border:0;
  margin-top:25px;
}

h1 {
  font-size: 1.2em;
  margin: .6em 0;
}

div#users-contain {
  width: 350px;
  margin: 20px 0;
}

div#users-contain table {
  margin: 1em 0;
  border-collapse: collapse;
  width: 100%;
}

div#users-contain table td, div#users-contain table th {
  border: 1px solid #eee;
  padding: .6em 10px;
  text-align: left;
}

.ui-dialog .ui-state-error {
  padding: .3em;
}

.validateTips {
  border: 1px solid transparent;
  padding: 0.3em;
}

/* End of dialog setting */

li {
  margin: 3px;
  /*padding: 1px;*/
  /*text-align: -webkit-match-parent;*/
  background: #e6e6e6;
  border: 1px solid #d3d3d3;
  list-style-type: none;
  width: 120px;
}

#sidebar {
  font-size:13px;
}

/* demo elements */

.menu, #explanation {
  background-color:#fff;
}

.menu {
  height: 15px;
  float:right;
  padding-top:1em;
  padding-bottom:0.4em;
  background-color: transparent;
  margin-right:30px;
}

.otherLibraries {
  display:inline;
}

a, a:visited {
  text-decoration:none;
  color:#01a3c6;
  font-family:helvetica;
  padding:0.3em;
  border-radius:0.2em;
}

a:hover {
  color:#1b911b;
}

.selected {
  color:rgb(189, 11, 11) !important;
}

.window, .label {
  background-color:white;
  text-align:center;
  z-index:23;
  cursor:pointer;
  box-shadow: 2px 2px 19px #aaa;
  -o-box-shadow: 2px 2px 19px #aaa;
  -webkit-box-shadow: 2px 2px 19px #aaa;
  -moz-box-shadow: 2px 2px 19px #aaa;
}

path, ._jsPlumb_endpoint {
  cursor:pointer;
}

._jsPlumb_endpoint_drop_allowed {
  border: 4px solid #123456;
  box-shadow: 6px 6px 19px #444;
  -o-box-shadow: 6px 6px 19px #444;
  -webkit-box-shadow: 6px 6px 19px #444;
  -moz-box-shadow: 6px 6px 19px #444;
}

/* z index stuff */

._jsPlumb_connector {
  z-index:18;
}

._jsPlumb_endpoint {
  z-index:19;
}

._jsPlumb_overlay {
  z-index:23;
}

._jsPlumb_connector._jsPlumb_hover {
  z-index:21 !important;
}

._jsPlumb_endpoint._jsPlumb_hover {
  z-index:22 !important;
}

._jsPlumb_overlay {
  border:1px solid #346789;
  opacity:0.8;
  filter:alpha(opacity=80);
  background-color:white;
  color:black;
  font-family:helvetica;
  padding:0.5em;
}

/* DREAM specific css */

#available {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid;
  margin-top: 350px;
  margin-left: 150px;
  border-radius: 10px;
}

#tools {
  /*  position: absolute;
  width: 200px;
  height: 400px; */
  width: 100%;
  border: 1px solid #999;
  margin: 20px 0;
  border-radius: 10px;
  padding-bottom: 20px;
}

#tools-container {
  margin-bottom: 4px;
}

#simulation_controls {
  /*  position: absolute;
  width: 200px;
  height: 300px;
  margin-top: 550px;
  margin-left: 35px;
  font-size:13px; */
  width: 100%;
  border: 1px solid #999;
  border-radius: 10px;
}

.tool {
  border: 1px solid lightgray;
  box-shadow: 1px 1px 2px #aaa;
  /*margin-top: 20px;
  margin-left: 35px;*/
  min-width:7em;
  height:2em;
  z-index: 10001;
  color: gray;
  font-family:serif;
  font-style:italic;
  padding-top:0.9em;
  font-size:0.9em;
  margin:0.5em;
  display: inline-block;
  border-radius: 5px;
}

#graph {
  width: 70%;
  height: 250px;
  text-align: center;
  margin-left:auto;
  margin-right:auto;
  padding-top:2px;
  margin-top:0px;
}

.capacity_graph {
  width: 70%;
  height: 250px;
  text-align: center;
  margin-left:auto;
  margin-right:auto;
  padding-top:2px;
  margin-top:0px;
}

#queue_stat_graph {
  width: 70%;
  height: 250px;
  text-align: center;
  margin-left:auto;
  margin-right:auto;
  padding-top:2px;
  margin-top:0px;
}

#tools .ui-button {
  width:80%;
  margin:4px 0;
}

.Dream-Source, .Dream-BatchSource {
  border: 1px solid #bbc;
  background-color:#ffe;
  background-image: linear-gradient(to bottom, #ffe 0%, #dde 100%);
}

.Dream-Machine, .Dream-MachineJobShop, .Dream-BatchScrapMachine, .Dream-MachineManagedJob, .Dream-MouldAssembly {
  border: 1px solid #cbc;
  background-color: #fef;
  background-image: linear-gradient(to bottom, #fef 0%, #ede 100%);
}

.Dream-Queue, .Dream-QueueJobShop, .Dream-LineClearance, .Dream-QueueManagedJob, .Dream-ConditionalBuffer, .Dream-OrderDecomposition, .Dream-MouldAssemblyBuffer {
  border: 1px solid #bcc;
  background-color:#eff;
  background-image: linear-gradient(to bottom, #eff 0%, #dee 100%);
}

.Dream-Exit, .Dream-ExitJobShop {
  border: 1px solid #ccb;
  background-color:#eef;
  background-image: linear-gradient(to bottom, #eef 0%, #dde 100%);
}

.Dream-EventGenerator {
  border: 1px solid #cba;
  background-color:#fdc;
  background-image: linear-gradient(to bottom, #fdc 0%, #ecb 100%);
}

.Dream-BatchDecomposition, .Dream-BatchDecompositionStartTime, .Dream-BatchReassembly {
  border: 1px solid #bcb;
  background-color:#dfd;
  background-image: linear-gradient(to bottom, #dfd 0%, #cec 100%);
}

.Dream-Repairman {
  border: 1px solid #cbb;
  background-color:#fdd;
  background-image: linear-gradient(to bottom, #fdd 0%, #dcc 100%);
}

#exit_stat {
  display: inline-block;
}

#exit_stat table, #exit_stat td {
border: 1px solid black;
}

.window, .dummy_window {
  border:1px solid lightgray;
  width:100px;
  height:64px;
  position:absolute;
  color:black;
  font-family:serif;
  font-style:italic;
  padding-top:0.9em;
  font-size:0.9em;
  cursor:move;
  font-size:11px;
  -webkit-transition:background-color 0.1s ease-in;
  -moz-transition:background-color 0.1s ease-in;
  transition:background-color 0.1s ease-in;
  border-radius: 5px;
}

.window:hover {
  background-color: #5c96bc;
  background-image: none;
  color:white;
}

.dummy_window {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
}

#debug_json textarea {
  width:95%;
}

#error{
  text-align: left;
}

.ep {
  position:absolute;
  bottom:37%;
  right:5px;
  width:1em;
  height:1em;
  background-color:orange;
  cursor:pointer;
  box-shadow: 0px 0px 2px black;
  -webkit-transition:-webkit-box-shadow 0.25s ease-in;
  -moz-transition:-moz-box-shadow 0.25s ease-in;
  transition:box-shadow 0.25s ease-in;
}

._jsPlumb_source_hover, ._jsPlumb_target_hover, .dragHover {
  background-color:#1e8151;
  background-image: none;
  color:white;
}

path {
  cursor:pointer;
}

#spreadsheet_output {
  margin: 20px 0;
}

#gantt_output {
  height: 400px;
  margin: 20px 0;
}

.sub_task {
  background-color: #3DD388;
  border-color: #28B06C;
}

li.result {
  width: 100%;
  text-align: left;
  cursor:pointer;
}

li.result.active {
  background:#fcc;
}
