.tabcontainer {
  position: relative;
  width: 100%;
}

.tabs {
  border-bottom: 1px solid #ddd;
  width: 100%;
}

.tabs .tab {
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  padding: 6px;
  display: inline-block;
  margin-left: 5px;
  margin-bottom: -1px;
  border-radius: 3px 3px 0 0;
  cursor: pointer;
  height: 21px;
  position: relative;
}

.tabs .tab:first-child {
  margin-left: 0
}

.tabs .tab input {
  cursor: pointer;
  width: 75px;
  color: #bbb;
}

.tabs .tab a {
  display: inline-block;
  text-decoration: none;
  vertical-align: middle;
}

.tabs .tab a:after {
  font-family: formofill;
  content: "\e609";
  font-size: 16px;
  margin-left: 6px;
  color: #bbb;
}

.tabs .tab:first-child a {
  visibility: hidden;
}

.tabs .tab a.edit {
  visibility: visible;
}

.tabs .tab a.edit:after {
  content: "\e603";
  color: #008000;
}

.tabs .tab a.edit:hover:after {
  content: "\e603";
  color: #008000;
}

.tabs .tab a:hover:after {
  color: #ddd;
}

.tabs .tab:last-child input {
  width: 10px;
}

.tabs .tab:last-child a:after {
  content: "\e606";
}

.tabs .tab.current {
  border-bottom: 1px solid #fff;
  .rule-count {
    color: #111;
  }
}

.tabs .tab.current input {
  color: #111
}

.tabs .tab input[type=text] {
  border: 0;
  padding: 0;
}

.tabs .tab .rule-count {
  vertical-align: top;
  font-size: 11px;
  margin-left: 5px;
}
