.serial {
  counter-increment: Serial;
}
.serial .counter:before {
  content: counter(Serial);
}

.nav-tabs .nav-link {
  border: 1px solid transparent;
  color: #999;
}
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: #495057;
  background-color: #fff;
}

/* form */
.dropdown-toggle {
  position: relative;
  text-align: left;
  min-width: 10rem
}

.dropdown-toggle::after {
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -2px;
}

.show .dropdown-toggle::after {
  border-bottom: .3em solid;
  border-top: 0;
}

.dropdown-menu {
  border-radius: 0;
}

.dropdown-item .material-icons {
  margin-left: -10px;
  margin-right: 5px
}

.input-group .form-control:focus {
  border-color: #ced4da;
  outline: 0;
  box-shadow: none;
}
.input-group .btn:hover {
  background-color: inherit;
  border-color: rgba(27,31,35,0.2);
}

/* table */

.table {
  width: 100%;
  table-layout: fixed;
  border-bottom: 1px solid rgb(216, 216, 216);
  border-spacing: 0;
  border-collapse: collapse;
  text-align: center
}

.table thead th,
.table th {
  padding: 9px 10px;
  border-top: 1px solid rgb(226, 226, 226);
  border-left: 1px solid rgb(226, 226, 226);
  border-bottom: 1px solid rgb(226, 226, 226);
  font-size: 14px;
  background-color: rgb(248, 248, 248);
  font-weight: normal;

}

.table th:first-child {
  border-left: 0 none
}

.table td {
  padding: 10px 10px 9px;
  border-top: 1px solid rgb(233, 233, 233);
  font-size: 14px;
  line-height: 17px
}

.table tr:first-child td {
  border-top: 0 none
}

.table td {
  border-left: 1px solid rgb(233, 233, 233)
}

.table tr td:first-child {
  border-left: 0 none
}

/* Nestable */

.dd {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 20px;
}

.dd-list {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dd-item,
.dd-empty,
.dd-placeholder {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 20px;
  line-height: 20px;
}

.dd-handle {
  cursor: move;
}

.dd-handle:hover {
  color: #2ea8e5;
}

.dd-placeholder,
.dd-empty {
  margin: 5px 0;
  padding: 0;
  min-height: 30px;
  background: #f2fbff;
  border: 1px dashed #b6bcbf;
  box-sizing: border-box;
  -moz-box-sizing: border-box
}

.dd-empty {
  border: 1px dashed #bbb;
  min-height: 100px;
  background-color: #e5e5e5;
  background-image: -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), background-image: -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), background-size: 60px 60px;
  background-position: 0 0, 30px 30px;
}

.dd-dragel {
  position: absolute;
  pointer-events: none;
  z-index: 9999;
}

.dd-dragel > .dd-item .dd-handle {
  margin-top: 0;
}

/* list-header */
.list-header-edit {
  display: none
}
.list-header.edit .list-header-edit {
  display: block
}
.list-header.edit .list-header-show {
  display: none
}

/* list-section */
.list-section .list-section-edit {
  display: none;
}
.list-section.open .list-section-edit {
  display: block;
}
.list-section.open .list-section-show {
  display: none;
}
.list-section [data-role="empty-section"] {
  display: none
}
.list-section [data-role="has-section"] {
   display: block
 }
.list-section.empty [data-role="empty-section"] {
 display: block
}
.list-section.empty [data-role="has-section"] {
 display: none
}

[data-role="follow"].active {
  background-color: #e0e0e0 !important;
  color: #696969 !important;
  border: none !important
}
[data-role="follow"].active::after {
  content: '중'
}


.btn.btn-white.active {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}
