.tabs-input {
  max-height: 30px !important;
  display: inline-table;
  position: absolute;
  margin-top: 11px;
  cursor: text;
  width: 250px;
  left: 200px;
  top: 0px;
}
.tabs-input .tabs-input-group {
  box-shadow: none;
  border-radius: 10px;
  border: 1px solid #cecbcb;
  transition: box-shadow 0.3s;
}
.tabs-input .tabs-input-group:hover {
  box-shadow: 0px 0px 10px 0.1px #ffffff;
  transition: box-shadow 0.3s;
}
.tabs-input .tabs-input-form {
  background-color: transparent;
  display: inline-flex;
  font-style: italic;
  position: relative;
  padding: 0px 10px;
  color: #cecbcb;
}
.tabs-input .tabs-input-button {
  justify-content: center;
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  float: right;
  height: 42px;
  width: 40px;
}

/* IN MOBILE */
.tabs-trigger-search.tabs-is {
  font-size: 15px !important;
  transform: rotateY(180deg);
  font-weight: 700;
  cursor: pointer;
}
.tabs-trigger-search.tabs-is:hover {
  color: #ededed;
}


/* Search Modal */
.tabs-modal {
  display: none;
  top: -100%;
  transition: top 0.3s;
}
.tabs-modal.tabs-show {
  width: 100%; height: 100%;
  background-color: #ffffff;
  top: 0px; left: 0px;
  overflow-x: hidden;
  overflow-y: scroll;
  position: fixed;
  display: block;
  z-index: 1000;
  transition: top 0.3s;
}
.tabs-modal .tabs-header {
  width: 100%;
  padding: 0px 15px;
}
.tabs-header .tabs-trigger-close {
  margin-top: -35px;
  cursor: pointer;
  font-size: 5em;
  float: right;
}
.tabs-modal .tabs-body {
  padding-top: 20px;
}
.tabs-exo-form {
  border: none !important;
  border-bottom: 4px solid #808080 !important;
  font-style: normal !important;
  padding: 7px 10px !important;
  font-size: 1.6em !important;
  font-weight: bold;
  width: 100%;
}
.tabs-listbox {
  width: 100%;
  display: inline-flex;
  overflow-y: hidden;
  overflow-x: scroll;
  padding: 5px;
}
.tabs-button {
  font-size: 1.1em;
  padding: 7px 7px;
  margin: 10px 7px;
  border-radius: 5px;
  background-color: #dfdfdf;
  border: none;
  outline: none;
  color: #ffffff;
  min-width: 130px;
}
.tabs-button:focus,
.tabs-button.active {
  background-color: #EF3340 !important;
  box-shadow: 0px 0px 10px 0.7px #c2c0dd !important;
}
.tabs-button:hover {
  background-color: #EF3340;
}
.tabs-button.active,
.tabs-button:focus {
  background-color: #2f68b1;
  box-shadow: 0px 0px 0px 5px #82bee3;
}


/* TABS CARD */
.card.tabs-card {
  height: 60px;
  color: #000000;
  box-shadow: none;
  transition: color 0.3s, box-shadow 0.3s, background-color 0.3s;
}
.card.tabs-card:hover {
  box-shadow: 0px 0px 10px 0px #d4d4d4;
  background-color: #f2f2f2;
  color: #7c85cb;
  transition: color 0.3s, box-shadow 0.3s, background-color 0.3s;
}
.card.tabs-card:active {
  background-color: #d4d4d4;
  transition: background-color 0.3s;
}
.card.tabs-card .card-body {
  padding: 0px;
  display: flex;
}
.card.tabs-card .image {
  display: inline-flex;
  margin: 0px; padding: 0px;
  width: 60px; height: 100%;
  border-radius: 3px 0px 0px 3px;
}
.card.tabs-card .tabs-content {
  display: absolute;
  width: 100%;
  margin-left: -60px;
  padding: 2px 3px 5px 67px;
  text-align: left;
}
.card.tabs-card .judul {
  height: 45%;
  font-size: 1em;
  font-weight: bold;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 8px 0px -2px 0px;
}
.card.tabs-card .keterangan {
  height: 45%;
  margin-top: 0px;
  font-size: 0.8em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tabs-card-link {
  padding: 0px; margin: 10px 2%; width: 29%;
}
.tabs-modal .tabs-footer {
  height: 150px;
}

/* SCROLL */
body.tabs-body-scroll::-webkit-scrollbar {
  display: none;
}


.tabs-listbox::-webkit-scrollbar {
  height: 7px;
}
.tabs-listbox::-webkit-scrollbar-track {
  background-color: #ffffff;
}
.tabs-listbox::-webkit-scrollbar-thumb {
  background-color: #a3a3a3;
  border-radius: 30px;
}
.tabs-listbox::-webkit-scrollbar-thumb:hover {
  background-color: #8c8c8c;
}
.tabs-listbox::-webkit-scrollbar-thumb:active {
  background-color: #646242;
}



@media only screen and (max-width: 1200px){
  .tabs-card-link {
    padding: 0px; margin: 10px 5%; width: 40%;
  }
}
@media only screen and (max-width: 760px){
  .tabs-card-link {
    padding: 0px; margin: 10px 5%; width: 90%;
  }

  .card.tabs-card .card-img-top {
    width: 100%; height: 280px;
  }
}