body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Basic style */
.tabs {
  position: relative;
  margin: 0;
  padding: 0;
  z-index: 20;
  list-style: none;
}
.tabs .tab {
  padding: 10px;
  box-sizing: border-box;
  background: #fff;
  color: #337ab7;
}
.tabs .tab .close {
  margin-left: 5px
}
.tabs .tab .close::before {
  content: '\D7';
}
.tabs .tab.active {
  border: 1px solid #ddd;
  background: #fff;
}
.tabs .tab:not(.active):hover {
  background: #eee;
}
.tabs .tab.dragging{
  border: 1px solid #337ab7;
}

.panelContainer {
  position: relative;
  padding: 10px;
  z-index: 10;
  background: #fff
}

.panelContainer.preserve .panel.inactive {
  display: none;
}

/* TabPosition */
.tabs.top {
  display: block;
}
.tabs.top .tab {
  display: inline-block;
  margin-right: 2px;
  border-radius: 4px 4px 0 0
}
.tabs.top .tab.active {
  border-bottom-color: transparent;
}
.tabs.top + .panelContainer {
  border-top: 1px solid #ddd;
  margin-top: -1px;
}

.tabs.left {
  display: inline-block;
}

.tabs.left .tab {
  display: block;
  margin-bottom: 2px;
  border-right: 1px solid #ddd;
  border-radius: 4px 0 0 4px
}

.tabs.left .tab.active {
  border-right-color: transparent;
}

.tabs.left + .panelContainer {
  display: inline-block;
  vertical-align: top;
  border-left: 1px solid #ddd;
  margin-left: -1px;
}