/* Styles for steps and containers */
.wrapper, .socket, .autosocket{
  display: inline-block;
  position: relative;
}

.socket {
  position: relative;
}


.block {
  position: relative;
  display: inline-block;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  padding-bottom: 1px;
  border-color: inherit;
  border-width: 2px;
  border-style: solid;
  white-space: nowrap; 
}

.value .block{
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}

.trigger > .block{
  -webkit-border-top-right-radius: 25px;
  -webkit-border-top-left-radius: 25px;
  -moz-border-radius-topright: 25px;
  -moz-border-radius-topleft: 25px;
  border-top-right-radius: 25px;
  border-top-left-radius: 25px;
  padding-top: 15px;
}

.blockhead{
  font-family: Georgia;
  font-size: 12px;
  white-space: nowrap;
  padding: 7px 20px;
  padding-bottom: 6px;
  margin: 0px;
}

.value > .block > .blockhead{
    padding: 3px 10px 3px 10px;
    margin: 1px;
}

.socket {
  padding: 0px;
  margin: 0px;
}

.value > .block{
    border: 1px solid white;
}


.slot, .flap {
  display: block;
  left: 0px;
  margin: 0px;
  margin-left: 20px;
  margin-right: auto;
  width: 16px;
  height: 5px;
  -webkit-border-top-right-radius: 4px;
  -webkit-border-top-left-radius: 4px;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-topleft: 4px;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  border-width: 2px 2px 0px 2px;
  border-style: solid;
  border-color: inherit;
}

.flap {
  position: absolute;
  top: -7px;
  left: 0px;
  background-color: inherit;
}

.slot {
    top: -7px;
    position: absolute;
    background-color: #FFF;
    width: 20px;
}


.contained {
  display: block;
  background-color: white;
  position: relative;
  padding-top: 1px;
  margin-left: 10px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  overflow: visible;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-width: 2px 0px 2px 2px;
  border-style: solid;
  border-color: inherit;
  right: -2px;
}


.next {
  position: relative;
  display: block;
  background-color: transparent;
  border-color: inherit;
  width: 100%;
  overflow: visible; 
}

.block input {
  margin-left: 5px;
  width: 3em;
  margin-right: 5px;
  border: 0px;
  padding: 0px;
  height: 16px;
  background-color: white;
}

.block .blockhead{
    overflow-y: hidden;
}


.socket{
    border-width: 2px 0px;
    border-style: solid;
}

.value.wrapper{
    border-width: 0px 2px;
    border-style: solid;
}


.selected > .block{
    outline: blue ridge thick;
}

.drag_active{
    background-color: yellow;
}

.drop_active{
    background-color: yellow;
}