.tabs .tabs-list,
.tabs .modal-tab-list {
  display: flex;
}

.tabs .tabs-list li,
.tabs .modal-tab-list li {
  padding: var(--s1) var(--s4);
  text-align: center;
  display: inline-block;
}
.tabs .tabs-list li:hover,
.tabs .modal-tab-list li:hover {
  cursor: pointer;
}
.tabs .tabs-list li a,
.tabs .modal-tab-list li a {
  text-decoration: none;
  color: #949393;
  font-size: var(--s16);
}

/* Tab content section */
.tabs .tab,
.tabs .modal-tab {
  display: none;
  min-height: 100px;
  height: auto;
  clear: both;
  font-size: var(--s12);
  margin-bottom: var(--s1);
  width: 100%;
  overflow-x: auto;
}

.tabs .tab p,
.tabs .modal-tab p {
  margin-bottom: var(--s1);
}

/* When active state */
.tabs .active,
.tabs .active {
  display: block;
}

.tabs .tabs-list li.active,
.tabs .modal-tab-list li.active {
  color: black !important;
  border-bottom: 3px #000 solid;
  transition: all width 0.3s;
}
.tabs .tabs-list li.active a,
.tabs .tabs-list li:hover a,
.tabs .modal-tab-list li:hover a,
.tabs .modal-tab-list li.active a {
  color: #000000;
}

.border-top-pd {
  border-top: 1px solid var(--outline);
  padding-top: var(--s2);
  padding-right: var(--s2);
  overflow: auto;
  max-height: 130px;
}
.border-top-pd::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 99, 2, 0.3);
  background-color: #f5f5f5;
}

.border-top-pd::-webkit-scrollbar {
  width: 6px;
  background-color: #f5f5f5;
}

.border-top-pd::-webkit-scrollbar-thumb {
  background-color: #022d00;
}